Which typeface should you choose for your website?

The typeface sets the tone of your site before anyone has read a sentence: a law firm and a pizza truck aren’t written the same way. Yet its first job is to be read, quickly, on a phone, in full sun, by eyes of every age.

Here is how to choose it, set it and load it without weighing the page down.

Readable first

A text typeface is judged on a whole paragraph, and on a phone. A few tries are enough to sort them:

• Letters that get confused. Type “Il1”, “rn m” and “0O”. If the capital I, the lowercase l and the number 1 look alike, a phone number or an access code becomes a trap.
• Tall enough lowercase letters. At equal size, a typeface with large lowercase letters (this is called x-height) reads better small.
• Open shapes. A c, an e or an a whose opening doesn’t close up stays sharp at small sizes and on a less precise screen.
• The numbers. Your prices, your opening hours and your phone number go through them: they must be as clear as the letters.

Keep handwritten, decorative or very narrow typefaces for headings, in large sizes.

Size and line height

Browsers display text at 16 pixels by default, most often (MDN): keep that size as a floor for body text. Express sizes in relative units (rem or em): MDN points out that sizes in pixels prevent text from being enlarged in some browsers. And WCAG criterion 1.4.4 requires that it can be enlarged up to 200% without losing anything.

Three settings then make the difference:

1. Line height. Around 1.5 times the text size for a paragraph, a little less for a large heading. The W3C takes 1.5 as the benchmark for blocks of text (criterion 1.4.8), and web.dev advises a unitless value, which follows the text size.
2. Line length. 50 to 75 characters per line, spaces included, recommends the Baymard Institute (2022), which saw visitors give up reading lines that were too long. The W3C sets 80 characters at most at its most demanding level.
3. Alignment. Align left. Justified text creates irregular gaps between words, which hinder people with reading difficulties (W3C, criterion 1.4.8).

For headings, plan a size that follows the screen width, between a minimum and a maximum (web.dev).

One or two families, rarely more

A family groups a typeface and its variants: weights (light, regular, bold) and italics. An independent business’s site rarely calls for more than two:

• a single family, playing on size and weight: the safest choice, and the lightest;
• two families: a typeface with character for headings, a sober text typeface for the rest. A restaurant can treat itself to an elegant serif heading, and a very readable sans-serif text.

Every extra typeface adds files to download, and the page loses its unity. Also limit the weights: each one is often a separate file. A variable font holds them all in a single file, heavier than one weight but lighter than several (web.dev).

For body text, the typefaces already installed on the device cost nothing to load: web.dev recommends them when possible.

The license: free doesn’t mean without rules

A font file is software, protected by copyright, and its license says what you may do with it. Before putting it on your site, check three points:

• Is web use allowed? A typeface bought for print isn’t necessarily licensed for a website.
• Can you host it yourself? Some licenses restrict this.
• Can you modify it? Slimming a file by removing unneeded characters is a modification: web.dev advises checking the license first.

Most Google Fonts typefaces are published under the SIL Open Font License, a few under Apache 2.0 or the Ubuntu license. The OFL allows use on a website, modification and redistribution; Google still invites you to read the license of each typeface you use.

Then there is privacy. Loading a typeface from Google’s servers passes the visitor’s IP address to them. In 2022, a Munich court ruled that doing so without consent breached the GDPR, since the typeface could be used without contacting those servers. This German ruling remains isolated; hosting the files with your site settles the question in advance.

Loading: text right away

A web font is a file the browser downloads before it can display it, and nearly nine pages in ten use at least one (Web Almanac 2025). During the wait, the text is either invisible, or shown in a fallback typeface, then replaced. The CSS font-display property chooses between the two (web.dev):

The swap sometimes makes text jump: lines change length, and everything that follows shifts, a flaw Google measures. To limit it, web.dev advises a fallback typeface with similar proportions, adjustable with size-adjust, or the optional value.

On the file side:

• Serve WOFF2, the most compact format: about 30% lighter than WOFF (web.dev).
• Keep the useful characters. A Latin typeface often has 100 to 1,000 glyphs; a subset limited to your language lightens the file, if the license allows.
• Preload the text typeface, just one, so the browser requests it early.

Spacing must be able to change

Some people, with low vision or dyslexia, widen the space between lines, words and letters with an extension or a style sheet of their own. WCAG criterion 1.4.12 (level AA) requires that your page support it without loss of content, up to:

• a line height of 1.5 times the text size;
• a space of 2 times the text size after each paragraph;
• letter spacing of 0.12 times the text size;
• word spacing of 0.16 times the text size.

These values are a minimum the page must tolerate; your own settings remain free. In France, the RGAA, the administration’s accessibility standard, takes up the same thresholds in its criterion 10.12.

The common trap is a fixed-height button or box, whose text overflows or gets cut off when spacing grows. The W3C suggests dimensions in em, which grow with the text.

In short: a sober text typeface, a heading typeface at most, 16 pixels for the body, a line height around 1.5, lines of 50 to 75 characters. Read the license, serve WOFF2 from your own site, and set font-display to show the text right away.