On a website, everyone notices a beautiful image or a distinctive colour. Typography, by contrast, goes unnoticed when it is done well. And yet it is typography that decides whether your visitor reads your text to the end or skims it diagonally. A poor typeface choice can make a good text unreadable. A good choice makes an ordinary text convincing.
Typography, a quiet tool of persuasion
Work by the Nielsen Norman Group on reading on the web shows that people do not read linearly: they scan in an F shape, stopping on headings and on the first words of each line. Your typography has to make that scan easier, not work against it. A typeface that is legible at first glance invites the reader to stop; a hard-to-read one pushes them on to the next site.
Serif, sans-serif, display: what each family really brings
- Sans-serif (Inter, Roboto, Open Sans): ideal for body text on screen, very legible at small sizes and read as modern.
- Serif (Georgia, Playfair Display): brings a premium, editorial tone, effective for long articles or brands that want to inspire trust.
- Display (decorative typefaces): reserved for short headings only, never for running text.
- Monospace: for code or numerical data, never for a general commercial site.
Practical tip: limit yourself to 2 typefaces across your whole site. One for headings, one for body text. More than 2 typefaces is visual noise your visitor feels without being able to explain it. Google Fonts suggests recommended pairings directly in its interface, a good place to start without going wrong.
Size, line height, column width: the three settings that change everything
A 16px typeface is the acceptable minimum for body text on desktop. The ideal line height sits between 1.5 and 1.7 times the type size. As for column width, 60 to 75 characters per line is the recognised comfort range. Go beyond that width and your reader loses the thread at every line break.
Free tool: Typescale (typescale.com) lets you generate a coherent typographic hierarchy from a single base size and a mathematical ratio. In 30 seconds you get all your heading and subheading levels harmonised, with no calculations by hand.
Contrast and accessibility: a point often missed
The contrast ratio between your type and its background has to reach at least 4.5:1 for running text under the WCAG standards. Below that threshold you exclude people with low vision and degrade the experience for everyone on a bright screen. The WebAIM Contrast Checker lets you check any colour and background pair in seconds. Light grey text on a white background, very much in fashion, often fails this test.
Web fonts and their impact on your site's speed
Every external font loaded from Google Fonts or Adobe Fonts adds a network request and can delay your text appearing. To avoid that, load only the weights you need (regular 400 and bold 700 are enough in most cases) and use the font-display: swap attribute recommended by web.dev. If loading speed is an issue on your site, our article on page speed optimisation goes through every avenue worth exploring, from fonts to images by way of hosting.
Typography and visual hierarchy: the pairing that converts
Typography does not work alone. It acts in concert with the visual hierarchy of your page. Well-sized headings, distinctive subheadings and legible body text together form a natural reading path towards your calls to action. If you want to dig into how hierarchy and layout combine, our article on visual hierarchy in web design gives the concrete principles to apply from today.