Typography for Websites: Choosing and Setting Type That People Can Read
Most of a website is words. Getting the type right, in size, spacing and loading, is the quiet craft that makes a page feel professional.
Typography for websites sounds like a decorative concern, yet most of what a visitor does on a site is read. If the text is hard to read, they leave, and they rarely know why. Good typography is mostly invisible: it is the absence of strain. The choices that create that comfort are not mysterious, and they apply equally to a plumber's brochure site and a large online shop.
Start with the size
Body text should be comfortable to read on a phone without zooming, which usually means a base size of about 16 pixels or a little more. Use relative units so that people who have enlarged the text in their browser settings are respected, rather than fixed pixel sizes that ignore them. Make sure the page still works at 200 percent zoom. Small grey captions and legal text can drift below readable sizes unnoticed, so check them as well.
Mind the line length
Lines that run across a wide monitor are tiring, because the eye struggles to find the start of the next one. Aim for roughly 45 to 80 characters per line, which on most layouts means limiting the width of text columns. On narrow phones the problem reverses, so avoid very short lines made of one or two words. Give lines generous spacing, commonly around one and a half times the text size for body copy.
Build a clear hierarchy
Visitors scan before they read. Use headings in a consistent scale, so that it is obvious at a glance what is a title, a section heading and a subheading. Do not rely on size alone; weight and spacing help. Keep the number of styles small, and write headings that make sense when read alone. Use real heading elements in the code rather than bold paragraphs, so assistive technology and search engines understand the structure.
Contrast and colour
Text needs sufficient contrast with its background. The accessibility guidelines ask for a ratio of at least 4.5 to 1 for normal text, and light grey on white fails more often than designers expect. Check text over photographs carefully, since the background varies. Avoid pure black on pure white for long passages if it causes glare; a slightly softer pairing is often kinder, provided the ratio remains strong.
Choose fonts with restraint
Two typefaces are usually plenty, one for headings and one for body text, or even a single family in several weights. Pick faces designed for screens, with clear letterforms and a generous x-height. Be sceptical of decorative fonts for anything longer than a headline. Check that the font includes the characters you need, such as the pound sign, accented letters and proper quotation marks.
Load fonts without delaying the page
Custom fonts are files that must be downloaded. Use the WOFF2 format, include only the weights and character sets you use and set the display behaviour so that text appears immediately in a fallback face and swaps when the font arrives. Choose a fallback with similar proportions to limit the jump. Serving fonts from your own domain avoids an extra connection to a third party and gives you control over caching. Variable fonts can replace several files with one.
Test in the real world
Numbers, tables and the awkward bits
Prices, dates and figures deserve special care. Use fonts with clear digits, and consider tabular numerals where columns of numbers must line up. In tables, align numbers to the right, keep row spacing generous and avoid tiny text. Make links recognisable without relying only on colour, typically with an underline, and give visited and focused states a clear appearance. Quotations, lists and captions need their own consistent treatment, otherwise pages built by different editors drift apart.
Write a type specification
Record your choices in one page: the typefaces, the sizes and weights for each level of heading and body text, the line spacing and the maximum width of text. Share it with designers, developers and anyone who edits the site. The same rules then apply on the home page, the blog and the checkout, and the whole site feels like it was made by one hand.
View the site on a cheap phone in bright daylight, on a tablet and on a large monitor. Ask someone with weaker eyesight to read a page and note where they struggle. If you would like a typographic review of your site, or a type system for a new one, we are glad to help.