Mark Dugonjic: Responsive Typography

Published: March 19th 2014by Orde Saunders

Mark Dugonjic (@markodugonjic) was speaking at Smashing Conference about resposnive typography, these are my notes from his talk.

Typograpy is a tool to the higher goal of connecting the content to the user.

The problem

Responsive designs often have the correct typography with big layouts but don't react appropriately to small layouts.

In print you pick a point and it doesn't change. In web you define a range of acceptable parameters.

Reading distance

Visual pixel defined by W3C as the visual angle of 0.0213 degrees. Currently we can only guess by the size of the screen. Could make a better guess by using facial recognition.

Sensible defaults: font-size: 100%; line-height: 1.5; margin-bottom: 1.5em; max-width: 38em;

Viewport width

40-50 characters is good for multi-column text. Doesn't work for a very narrow viewport. Put * every X characters to see how your line length fits with a width of X characters.

Em based media queries will take account of the base font size of the browser.

Shorter line lengths need less spacing between lines and v.v. It's too tight when qs and ds start touching between lines. Can use a background image with a linear gradient to check vertical rhythm. Molten leading is a JS solution.

Three spaces in a text: letter space, word space, line space. letter-spacing and word-spacing can be used in a high dpi media query.

Hierarchy

Use a typographic scale - 16, 18, 21, 24, 36, 48, 60, 72, ... http://www.modularscale.com

Style options: All caps, small caps, italic, bold.

Information density

Whenever there is space, people will fill it. We can balance this by creating typographic interest.

less information: style variation, indents, white space
more info: typographic scale, block paras, graphic elements

Pixel density

Web fonts are now designed for the screen - still readable at small sizes. Print has already done this for poor quality paper. You can get sub-weights for different quality of reproduction. Can vary the web font using media queries.