FlowType.JS – Web typography at its finest

FlowType.JS – Web typography at its finest: font-size and line-height based on element width.

What does FlowType.JS 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 subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.

Additional options, allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and font-size/line-height ratios. The element size thresholds will stop FlowType.JS from performing its magic once the element reaches beyond specific pixel dimensions. The font-size thresholds will stop FlowType.JS from resizing the text beyond certain font-sizes. Lastly, you have full control over the base font-size and line-height ratios, so that you can set your typography perfectly.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

DEMO | DOWNLOAD

Options

Thresholds

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

In this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px.

$('body').flowtype({
   minimum : 500,
   maximum : 1200
});

Set minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes.

In this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px.

$('body').flowtype({
   minFont : 12,
   maxFont : 40
});

Font-size and line-height

Set your own font-size and line-height using fontRatio and lineRatio variables.

When setting the font-size using fontRatio, increase the value to make the font smaller (and vice verse).

Note: Because each font is different, you will need to “tweak” fontSize and “eye ball” your final product to make sure that your character count is within the recommended range.

Line-height (lineRatio) is set based on the fontRatio size, and defaults to 1.45 (the recommended line-height for maximum legibility).

$('body').flowtype({
   fontRatio : 30,
   lineRatio : 1.45
});

body {
   font-size: 18px;
   line-height: 26px;
}
h1,h2,h3,h4,h5,h6,p {
   font-family: inherit;
   font-size: inherit;
}
h1 {
   font-size: 4em;
   line-height: 1em;
}
h2 {
   font-size: 3em;
   line-height: 1em;
}
h3 { etc...

$('body').flowtype();

$('body').flowtype({
   minimum   : 500,
   maximum   : 1200,
   minFont   : 12,
   maxFont   : 40,
   fontRatio : 30,
   lineRatio : 1.45
});