Choosing fonts for your website: readability, personality and page speed

A good website font is readable first, fitting for your brand second and light on page speed third. Typefaces carry personality, since serif letters often read as traditional and rounded sans-serif letters as friendly, but those impressions are softer than they sound and readability always wins. Two fonts, a body size of at least 16 pixels and a small number of font files cover most business sites.

Key takeaways

• Readability beats personality: pick a clean body font and put the character into headings.
• Use at most two font families, and few weights, for a calmer look and a faster page.
• Body text should be at least 16 pixels with generous line spacing.
• Fonts are files that every visitor downloads, so they affect speed and layout stability.
• The same fonts should appear in your website, documents and presentations.

What fonts communicate

Serif typefaces, with small strokes at the ends of letters, tend to feel established and editorial. Sans-serif typefaces feel modern and direct. Rounded shapes feel friendly, and condensed bold letters feel loud. Law firms and consultancies often lean toward serif headings, while software and design studios often choose geometric sans-serif.

These are tendencies, and a skilled designer can break them on purpose. Treat personality as a reason to choose between two readable fonts, and not as a reason to accept a hard-to-read one.

Readability decides

Visitors scan before they read, and every small obstacle costs attention. For body text, choose a font with clear letterforms, open spacing and distinct characters, so that an uppercase I and a lowercase l do not look alike. Set the size to at least 16 pixels, use a line height of about 1.5 and keep lines to a comfortable length, roughly 50 to 75 characters.

Contrast matters here too. Our article on the psychology of color covers the 4.5 to 1 ratio for normal text. Also keep text left-aligned, because justified text creates uneven gaps that make reading harder.

Pairing: keep it to two

A common approach is one font for headings and one for body text, chosen to contrast. A serif heading with a sans-serif body is a classic combination, as is the reverse. Use one family with several weights if you want the safest option. More than two families makes a site look unplanned and adds download weight.

Use size, weight and spacing to create hierarchy, and not extra fonts.

Fonts and page speed

Every font file a visitor downloads costs time. Each weight and style is a separate file, so a family loaded in six weights is six downloads. Load only the weights you use, prefer modern formats such as WOFF2, and host the files on your own domain where licensing allows, which avoids an extra connection to a third party.

Font loading also affects layout stability. If a fallback font is replaced by the real one after the page appears, text can jump, which counts against Cumulative Layout Shift. Google's threshold for a good score is 0.1 or lower. Setting the font to show a fallback quickly and choosing a fallback with similar proportions reduces the jump. Our website speed guide explains these metrics.

Licensing and consistency

Check the license before you use a font. Many fonts are free for web use under an open license, while others require a paid license that covers websites. Keep the license details with your brand files.

Then use the same fonts in your website, documents, proposals and slides. If a program lacks your font, name a similar fallback in your brand guide. Our article on brand systems explains why this consistency builds recognition.

A simple recipe

Pick one readable body font and one heading font, or one family for both. Set body text to 16 pixels or more at line height 1.5, load only the weights you need and test the result on a phone. If you would like a second opinion, our free website audit checks speed and layout, and a free 30-minute discovery call is the place to talk about a brand refresh. See our services for how we build brand and web together.