The serif vs sans serif choice comes down to stroke endings: serif fonts have small finishing strokes on their letters, sans serif fonts do not. That one structural difference shapes tone, legibility and how a typeface behaves on screen or paper.
It is one of the foundational decisions covered in typography basics, and the details below show how to make it for a specific design.
What separates the two groups
Wikipedia defines a serif as a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol, and calls a typeface without them sans-serif. The word comes from the French for “without”. MDN, which documents the CSS generic font families, describes the two keywords the same way: for the serif keyword, glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings, while for sans-serif, glyphs have stroke endings that are plain.
Nielsen Norman Group adds a practical description of the sans-serif side: these typefaces are without feet, which often have thinner letter strokes and larger x-heights. Serif faces, by contrast, use feet at the ends of strokes and often vary the width of those strokes within a letter.
Other names exist too. Wikipedia notes that some sources call sans-serif typefaces grotesque or gothic, and that the gothic term still appears in the names of typefaces such as News Gothic and Franklin Gothic.
Families within each group
Neither group is uniform. Wikipedia explains that serif typefaces can be broadly classified into the subgroups old-style, transitional, Didone and slab serif, in order of first emergence. Old-style designs are influenced by early Italian lettering, Didone or modern designs often have thin, unbracketed serifs and a substantial difference in stroke weight, and slab serifs have very thick serifs that tend to be as thick as the vertical lines themselves.
Sans-serif faces divide too. In its sans-serif article, Wikipedia says that these designs are usually divided into grotesque, neo-grotesque, geometric and humanist groups. The same source reports that sans-serif faces have less stroke width variation than serif faces, which is why they are often chosen when a design should feel simple or modern.
A generic label is therefore only a starting point. A slab serif and an old-style serif share one structural trait and little else, so the subgroup usually matters more than the umbrella term.
Legibility and readability: what the evidence says
A popular rule says that serifs help print and sans serifs help screens. The sources are more nuanced. Wikipedia reports that serifed typefaces are widely used for body text because they are easier to read than sans-serif typefaces in print, and cites studies that found sans-serif faces slightly less legible, though one cited author argues that the difference can be offset by careful setting.
The same article records the opposing view, quoting a typographer who argues that we should accept that most reasonably designed typefaces in mainstream use will be equally legible. It also reports a study suggesting that serif typefaces are more legible on a screen but not generally preferred to sans-serif ones. The evidence is therefore mixed, and craftsmanship of the specific typeface and the setting counts for more than the class.
Display technology is the main reason for the screen advice. Wikipedia says that on lower-resolution digital displays, fine details like serifs may disappear or appear too large, and that sans-serif typefaces have become the most prevalent for display of text on computer screens. Nielsen Norman Group, writing about legibility, notes that with high-resolution monitors serif type is fine, and that strangely shaped fonts, such as those emulating handwriting, have reduced legibility. The class of typeface is rarely the problem; an unusual shape is.
Choosing for the job
Because the evidence does not crown a winner, the sensible approach is to choose by context.
- Long printed text. Wikipedia notes that serif fonts are probably the most used class in printed materials, including most books, newspapers and magazines, so readers are used to them there.
- Interfaces and small screen text. Sans-serif faces remain the usual default, partly for the rendering reasons above and partly because they suit a simple, modern tone.
- Headlines and display use. Either works. Wikipedia observes that in printed media sans-serif faces are more commonly used for display and less for body text.
- Accessibility needs. Wikipedia states that sans-serif fonts are often the type used to improve readability for people with dyslexia. Individual needs vary, so user testing and adjustable text settings are more reliable than any one rule.
- Distinguishing similar characters. Nielsen Norman Group cautions that some sans-serifs, which are minimalistic, have unclear distinctions between characters, so a face used for codes or account numbers should be checked for look-alike letters and digits.
Generic keywords also help on the web. MDN advises that a generic family should be the last item in a font list, giving the browser a fallback of the right class if the first choice cannot load.
Applying the choice in a mockup
In a mockup, type is rendered at the size and on the surface where it will actually appear, which makes the serif or sans-serif decision easier to judge. A heading that looks elegant in a specimen can look fragile on a small phone preview, and a body face that works on paper can feel heavy inside a narrow interface column.
It helps to test the same text in both classes at the real size. Put a paragraph, a button label and a headline into the layout, switch the typeface, and compare how each reads on the target device or printed piece. Pay attention to numerals, to look-alike characters and to how the lines hold together at the smallest size used.
It also helps to keep the decision consistent across screens. A style guide or design system that records which class is used for which role prevents drift, so a presentation deck, an app mockup and a printed handout feel like parts of the same project.
Combining both groups
The two groups are often used together, because the contrast between them is easy for readers to notice. A serif heading with a sans-serif body, or the reverse, is a familiar combination. How to make such a pairing work, including how to assign each typeface a role, is covered in the guide to font pairing.
Whichever class is used, the right to use a particular typeface is a separate question from how it looks. Desktop, web and app uses can be licensed differently, which is explained in the guide to font licensing.
Frequently asked questions
Is serif or sans serif easier to read?
Neither wins in every case. Sources describe serifs as common in printed body text and sans serifs as common on screens, but they also report that carefully set text in either class is similarly legible. The design of the specific typeface matters more than its class.
Why do most websites use sans serif fonts?
Wikipedia reports that sans-serif typefaces have become the most prevalent for display of text on computer screens, partly because fine details like serifs can break up on lower-resolution displays. High-resolution screens have reduced that concern.
What does sans mean in sans serif?
The term comes from the French word for “without”, so a sans-serif letterform is one without serifs at the ends of its strokes.
Can serif and sans serif fonts be used together?
Yes. Pairing a serif with a sans serif is a common way to create visible contrast, as long as each typeface has a clear role such as headings or body text.
