Choosing typography for your web design

TL;DR

• Typography is the only design choice that appears on every single page of your website. If you choose it wrong, you ’ll notice it everywhere.
• Two typefaces are enough: one for headings, one for body text. Any more will make your site look cluttered and run more slowly.
• Keep body text at 16 to 18 pixels, with a line spacing of at least 1.5 times the font size and 50 to 75 characters per line.
• Fonts are one of the biggest culprits when it comes to slow-loading websites. You can solve this with `font-display`, WOFF2 and subsetting.
• You may use Google Fonts for business purposes free of charge, but you must host them yourself. A German court ordered a website to pay €100 in damages because a visitor’s IP address was sent to Google.
• Since 28 June 2025, stricter accessibility requirements have applied to many websites and online shops under the European Accessibility Act. Typography is a direct part of this.

When it comes to a new website, most of the discussion centres on colour, photos and the homepage. The typeface? That gets squeezed in somewhere. Yet typography is the only design choice that appears on every single page, in every heading, every button and every paragraph. If you choose a typeface that’s hard to read or that slows down your site, you’ll lose visitors without knowing exactly why.

Choosing typography for your web design is therefore not just a matter of taste. It is a balance between character, readability, loading speed and accessibility. In this blog, we’ll go through these considerations: how many fonts to use, which sizes and line heights work best, how to prevent your site from slowing down, and what to look out for with Google Fonts. Practical advice, complete with the relevant standards.

Why is typography important in your web design?

Typography determines whether people actually read your text. Size, font weight and line spacing determine how quickly someone recognises a word and how much effort it takes to get through a paragraph. Because virtually all the information on your website consists of text, every typographical choice directly affects your visitor numbers, your reading time and your conversion rate.

Researchers at MIT investigated how quickly people recognise words at different font sizes and widths. The finding, summarised by the Nielsen Norman Group, was simple: bigger is better. Narrow (condensed) letters took 11.2 per cent longer to read correctly than normal-width ones. This relates to individual words, so you cannot apply it directly to entire paragraphs, but the general trend is clear. Anyone who makes their text smaller and narrower to cram more onto the page makes their site harder to read.

There’s another factor to consider. Typography is one of the first things people look at to gauge whether your company is professional. A page with headlines that are far too large, three different fonts and text that runs right up to the edge feels unpolished, even if the content is excellent. Our designers deliberately devote time to this aspect in every website design we deliver.

How many fonts do you use on a website?

Two. One for your headings and one for your body text. That provides enough distinction to create hierarchy and keeps your site clean and fast. If you only have one typeface with different weights, that’s fine too. Three or more fonts make your page look cluttered and result in extra files that need to be loaded.

Why this combination of the two works: headlines can have character, whilst body text should above all be unobtrusive and easy on the eye. A font with a distinctive shape is nice in a four-word H1, but tiring in a paragraph of a hundred words.

Also note the number of weights. Each weight (regular, semi-bold, bold, italic) is a separate file. Choose three or four that you actually use and leave the rest as they are. We ourselves use Montserrat for headings and Open Sans for body text, both via Google Fonts. Not because they’re the prettiest fonts out there, but because they’re easy to read, work everywhere and cost nothing.

Which font is easiest to read on a website?

A sans-serif typeface with a generous x-height and clearly distinguishable letters reads best on a screen. Think of Open Sans, Inter, Source Sans or Lato. The x-height is the height of a lowercase ‘x’ relative to a capital letter: if it is large, the text appears larger and is easier to read at the same point size.

Does this mean that serif typefaces cannot be used on the web? No. On today’s screens, a good serif typeface reads perfectly well, and many news sites actually choose them deliberately for long-form articles. The rule of thumb is: look at the shape of the letters, not the category. These points carry more weight than whether a font is serif or sans-serif:

• Distinctive letters. Can you tell the capital I, the lowercase l and the number 1 apart? And the a and the o? With many geometric typefaces, this is where things go wrong.
• A generous x-height. Ensures the text remains legible on small formats and on mobile devices.
• Sufficient characters. Dutch texts require diacritics (é, ë, ï). Not every font includes these.
• Enough about typefaces. You’ll need at least a regular and a bold, plus usually a semi-bold for subheadings.

You often hear that there are special fonts that cure dyslexia. The evidence for this is far weaker than the marketing would have you believe. What does help, however, is larger text, greater line spacing and shorter lines. What’s more, this helps everyone.

What font size and line spacing do you use?

Keep body text at 16 to 18 pixels on desktop and no smaller than 16 pixels on mobile. Use a line spacing of at least 1.5 times the font size and keep your text column between 50 and 75 characters per line. Structure your headings in clear steps, so that the difference between an H2 and an H3 is visible at a glance.

That line spacing of 1.5 does not come out of thin air. The W3C’s international accessibility guidelines stipulate, under success criterion 1.4.12 Text Spacing, that your site must be able to cope if a visitor adjusts the text spacing to a minimum of:

• 1.5 times the font size for the line height;
• Double the font size for the spacing between paragraphs;
• 0.12 times the font size for the letter spacing;
• 0.16 times the font size for word spacing.

Important detail: you do not have to use these values by default, but your page must not break if someone sets them. Text that then disappears behind a block or overflows from a button is an error.

For line length, the classic rule of thumb is 50 to 75 characters per line, as summarised by the Baymard Institute. Accessibility guidelines set 80 characters as the upper limit. In practice, you can solve this by setting a `max-width` on your text block, for example around 70 characters. Without that limit, your text will run from edge to edge on a wide screen and readers will lose their place. You can read more about the balance between text and white space in our blog post on how much text a website should contain.

One further requirement to note: visitors must be able to zoom in to 200% without any information or functionality disappearing. Therefore, if you set your font sizes in relative units (rem or em) rather than hard pixels, this will work automatically.

This is how you keep your typography fresh

Fonts are one of the biggest unnecessary culprits behind a slow website. Each font weight is a separate file that must be downloaded before your text displays correctly on screen. According to web.dev, fonts directly affect two of the Core Web Vitals: your text appears later (LCP) and your page shifts whilst loading (CLS).

What you’ll be doing:

• Use WOFF2. This is the most compressed format and works in all modern browsers. Older formats such as TTF and OTF are unnecessarily large.
• Set `font-display` correctly. With `swap`, the browser displays your text immediately in a system font and then switches to the specified font. Your visitor sees something straight away, at the cost of a slight jump in the text.
• Reduce that gap using ‘size-adjust’. This makes the emergency font resemble your actual font in terms of dimensions, so that the page appears less disjointed.
• Subset your files. You don’t need Cyrillic or Greek characters for a Dutch website. Leave those characters out and the file size will be significantly reduced.
• Consider using a variable font. This means every weight is contained in a single file rather than four. For CKEditor, this switch resulted in a 71 per cent reduction in file size. If you only use one or two weights, however, a variable font is actually larger: in that case, it’s better to simply use separate files.
• Don’t load more than you use. This is the easiest way to make a profit. Many WordPress themes and page builders load ten assets by default, of which you only use three.

Would you like to know how your site is currently performing? Then our blog on improving your website’s speed is a good place to start.

Can you just use Google Fonts?

Yes, you may use the fonts themselves for business purposes free of charge. Google Fonts are open source, so you may use them on your website, in your logo and in your printed materials. However, the way you load them is something to bear in mind: if you load them directly from Google’s servers, your visitor’s IP address will be sent to Google. And under the GDPR, this is not permitted without consent.

The Munich Regional Court (Landgericht München) ruled on this matter on 20 January 2022. The judge ruled that an IP address constitutes personal data, and that the website in question could have hosted the fonts itself. The website operator was ordered to pay €100 in damages to the visitor. This is a German ruling and not Dutch law, but the GDPR is a European regulation and the reasoning is the same everywhere.

The solution is simple: download the fonts and host them on your own server. This is known as self-hosting. It takes half an hour to set up, your visitors’ IP addresses remain private, and it usually makes your site load slightly faster as it requires one fewer external connection. In WordPress, you can often set this up using a plugin or via your theme settings.

If you choose a paid typeface from a foundry, please pay attention to the licence terms. Web font licences are often restricted to a maximum number of page views or to a single domain. If you exceed these limits, you’ll find yourself in breach of the terms without even realising it.

Typography and accessibility: what’s changing from 2025 onwards

Typography is no longer merely a cosmetic matter; for many companies, it is part of statutory requirements. Under the European Accessibility Act, stricter accessibility requirements have applied since 28 June 2025 to, amongst others, online shops, banks, transport operators and telecoms providers. These requirements are based on the WCAG guidelines, which include typographical criteria.

What this means in practical terms for your copy:

• sufficient contrast between text and background;
• zoom in up to 200% without anything falling over;
• be able to handle the text spacing requirements set out in criterion 1.4.12;
• no information conveyed solely through design;
• Headings that are structured logically (H1, then H2, then H3), as screen readers rely on these for navigation.

That last point immediately translates into SEO benefits, as search engines use the same structure. Building for accessibility and building for discoverability are closer together than people realise. If you’re unsure whether your site meets these criteria, you can read more on our page about digitally accessible websites.

How do you define your typography?

Set out your typographical choices in your brand book or design system: which typefaces, which weights, which sizes for each heading level, which line spacing, and where the files are stored. Without these specifications, the next party commissioned to create something for you will choose their own variations, and your brand identity will fall apart within a year.

A workable typographic scale might look like this, for example: body text at 17 pixels with a line spacing of 1.6, H3 slightly larger and bolder, H2 noticeably larger, H1 the largest. You should be able to see the difference between the levels at a glance. If an H2 is too close to the body text, your hierarchy isn’t working and people will stop scanning your page.

Don’t forget the details that are often overlooked: buttons, form labels, error messages, tables and the small print in your footer. It is precisely there that the font size is often set too small. We include these elements as standard in a site’s UX design, because nobody will fill in a form they cannot read.

You can find out more about what else should be included in such a document in our blog post on what a brand book is and what it contains.