News

How to create better responsive typography

How to make your typography responsive to deliver a first class user experience on every device

responsivetypograhy

responsivetypograhy

With responsive web design, the temptation can be to concentrate on the overall layout, and which divs do what as the viewpoint changes, but what about your text?

People have arrived at your site to read what you have to say and if they don’t find it easy or enjoyable they simply won’t stay. If you want your website to be responsive and effective then you really need to know a little about responsive typography.

As with many other web design disciplines you’ll have to deal with browser compatibility issues, and as you venture further, you’ll appreciate the diversity of the issues you need to consider and the refinements that are possible. You can achieve a great deal with CSS only but there are also a few handy jQuery plugins too. It’s time to focus on the typography.

DOWNLOAD TUTORIAL FILES

The measure of it

For optimum readability your line length (or measure) should be 45-75 characters. Within sensible limits, select your font and the width it is to occupy. You can then set the font-size of your body text. In this case the size is set to 18px in the root element ‘html’.

001    @import url(http://fonts.googleapis.com/
css?family=Droid+Serif|Quando);
002    *    { 
003        margin: 0; 
004        padding: 0; 
005    }
006    html { font-size: 18px;
007        font-family: ‘Droid Serif’, serif;
008        background-color: #e7bb4a;
009        color: #333;
010    }
011    

Keep it relative

Using rem units (as in h2 here) enables the relative size of the element to be fixed according to the root element. You might have several dozen rem-sized elements in your document and simply changing the font-size in your html element will automatically change their size.

001    h2 { font-size: 2.8rem; 
002         margin-bottom: 15px;
003         font-family: ‘Quando’, serif;
004         color: #a2422a;
005    }
006    p { 
007        line-height: 1.45;
008        margin-bottom: 20px;
009    }
010    

Manage your widths

Remember that maintaining suitable column widths is essential in achieving good readability. On a desktop screen, if you have only one column of text you’ll need to allow plenty of negative space around the text block to ensure a good user experience. The img element shows an example of using rem units to set a relative size to the bottom margin.

001    #page-wrap { 
002        width: 60%; 
003        margin: 100px auto; 
004    }
005    img {
006            max-width: 90%;
007            margin-bottom: 2rem;
008            box-shadow: 0 0 8px #333333;
009    }
010    

Breakpoints

Decide on the breakpoints to use for your site. Using ems means your breakpoints will be respected even if the user changes the text zoom in their browser. At each breakpoint you have the opportunity to tweak the factors that will affect the readability of the text at that screen size.

001    /* ===== == = 20em (320px) = == ===== */
002    @media only screen and (min-width : 20em) {
003    html {font-size: 12px;}
004    #page-wrap { width: 85%; margin: 1rem 
auto; }
005    }
006    /* ===== == = 30em (480px) = == ===== */
007    @media only screen and (min-width : 30em) {
008        html {font-size: 14px;}
009        #page-wrap { width: 80%; margin: 
1.5rem auto; }
010    }

Subtle and small

On smaller screens the difference between your largest heading and smallest text should be reduced, so you will typically use smaller rem values. You will also tend to use much narrower margins to enable you to make the most of the available screen space.

001    /* ===== == = 37.5em (600px) = == ===== */
002    @media only screen and 
(min-width: 37.5em) {
003        html {font-size: 16px;}
004        #page-wrap { width: 75%; margin: 2rem 
auto; }
005    }
006    /* ===== == = 48em (768px) = == ===== */
007    @media only screen and (min-width : 48em) {
008        html {font-size: 18px;}
009        #page-wrap { width: 65%; margin: 2.5rem 
auto; }
010    }

Large and bold

At larger sizes you’ll really want to make use of impressively sized headings and large margins to give each element its own space.

001    /* ===== == = 56.25em (900px) = == ===== */
002    @media only screen and (min-width : 
56.25em) {
003        html {font-size: 20px;}
004        #page-wrap { width: 60%; margin: 3rem 
auto; }
005    }
006    /* ===== == = 68.75em (1100px) = == ===== */
007    @media only screen and (min-width : 
68.75em) {
008        html {font-size: 22px;}
009        #page-wrap { width: 55%; margin: 3.5rem 
auto; }
010    }
011    /* ===== == = 81.25em (1300px) = == ===== */
012    @media only screen and (min-width : 
81.25em) {
013        html {font-size: 24px;}
014        #page-wrap { width: 50%; margin: 4rem 
auto; }
015    }
016    

Width=device-width

Switching to the HTML, you’ll need to set how ‘width’ is handled. This enables you to determine how the page is scaled rather than leaving it to the device to decide. Without this tag, smartphones will tend to ‘zoom out’ in an attempt to show the whole page.

001    <!DOCTYPE html>
002    <html>
003    <head>
004        <title>Responsive Typography</title>
005        <meta charset=”UTF-8” />
006        <meta name=”viewport” content=”width=
device-width, initial-scale=1”>

007         <link rel=”stylesheet” href=”css/style.
css”>
008    </head>
009    

Using FlowType.js

User experience brand firm Simple Focus developed this plugin to simplify the process of maintaining optimum line length using jQuery and without the need to use media queries. First you’ll need
to link to jQuery and the plugin in the head of your HTML document.

001        <script src=”js/jquery-1.11.0.min.js”>
</script>
002        <script src=”js/flowtype.js”></script>

Max mins

After the HTML content you call the FlowType script and set several variables. The minimum and maximum values are the threshold at which the plugin stops resizing text, and the minFont and maxFont the smaller and largest size in pixels that the plugin will use.

001    <script>
002        $(‘body’).flowtype({
003        minimum   : 500,
004        maximum   : 1200,
005        minFont   : 12,
006        maxFont   : 40,
007        fontRatio : 45
008    });
009    </script>

Font ratio

Each font is different and the fontRatio variable enables you to tweak the font size to achieve your desired result. Increase the value to make the font smaller, and vice versa. It should go without saying that you need to check how your page looks at different widths.

Media queries again

FlowType does a great job of managing line lengths to optimise readability but it won’t make the other tweaks that you will want to make to reflect the needs of smaller and larger screens. You’ll still want to use smaller margins on tiny screens and larger margins on big ones so a simplified set of media queries can be used.

001    @media only screen and 
(min-width : 20em) {
002    #page-wrap { width: 85%; margin: 1em 
auto; }}
003    @media only screen and 
(min-width : 30em) {
004    #page-wrap { width: 80%; margin: 1.5em 
auto; }}
005    @media only screen and 
(min-width: 37.5em) {
006    #page-wrap { width: 75%; margin: 
2em auto; }}
007    @media only screen and 
(min-width : 48em) {
008    #page-wrap { width: 65%; margin: 
2.5em auto; }}
009    @media only screen and 
(min-width : 56.25em) {
010    #page-wrap { width: 60%; margin: 
3em auto; }}

R for root

By default, Flowtype is applied to the body of the page. However, as the heading is set using rem units, the heading will not be re-sized. There are two ways round this. First you can set Flowtype to apply to the root element by changing ‘body’ to ‘html’ towards the bottom of your HTML, or you can use em instead.

001    $(‘html’).flowtype 

Compatibility and fallback

For older browsers that do not support rem you will want to include fallback. On the face of it the fallback is simple – just define the size in pixels first. However, that could lead to a lot of manual changes so you might want to explore using LESS or SASS mixins to minimise duplicated code.

001    h1   { font-size: XXpx; font-size: 

YYrem; }

Viewport sized typography

Another method, growing in popularity, for creating responsive text makes use of viewport units. Each unit is equivalent to 1% of the viewport width or height. Browser support is currently lower than for rem units but in exchange you get fully fluid text and could probably make do with only two media queries to avoid inappropriately small or large text.

001    h1 {   
002    font-size: 5.9vw; 
003    } 
004    h2 {   
005    font-size: 3.0vh; 
006    } 
007    p {   
008    font-size: 2vmin; 
009    }
010    

FitText.js

Sometimes you might just want help with making your headings work nicely at all sizes. In that case FitText.js might be the best solution for you. Once set up, you simply apply an id for each heading to be sized and when the function is called, pass some optional configuration settings.

001    <h1 id=”fittext1”>Squeeze with FitText
</h1>
002    <h1 id=”fittext2”>Squeeze with FitText
</h1>
003    <h1 id=”fittext3”>Squeeze with FitText
</h1> 
004    $(“#fittext1”).fitText();
005    $(“#fittext2”).fitText(1.2);
006    $(“#fittext3”).fitText(1.1, { minFontSize:
‘50px’, maxFontSize: ‘75px’ }); 
007    

A more modern scale

Jason Pamental (bit.ly/LdQ9Ut) has considered the challenges of responsive typography in great detail. To quote Jason, “The problem is, as the screen size shrinks and fewer elements are visible, the relative scale between elements becomes exaggerated. What’s needed is greater subtlety and flexibility to maintain a more balanced proportion and better readability across all experiences.”

Do it online

If you’d like more layout support with a focus on typography, typecast.com provides a suite of online tools to rapidly prototype and test your designs. Not for you? Typecast’s responsive.is adds a utility bar to the top of your page where you can check sites based on five different breakpoints all without having to re-size your browser manually.

×