Responsive typography

Interaction design is engineering: it's not about finding the perfect design, it's finding the best compromise, which means it requires you to think about compromises between visual design and technology from the very beginning.

The content matters

• The content and the language used has a big impact on how our typography will work. Oliver Reichenstein also states that different font sizes and contents have different influences on our ways of writing, editing and reading.
• Typography for the web should design inside the browser with the project's real content.

Typeface

• Choose the typeface fits the right tone (based on the real content) of the website.
• The size of the body text depends on reading distance, and reading distance varies depending on the device used or held.

Line height

• 140% is a good benchmark for line height but it also depends on the typeface you use.
• Use tighter leading in a narrower paragraph, and looser in a wider one.

To take reading distance into account, the smaller the screen size it is, the smaller the type size and tighter the line height should adopt, so that the perceived size is more or less the same as on all devices.

Additional tips

• Always use non-breaking spaces( ) in expressions in which figures and abbreviations are separated by a space (e.g. 20 kg, 4:00 pm).
• Try to keep the line length between 45-75 characters per line.

Useful tools

• Web Font Specimen, Typecast app (14-day trial) and Typekit’s font browser.
• For testing: Resizer Safari Extension

Source: Responsive Typography: The Basics by Oliver Reichenstein, Prototyping Responsive Typography by Viljami Salminen.