Choosing Typefaces for Digital Products

Type specimen of the letters A and a in rows, with a red A and Z on black

Type makes up most of what people see on a website. The right typeface sets the tone in a second; the wrong one makes even good content feel hard work.

Start with reading, then add character

Choose the body face first: open shapes, generous x-height and clear differences between similar letters. Then pick a display face for headlines that carries the brand’s personality.

Limit the pairing

Two families are almost always enough. Contrast them clearly – a geometric sans with a humanist sans, or a serif with a sans – rather than pairing two faces that are nearly the same.

Build a type scale

Define a handful of sizes and line heights and use them everywhere. A consistent scale gives hierarchy and keeps layouts calm across pages.

“Typography is the voice of your interface. Make sure it says the same thing on every page.”

— Marcus Hale, Type Designer, Letterworks

Check the licence and the weight

Make sure the licence covers web use, and load only the weights you need. Variable fonts can replace several files with one and keep pages fast.

Last update

  • Typography
  • Web design

Video