FlowType.JS – Web typography JavaScript library for auto re-sizing text

Web typography JavaScript library, that is automatically adjusting the font size and line-height properties of the text, to fit in the container’s width.

FlowType.JS – Web typography JavaScript solution

Dynamic font-size and line-height based on element width!

What does FlowType.JS actually do?

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and line-height based on a specific element’s width. This allows for a perfect character count per line at any screen width.

FlowType.js
FlowType.js

Options and usage

Set minimum and maximum width thresholds to control the FlowType.JS magic within specific element widths.

For example – FlowType.JS will stop re-sizing text once the element width becomes smaller than 480px or larger than 1280px:

$('body').flowtype({
 minimum : 480,
 maximum : 1280
});

Project homepage, docs and demos:

http://simplefocus.com/flowtype

http://simplefocus.com/flowtype/demo.html

GitHub:

https://github.com/simplefocus/FlowType.JS

License: MIT

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1