Using FlowType.js for increased legibility

One of the most compelling editorial principles states that the ideal line length for the most legible typography is between 45 and 75 characters.

That's a pretty decent range if you ask me. However, actually making your paragraphs long enough, or short enough for that matter, is like a "blind leading the blind" game. How can we tell whether the combination of the width of a container and its font size actually meet the 45 to 75 characters recommendation? Also, on small or medium screens, how can you tell this is the case?

Tricky one, eh?

Well, no need to worry because with FlowType.js, we can address these issues.

You can download the plugin from http://simplefocus.com/flowtype/.

The first thing we need is the HTML, so here's the markup we're going to use:

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Meaningful Typography for RWD</title>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/flowtype.js"></script>
</head>
<body>
    <main class="main-ctnr" role="main">
        <h1>Meaningful Typography for RWD</h1>
        <blockquote>
            <p>"With a solid typographic scale you might even get away with not using a single image on your website."</p>
            <p>— Ricardo Zea</p>
        </blockquote>
        <p>One of the most compelling editorial principles states that the ideal line length for the most legible typography is between 45 and 75 characters.</p>
    </main>
</body>
</html>

Once you get comfortable with FlowType.js, you might actually start thinking, "If FlowType automatically modifies the font size at pretty much any viewport width, I don't think I need to declare any font sizes in my SCSS! After all, they are going to get overwritten by FlowType."

Well, we do need to set the font size regardless, because if FlowType.js doesn't load, we'd be left at the mercy of the browser's default styles, and we designers do not want that.

With that being said, here's the SCSS to declare the necessary font sizes:

//Pixels to Rems Mixin
@mixin font-size($sizeValue: 1.6) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}
//Base-10 model
html { font-size: 62.5%; }
h1 { @include fontSize(3.9269); }
p { @include fontSize(1.6); }

This will compile to the following CSS:

html {
    font-size: 62.5%;
}
h1 {
    font-size: 39.269px;
    font-size: 3.9269rem;
}
p {
    font-size: 16px;
    font-size: 1.6rem;
}

This is where the magic happens. We create a jQuery function where we can specify which element(s) to target. This function can be placed either inside a separate JavaScript file or within the markup.

In our example we're telling FlowType.js to apply the resizing of the font to the <html> element. Since we're using relative font size units, rems, all the text will automatically resize/adjust at any screen width, maintaining the ideal line length.

Here's the jQuery function:

$(function() {
    $("html").flowtype();
});

Defining thresholds

There's a potential problem with the solution we just saw: FlowType.js will modify the font size of the paragraphs indefinitely. In other words, on small screens the text will be extremely small and on large screens it will be way too big.

We can solve this issue with two separate threshold approaches or a combination of both.

Now, one thing we need to make clear is that this part will require some tweaking and adjusting in order to get the best results, there aren't specific values that will work for all situations.

We are going to use the following approach:

Define the minimum and maximum widths of the container or element.
Define the minimum and maximum font sizes of the container or element.

Threshold widths

Defining the minimum and maximum widths will tell FlowType.js at which points it should stop resizing.

Let's define the width thresholds:

$(function() {
    $("html").flowtype({
      //Max width at which script stops enlarging
        maximum: 980,
      //Min width at which script stops decreasing
      minimum: 320
   });
});

Tip

The thresholds I selected work specifically for this example and it may not necessarily work for other situations. Tweak and test until you get the ideal widths that work with the recommended 45-75 characters per line recommendation.

Threshold font sizes

Just like with the width thresholds, defining the minimum and maximum font sizes will tell FlowType.js what the smallest and largest font sizes it should scale the text to.

We're also going to declare our own font size using the fontRatio variable; the higher the number, the smaller the font, and the lower the number, the larger the font. If this feels counterintuitive, look at it this way: the higher the number, the higher the compression (thus making it small) and the lower the number, the lower the compression (thus making it large).

Adjusting the fontRatio value is an eyeballing exercise, so tweak and test like there's no tomorrow.

Let's take a look at the font sizes values:

$(function() {
 $("html").flowtype({
      //Max width at which script stops enlarging
      maximum: 980,
      //Min width at which script stops decreasing
      minimum: 320,
      //Max font size
      maxFont : 18,
      //Min font size
      minFont : 8,
      //Define own font-size
      fontRatio : 58
   });
});

Tip

There's no need to include a comma after the last value in the list.

FlowType.js just plain rocks man!

Here's a demo I created for this in CodePen:

http://codepen.io/ricardozea/pen/c2e6abf545dbaa82a16ae84718c79d34

Previous Chapter

Sass mixin for implementing web fonts

Next Chapter

Summary