A serif is the small foot or flick at the end of the main strokes of a letter, like the little horizontal bars at the top and bottom of a capital I in Times New Roman. A serif font, or serif typeface, is one designed with these strokes. Fonts without them are called sans serif, from the French word for "without".
Where serifs come from and how they are grouped
Serifs trace back to Roman inscriptions carved in stone, and they carried into printed type. Type designers sort serif faces into broad styles:
- Old style. Gentle contrast between thick and thin strokes, angled serifs. Garamond is the classic example.
- Transitional. Sharper contrast and more upright shapes, such as Baskerville and Times New Roman.
- Didone or modern. Extreme contrast and hairline serifs, like Didot and Bodoni, common on fashion magazine covers.
- Slab serif. Thick, block-like serifs, such as Rockwell or Roboto Slab, which feel sturdy and casual.
On the web, Georgia was designed specifically to read well on screens, and free options like Merriweather, Lora and Playfair Display are widely used through Google Fonts.
Example: a law firm and a bakery
A family law practice sets its headings in a transitional serif to signal tradition and seriousness, then uses a plain sans serif for paragraphs and forms. A bakery picks a friendly slab serif for its name and menu headings. Both use serifs, but the style within the family does the real work of setting tone.
Are serif fonts harder to read on screens?
That advice dates from low-resolution monitors, where thin serifs broke up into blurry pixels. On modern high-density phone and laptop screens, a well-made serif at a sensible size reads fine as body text, and many news sites use one. Size, spacing and contrast matter far more than the presence of serifs. Hairline Didone faces are the exception: keep them for large headings.
Serif mistakes on small-business sites
- Using a display serif for paragraphs. High-contrast faces built for posters fall apart at 16 pixels.
- Pairing two similar serifs. Two faces that are nearly alike look like an error. Contrast a serif with a sans instead.
- Relying on Times New Roman by default. It can make a site look unstyled, because it is what browsers show when no font is set.
- Forgetting a fallback. Your CSS should end the font list with the generic
serifkeyword.
Related terms
- Sans serif: the stroke-free counterpart, often paired with serifs.
- Typography: the wider craft of setting type.
- Google Fonts: a free source of serif faces for the web.
- Brand guidelines: where a brand's chosen typefaces get written down.