Serif vs sans serif for websites: what the research supports and what it doesn't
On today's screens there's no reliable readability winner between serif and sans serif for websites. The old advice to avoid serifs online came from coarse, low-resolution displays. What decides legibility now is the individual typeface, its size, spacing and x-height, so the real choice is about tone and what the brand needs to say.
Where the screen rule came from
Serifs are the small strokes at the ends of letters, inherited from inscriptions and centuries of printed books. Print set long text in serif faces for a very long time, and the habit of reading books in them is real. Early computer screens, though, had so few pixels per letter that thin serifs and fine contrast between thick and thin strokes broke up into jagged fragments. Faces drawn for the screen, such as Verdana and Georgia, were designed around that grid, and the advice that sans serif reads better online took hold.
Displays changed. Phones and most laptops now have enough pixel density that a well-made serif renders cleanly at body size. Studies comparing the two categories have generally found small or inconsistent differences in reading speed and comprehension, and the differences between individual typefaces in the same category are often larger than the difference between categories.
What actually affects readability
- x-height
- The height of lowercase letters relative to capitals. A generous x-height looks larger at the same font size and holds up better on small screens, whatever the serifs are doing.
- Stroke contrast
- Faces with hairline thin strokes (Didone styles such as Bodoni) are beautiful at headline sizes and fragile at 16px. Low-contrast serifs and most sans faces survive small sizes.
- Letter spacing and apertures
- Open shapes in letters like c, e and a, and clear differences between I, l and 1, matter more for quick recognition than serifs do.
- Size and line length
- Body text of at least 16px with lines of roughly 60 to 75 characters makes more difference than the category. See website body font size.
- Rendering
- Very light weights of either category can thin out on some screens, especially on dark backgrounds.
The tone each one sets
| Serif | Sans serif | |
|---|---|---|
| Associations | Books, newspapers, institutions, heritage | Interfaces, signage, modern brands, tools |
| Good at | Long reading, literary or editorial voice, a sense of craft | Interfaces, dense information, small labels, neutral voice |
| Risk | Can feel formal or old-fashioned if the face is a default like Times | Can feel anonymous when it's the same face every other site uses |
| Typical sites | Publishers, law firms, universities, restaurants, wine | Software, clinics, shops, studios, public services |
These are tendencies, not laws. A grotesque sans at a heavy weight can feel as authoritative as any serif, and a soft, rounded serif can feel friendly. Pick the face for what it says to this audience, then test it at body size on a phone.
Mixing the two
The classic pairing is a serif for headlines and a sans for body or interface text, or the reverse. It works when the two faces share proportions, such as a similar x-height, and when each has one clear job. It fails when the pairing is chosen for variety alone: three families, or a serif and a sans that fight over the same headline. If one family with several weights can create the hierarchy, that's simpler and loads faster. Font pairing for websites covers pairing in detail.
Accessibility notes
- Dyslexia. Many organisations that support dyslexic readers suggest plain sans-serif faces with clear letter shapes, generous spacing and no italics for long passages. Evidence that any single font helps is limited; spacing and line length matter more.
- Low vision. People who zoom to 200% or use their own font settings need the layout to survive the change. WCAG 2.2's text spacing criterion asks that content still works when line height, paragraph spacing and letter and word spacing are increased.
- Contrast. Thin serifs on a pale background lose contrast faster than solid strokes. Check muted text especially.
Serif type in Anticode
All seven of Anticode's design systems are sans serif: Editorial (Geist), Technical (IBM Plex Sans), Luxury (Jost), Playful (Fredoka), Brutalist (Archivo), Organic (Figtree) and Swiss (Inter Tight). That's deliberate. A serif display face falling back to a default serif is one of the patterns that makes generated sites look alike, and the design gate blocks publishing pages with serif fallbacks. The Editorial and Luxury systems show how far a sans face can carry a bookish or refined tone through size, weight and spacing instead.
Questions people ask
Is serif harder to read on screen?
Not on modern displays, as a category. A serif with low stroke contrast and a decent x-height reads as comfortably as a sans at body size. Very fine, high-contrast serifs are best kept for large headlines.
Why do most websites use sans serif?
Partly habit from the low-resolution era, and partly because interfaces, buttons and small labels look natural in sans faces. Many software and system fonts are sans, so the web inherited them.
Do serif fonts look more trustworthy?
They often signal tradition and seriousness, which some audiences read as trust. But a poorly chosen serif can look dated, and a confident sans can look just as credible.