Serif
A serif typeface is a typeface whose letterforms have projecting finishing strokes at the ends of their main strokes.
Design for Developers
A typeface style whose letterforms include small finishing strokes at the ends of their main strokes.
- How it is used
- Guides typeface selection and pairing to communicate a page’s tone and create visual hierarchy.
- How deep it goes
- Defines serif letterforms, contrasts their tone with sans serif, and gives practical body-copy and pairing guidance without technical font implementation.
- Examples
- Uses a tech-startup redesign, EB Garamond’s classic formal mood, and Roboto Slab paired with Roboto.
- What you can do after
- Evaluate/understand whether a serif choice supports a desired mood, readable body copy, and clear heading hierarchy.
Everyday Data Visualization
A typeface whose letterforms have serifs.
- How it is used
- Uses serif styling to create contrast in typography and to shape a design’s perceived tone.
- How deep it goes
- Defines serifs, compares them visually with sans serif, and explains practical title mixing without resolving readability claims.
- Examples
- Compares Roboto Serif with Roboto and contrasts Garamond, Goudy Old Style, and Times New Roman with sans serif samples.
- What you can do after
- Apply it via type selection to give titles contrast and choose letterforms that support an intended tone.
WordPress Power Toolkit: Harness AI to build next-level websites
A serif typeface, or serif font, is a typeface whose characters have projecting finishing strokes at the ends of their main strokes.
- How it is used
- Supports visual choices when a website needs to convey formality, reliability, trustworthiness, or conservatism.
- How deep it goes
- Defines the visual feature, compares representative typefaces, and discusses website uses without detailing font-rendering internals.
- Examples
- Uses Times New Roman, Bodoni, Garamond, and Cambria as serif examples, alongside Verdana for contrast.
- What you can do after
- Evaluate serif and sans serif choices against a website’s desired impression and reading context.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains serif →
Related concepts
- sans serif typefacecontrasts with · A sans-serif typeface is a typeface whose letterforms lack projecting finishing strokes called serifs.
- fontkind of · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- font familykind of · A font family is a named collection of related fonts or typefaces sharing a visual design while differing in styles, weights, or other attributes.
- slab serifincludes · A slab serif is a serif typeface classification characterized by substantial, block-like serifs.
- generic fontkind of · A generic font family is a CSS keyword representing a broad category of typefaces that browsers can select as a fallback.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.