Meridian

Design

Typography is the interface nobody notices

Most of the web is text, yet text is the part we design last. A few decisions about type shape how long people will read.

Maya Okafor Technology & Design Editor
  • Published
  • Updated
  • 2 min read
  • 3.7k views
  • 43 likes
  • 1 comments
Abstract artwork in sage tones with overlapping circles and fine horizontal lines
Illustration generated for Meridian
In this article
  1. The width of the column
  2. Size and spacing
  3. Contrast without harshness
  4. Hierarchy that guides
  5. Pairing typefaces
  6. Take the time

Open almost any website and most of what you see is words. Yet in many projects typography is the final polish, applied after the layout and the colours are settled. That order is backwards.

For a publication, typography is the product. The reader's experience over twenty minutes depends on a handful of quiet decisions.

The width of the column

The single most important setting is line length. When lines run too long, the eye loses its place on the way back to the next line. When they are too short, reading becomes jerky.

Somewhere between 60 and 75 characters per line works well for most readers, which is roughly a column of 680 to 760 pixels at body size.

Size and spacing

Body text that is comfortable on a phone is often too small on a desktop monitor viewed from further away. Slightly larger type with generous line spacing, around 1.7 times the font size, gives each line room to breathe.

  • Use at least 17 pixels for long-form body text.
  • Keep paragraph spacing larger than line spacing.
  • Avoid justified text on narrow columns, where it creates uneven gaps.

Test your article on a real phone in daylight. Many contrast problems only appear outside.

Contrast without harshness

Pure black on pure white has the highest possible contrast, but on a bright screen it can feel glaring over long sessions. Many publishers choose a very dark grey on a soft off-white, which stays comfortably above accessibility thresholds while reducing fatigue.

Hierarchy that guides

Headings should be clearly different from body text and consistent in their steps. A reader scanning the page should be able to understand the structure of the argument from the headings alone.

Good typography does not draw attention to itself. It removes reasons to stop reading.

Pairing typefaces

A serif for headings and long text paired with a clean sans-serif for interface elements is a classic combination, because the two do different jobs. Choose fonts designed for screens, load them efficiently and always specify sensible fallbacks.

Take the time

If you only have an afternoon to improve a site, spend it on type. Adjust the width, size, spacing and contrast, then read a long article yourself from beginning to end. You will feel the difference before you can explain it.

Did this help you think?

Keep reading

Conversation (1)

  1. Sam Whitfield

    The 60 to 75 characters per line rule is the one I wish every client understood.

Join the conversation

Never published.