Better Responsive Typography

Any smartphone user has probably noticed and been annoyed by sites (even responsive ones) that are difficult to read or just don’t look quite right. I know I’ve been annoyed by trying to view a website on my phone and having to strain to read the text, or given up waiting on a page to load due to a slow connection or just a half-considered mobile layout. With more and more web traffic coming from mobile users, web designers have to be concerned with how readable text is on any type of screen.

Font Size

What device are you currently reading this article on, and how far away are you sitting? Most people sit between 18 and 24 inches from a desktop or laptop display, but hold a phone or tablet significantly closer. To make up for this distance, you can use larger type for larger displays and smaller type on mobile displays. However, the line length needs to be considered along with the type size and layout.

Line Length and Line Height

An often-overlooked element of typography on the web is line length. According Robert Bringhurst, in The Elements of Typographic Style, the optimal line length is between 45 and 75 characters, with 66 characters being the “ideal”. Setting the body text of a website in this range allows the user to read quicker and stay engaged longer.

Line height should go along with line length. As the screen becomes wider and the line becomes longer, the space between lines needs to increase so that the eye can quickly find the next line. Too much space between lines can look awkward on smaller screens. So whereas a line-height of around 1.5 may work well for desktop displays, a line-height of 1.2 may be better for mobile devices. However, there is no ideal line-height, so it may take some adjustments to find the best line height for the various screen sizes.

Web Fonts on Mobile

Should you include web fonts for narrow screens, or use them only on desktop displays? Web fonts by now are a standard practice for many reasons — consistency between browsers and OSes, better designed typefaces, and giving the site a unique look. But if you use more than one, they can quickly add on 300–400KB to a page’s size, increasing load time and bandwidth usage, which is especially important to consider for mobile devices.

One of the issues with using the system fonts on mobile devices is inconsistency. Android devices only come with 4 fonts, which are not included on iOS, Windows, or Mac devices. If we want to provide a consistent experience for our website across devices, we will have to include at least some web fonts.

How can this be done without adding on too much weight to a page? Reduce the number of fonts loaded on mobile. This is easily done with media queries and mobile-first practices. Even if a font is defined with @font-face, it will only be downloaded by the browser if it is used somewhere in the site’s CSS. A mobile browser will disregard any fonts mentioned within media queries that don’t apply to the device, so if you load the heaviest fonts inside of your min-width media queries, you can avoid downloading them on mobile devices.This way, you can create a subset of your web fonts to be loaded on a mobile device.

Here, I’m only downloading Open Sans at two font weights on mobile, and adding in a different typeface for desktop users. The user will see a bit more consistency because we’re at least using Open Sans for both mobile and desktop, but they can avoid downloading any extra fonts beyond that.

/* Declare the font-faces, but they won't necessarily be downloaded until they're used */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpJQV2lvL5Ba9FjAYK6Lx0Qk.woff2) format('woff2');
}


/* Mobile layout by default */
/* We'll only use one web font here */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

/* Use the same font for headings on mobile */
h1 {
    font-weight: bold;
    font-size: 36px;
}

h2 {
    font-weight: bold;
    font-size: 24px
}

@media (min-width: 768px) {
    body {
        line-height: 1.5;
    }
    
    /* Now that we're at a larger screen size, we'll load the second font */
    /* The browser will only download PT Serif if the screen size is wider than 768px */
    h1, h2 {
        font-family: "PT Serif", serif;
    }
}

Read More:

“Fluid Type” by Trent Walton

“What Screens Want” by Frank Chimero

On Web Typography by Jason Santa Maria