Serif
A serif is the small projecting stroke at the ends of letters in some typefaces. Serif typefaces (like Garamond, Times, or Playfair Display) are traditionally used for long-form reading and editorial contexts. Sans-serif typefaces lack these strokes.
Example
In Practice
Serif typefaces carry small projecting strokes at the ends of letterforms. They range from the delicate hairline serifs of classical book faces to the bold slabs of industrial slab-serifs. Screen-optimized serifs like Source Serif 4 and Merriweather are designed for on-screen legibility and are suitable for body text at 16 px and above. High-contrast display serifs like Playfair Display work best at 24 px and above where their stroke drama is visible. Browse curated serif fonts in the serif fonts catalog.
Common Mistakes
Using a display serif for body text. High-contrast serif faces like Bodoni and Didot are drawn for display use. At body sizes, their hairline strokes disappear on low-resolution screens. Reserve high-contrast serifs for headings above 24 px.
Pairing two serifs without enough contrast. A slab-serif heading with a traditional serif body reads as two different styles rather than a hierarchy. When pairing two serifs, ensure the category distinction (slab vs. traditional) or weight contrast is large enough to be obvious.
Picking a serif for your project
Serif letters carry the small projecting strokes that give them a bookish, established voice, but not all serifs are alike. Old-style faces have low contrast and angled serifs, which makes them comfortable for long reading; transitional and modern faces add more stroke contrast and feel more theatrical. The right choice depends on the size: a screen-optimized serif like Source Serif 4 stays steady at 16px, while a high-contrast display serif like Playfair Display is built to be seen at 24px and above.
On screens, the safest path is a serif designed for the web. That means checking the family ships real italics and the weights you need, and that the x-height holds up on a normal display. For headlines over a sans body, pair a display serif with a neutral sans and keep the serif to two or three words. The serif catalog groups the open-source options so you can compare them side by side before committing.