Understanding Responsive Typography

Serif vs. Sans-Serif
Image from webscripts.softpedia.com

Following the philosophy that content is key, typography must be considered of equal importance. Choice of typeface, font size, font weight, line height, and the number of characters per line all contribute to the user experience and maximize readability. Responsive web design adds another layer of complexity to typography–the same typographic treatment for a desktop and mobile device is not optimal.

Typeface

The first step to responsive typography is choosing the right typeface. There has been a debate for a long time about whether serif or sans-serif fonts are more legible. Most books seem to have a serif typeface while the web seems more skewed towards sans-serif, though this is a generalization. Serif may be better suited for a headings while sans-serif for body copy. The number of typefaces for one website shouldn’t exceed 3 though 1 or 2 is probably best. Clean sans-serif typefaces like Open Sans seem to be the growing trend. Two great web font libraries can be found at Google Fonts and Font Squirrel.

Browser and operating system inconsistencies are also something to think about. Not all systems play nice with font rendering…looking at you IE.

Font Size

The next consideration is font size and with that, the choice of absolute (pixels) or relative units (ems, rems, percentages). Most browsers are defaulted to a 16px font size or 1em. If you set a font-size of 18px on the body element, then 1em = 18px and 2em = 36px. Font size on a mobile device should be smaller than on a desktop monitor as demonstrated here. This can be done by scaling the text at specific media queries or breakpoints.

Marko Dugonjić, a writer at Smashing Magazine, experimented with font sizes relative to a user’s distance from the screen with a base font size set as a percentage and then the specific tags defined in rems. He accomplished this with facial recognition by detecting the user’s webcam. The project can be viewed on his website.

Another technique you could utilize would be constructing a modular scale with ratios and a lot of math. This can be visually demonstrated with this calculator by Jeremy Church with the building blocks by Tim Brown.

Font Weight

Font weight refers to the thickness of the characters. A normal font weight is typically 400. Varying font weights and font sizes are used to separate sections of content but also make content visually appealing and easy to scan and read more quickly. Small font weights of 300 or below do not look great at smaller font sizes.

Line Height

Line height refers to the space between the lines. Remember when report papers had to be double spaced? Well, line height has an important role in readability. As font sizes shrink, so too should the line height but finding the correct balance is the real key. The chosen typeface also plays a role in determining optimal line height. It should generally be chosen on a case-by-case basis and be closely tied to both typeface and font size.

Characters per Line

Textbooks always seemed more arduous to read, not only for the dry content but because of the large pages and the amount of characters in each line. The consensus is that the optimal character count should be between 45 and 75 characters but trial and error is probably the best barometer, which is true of all aspects of responsive typography… test, test, test.

Resources: