What is the difference between serif and sans-serif fonts?

The difference between serif and sans-serif fonts is whether the letters have serifs: small strokes or feet that finish the ends of the main strokes. Serif typefaces such as Georgia, Garamond and Merriweather have them; sans-serif typefaces such as Helvetica, Arial and Inter don't ("sans" is French for "without"). Serif faces usually have more variation between thick and thin strokes and feel more traditional or literary, while sans-serifs tend to have more even strokes and feel cleaner and more neutral. On modern high-resolution screens both work well for body text, so the choice is mostly about tone, the specific typeface and how it's set, rather than one category being inherently more readable.

The serif versus sans-serif question is one of the first decisions in any typographic project, and it's surrounded by rules of thumb that are partly outdated. In this article you'll learn how the two categories differ in structure, the main subtypes of each, what the evidence on readability actually says, when each one tends to suit a project, how to set them in CSS with sensible fallbacks, and how to combine them.

What a Serif Is

A serif is the small stroke attached to the end of a letter's main stroke. Look at a capital T in Times New Roman: the vertical stem ends in a small horizontal foot, and the crossbar ends in small vertical strokes. Those are serifs.

Serifs vary a lot between typefaces:

• Bracketed serifs curve smoothly into the stem, common in older designs such as Garamond and Caslon.
• Hairline serifs are thin and unbracketed, typical of high-contrast Didone faces such as Bodoni and Didot.
• Slab serifs are thick and often rectangular, as in Rockwell, Roboto Slab and Courier.
• Wedge serifs are triangular, giving a sharper, more chiselled feel.

Sans-serif letters end with terminals instead: stroke endings without any projecting detail. The terminals can be cut horizontally, vertically or at an angle, which affects the feel of the face as much as serifs do in a serif design.

How the Two Categories Differ

Beyond the serifs themselves, the categories tend to differ in a few structural ways. These are tendencies, not absolute rules, and there are plenty of exceptions.

Feature	Serif typefaces	Sans-serif typefaces
Stroke endings	Finished with serifs	Plain terminals
Stroke contrast	Often moderate to high	Often low and even
Stress	Often diagonal or vertical	Usually vertical or none
Typical tone	Traditional, literary, authoritative	Modern, neutral, functional
Common uses	Long-form reading, editorial, headings with character	Interfaces, navigation, labels, body text on screens
Web-safe examples	Georgia, Times New Roman	Arial, Verdana, Tahoma

Main Sans-Serif Subtypes

Sans-serifs are usually grouped into four broad styles:

• Grotesque: Early sans-serifs from the 19th century, often with some quirks and slight contrast. Examples include Akzidenz-Grotesk and Franklin Gothic.
• Neo-grotesque: More uniform and neutral, such as Helvetica, Arial and Roboto.
• Humanist: Based on the proportions of handwriting and classical letters, with more open apertures. Examples include Gill Sans, Frutiger, Fira Sans and Source Sans 3.
• Geometric: Built from circles and straight lines, such as Futura, Avenir and Poppins.

Main Serif Subtypes

Serifs have their own families:

• Old-style: Low to moderate contrast with diagonal stress, such as Garamond and Bembo.
• Transitional: Sharper, more vertical stress, such as Baskerville and Times New Roman.
• Didone (modern): Extreme contrast and hairline serifs, such as Bodoni and Didot.
• Slab serif: Heavy, block-like serifs and low contrast.
• Contemporary screen serifs: Designed for digital use, with large x-heights and sturdy serifs, such as Georgia, Merriweather and Source Serif 4.

Is One More Readable Than the Other?

You'll often hear two opposing claims: that serifs are easier to read because they guide the eye along the line, and that sans-serifs are better on screens because serifs blur at low resolution. Neither holds up as a general rule.

Research comparing serif and sans-serif text over many decades has generally found small or inconsistent differences in reading speed and comprehension once size, spacing and the specific typefaces are controlled. Factors such as x-height, letter spacing, line length, line height and familiarity tend to matter far more than the presence of serifs.

The "sans-serif for screens" advice made more sense when most displays were low resolution and text was rendered at small pixel sizes. Fine serifs and hairlines simply couldn't be drawn accurately with a handful of pixels. Georgia and Verdana, both released by Microsoft in the 1990s, were designed specifically to hold up under those conditions. On today's high-density phone and laptop screens, well-designed serifs render cleanly, and many major publications use serif body text on the web.

The practical takeaway:

• Choose a typeface designed for the size and medium you need, whatever its category.
• Avoid high-contrast serifs for small text, because hairlines can become faint.
• Avoid tight, closed sans-serifs for small text, because similar letters can blur together.
• Set any typeface with good size, spacing and line length, which matters more than the category.

When to Use Serif Fonts

Serif typefaces tend to work well when:

• The content is long-form reading: Articles, essays, books and reports often feel natural in a serif, and many readers associate it with considered, edited writing.
• You want warmth or authority: Publishers, law firms, universities and heritage brands often use serifs to signal tradition and seriousness.
• You need contrast with a sans-serif interface: A serif for article text and a sans-serif for navigation and UI is a common, effective pairing.
• Headlines need personality: Display serifs bring elegance or drama to large text.

When to Use Sans-Serif Fonts

Sans-serif typefaces tend to suit:

• Interfaces and applications: Buttons, menus, form labels and dashboards benefit from the clean, compact shapes of a good sans.
• Small text: Captions, metadata and legal text at small sizes are often easier to set in a sturdy humanist sans.
• A modern or neutral tone: Technology companies, startups and minimalist brands often use sans-serifs to feel contemporary.
• Signage-like clarity: Wayfinding, labels and short bursts of text.

Most operating systems use a sans-serif for their own interface: San Francisco on Apple devices, Segoe UI on Windows and Roboto on Android. Using a system font stack for UI text matches what users already see every day.

Setting Serif and Sans-Serif Fonts in CSS

CSS has generic family keywords for both categories: serif and sans-serif. Always end a font stack with one of them so the browser has a sensible last resort.

A Serif Body Stack

:root {
  --font-serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text",
    Cambria, Georgia, serif;
}

article {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.65;
}

Charter, Sitka Text, Cambria and Georgia are commonly available on macOS or Windows, so readers get a well-designed serif even before, or without, the web font.

A Sans-Serif Interface Stack

:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

nav,
button,
input,
select,
textarea,
.ui {
  font-family: var(--font-sans);
}

Form controls don't inherit font styles by default in most browsers, so it's worth listing them explicitly or adding font: inherit to them.

Newer Generic Families

CSS also defines generic keywords that map to the operating system's own fonts. system-ui is widely supported. ui-serif, ui-sans-serif, ui-monospace and ui-rounded are supported in Safari, but not in Chrome or Firefox at the time of writing, so treat them as optional extras early in a stack rather than relying on them:

.reading-mode {
  font-family: ui-serif, "New York", Georgia, serif;
}

On Apple devices, ui-serif resolves to New York. Elsewhere, the browser skips it and uses Georgia or the generic serif.

Pairing Serif and Sans-Serif

A serif and a sans-serif together is one of the most dependable pairings, because the contrast between them makes roles obvious. A few principles help:

1. Give each a clear job: For example, serif for headings and sans for body, or the reverse. Don't swap them around unpredictably.
2. Match proportions: Pairs with similar x-heights and widths sit together comfortably.
3. Match mood: A geometric sans with a Didone serif can feel stylish; a humanist sans with an old-style serif can feel warm and bookish.
4. Consider a superfamily: Families such as Source Serif and Source Sans, or IBM Plex Serif and IBM Plex Sans, are designed to work together.

Here's a compact example using IBM Plex, which is available under the SIL Open Font License:

:root {
  --font-heading: "IBM Plex Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

<article>
  <h2>Choosing a reading lamp</h2>
  <p>A warm, diffused light reduces glare on glossy pages.</p>
</article>

Checking Which Category Suits Your Content

If you're undecided, test both with your own content rather than relying on rules.

1. Pick one strong candidate from each category, ideally with similar x-heights.
2. Set a real article in each at the same CSS size, line height and line length.
3. Read both on a phone and a laptop, in bright and dim conditions.
4. Check small text: captions, form hints and footnotes at your smallest size.
5. Ask what tone each sets, and which matches the brand.

The winner is often obvious once you see your own words in both.

---

FAQ: Serif vs Sans-Serif

---

Conclusion

Serif typefaces finish their strokes with small projecting details, while sans-serif typefaces don't. Beyond that, serifs tend towards more stroke contrast and a traditional feel, and sans-serifs towards even strokes and a neutral, modern feel, with many subtypes in each group. The old idea that one category is inherently more readable on screens no longer holds on modern displays.

Choose based on tone, the specific typeface's design and the sizes you need, then set it well. Use full font stacks with a generic fallback, test both options with your real content, and consider pairing a serif with a sans-serif when you want clear contrast between headings and body text.