Mark Dugonjic: Responsive Typography

Orde Saunders' avatarPublished: by 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. 

Device orientation

Sub pixel rendering changes with orientation as sub-pixels are vertical bands.

Line length changes as orientation changes.  We can use different width fonts to work with this set by media queries.

Screen aspect ratio

All aspect ratios are possible - you are on your own!

Context

  • device
  • envronment
  • time
  • activity
  • individual
  • location
  • social

This can all be a bit complicated, from time to time we need to detach and relax.