FlowType.JS

Download from GitHub

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, reviewed below, allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and 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, so that you can set your typography perfectly.

FlowType.JS is extremely easy to use. Visit the getting started section, follow the four easy steps and you will be on well on your way to performing magic.

Drag to watch the type change.

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.

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 using the fontRatio variable. When 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 eyeball 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).  See line-height below.

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


Line-height

In v1.0 of FlowType, we made the plugin set a specific line-height in pixels. We received many statements that setting a specific line-height is very dangerous. So, what did we do? We removed support for line-height in v1.1.

What do I do now? It's quite simple: use unitless line-height in your CSS. It will make automatically make changes based on whatever the font-size. Here's an example of what we suggest for line-height:

fontRatio : 30;

Getting Started

Step 1: Set Typography Base

Prepare for FlowType.JS by making sure that the typography is flexible. Start with this CSS and make changes as necessary:

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

Note: Setting a specific font-size in your CSS file will make sure that your website remains accessible in case your viewer has javascript disabled. These numbers will be overridden as FlowType.JS updates the font-size and line-height numbers inline.

Step 2: Download from GitHub

Download FlowType.JS on GitHub and include both jQuery and the flowtype.jQuery.js file in the head of your HTML document.

Download from GitHub

Step 3: Call FlowType.JS

To begin the magic, simply call FlowType.JS before the close of your body tag:

$('body').flowtype();

Step 4: Make Changes

You will most likely want to change the default settings. To do so, simply include these options in your code and tweak away:

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

What about performance?

We've got that covered. Check out this demo.

What about webfonts?

FlowType.JS works just fine with Typekit, Cloud.Typography, Google Webfonts and any other service you can think of.