Serif vs. Sans Serif Fonts: What’s the Difference?

Serif and sans serif are the two most common categories of typefaces. A serif font finishes each letter’s main strokes with small extra strokes, the serifs. A sans serif font leaves those ends plain. That one detail sets the tone: serif reads as traditional and editorial, sans serif as clean and contemporary.

Serifs date back to Roman stone inscriptions. The most widely accepted explanation, from Edward Catich’s 1968 book The Origin of the Serif, is that letters were first painted onto the stone with a brush, and the carvers followed the flared brush marks at the ends of strokes. An older, less accepted theory says serifs were added to neaten stroke ends as they were chiseled. Either way, the style carries print’s history with it, which is why serif fonts still read as professional and credible. Newspapers never left: The New York Times sets its headlines in a custom serif, NYT Cheltenham.

Serif vs. sans serif fonts

• Serif: small finishing strokes at the ends of letter stems. Examples: Times New Roman, Georgia, and Garamond. Traditional, editorial feel; the long-standing choice for print and long-form reading.
• Sans serif: no finishing strokes, so letters end clean and uniform. Examples: Arial, Helvetica, and Open Sans. Modern, minimal feel; the usual convention for on-screen body and interface text.

Times New Roman and Arial are what designers call web-safe fonts: they come preinstalled with most popular operating systems, so browsers can usually display them without downloading anything. Availability still varies by platform, though, and a browser that can’t find a font substitutes another one, which is why a CSS font stack always ends in a generic fallback (more on that below). Open Sans is different: it’s an open source font, designed by Steve Matteson under commission from Google and released in 2011, that your site loads for visitors instead of relying on what their device ships with.

When to use each style

Pick by tone, then test. Serif reads as traditional, editorial, and print-like, which makes it a natural fit for headings, logos, and long-form reading. Sans serif reads as clean and contemporary, and it’s the usual convention for body and interface text on screens. That’s a convention, though, not a law of legibility: how well text reads depends on the specific typeface, its size, spacing, and contrast against the background, not on which category it sits in. Georgia, for example, is a serif that Matthew Carter designed for Microsoft in 1993 to stay legible when printed small or displayed on low-resolution screens.

Don’t pick either style expecting a readability boost. The controlled study on this question, Arditi and Cho’s “Serifs and font legibility” (Vision Research, 2005), found no effect of serifs on reading speed and no legibility difference between typefaces that differ only in serifs. At very small sizes, the serifed versions were marginally more legible, mostly because serifs add a little space between letters. Pick one font per role, then test it at body-text size on a phone before you commit.

Setting serif and sans serif fonts in CSS

In CSS, serif and sans-serif (hyphenated) are generic font family keywords. They go last in a font-family stack as the final fallback:

font-family: Georgia, 'Times New Roman', serif;

The browser tries Georgia first, then Times New Roman. If neither is available, it substitutes whatever serif face the device has, so your text stays in the right category even when a font fails to load. Swap the last keyword for sans-serif and the fallback becomes a sans serif face instead.

Other font categories

The serif and sans serif split isn’t the whole taxonomy. Typography also sorts fonts into several other groups:

• Slab serif: a serif subgroup with heavy, squared-off serifs.
• Monospace: every character takes up the same width, which is why code editors use it.
• Script: mimics handwriting, from formal calligraphy to casual pen styles.
• Display: decorative designs built for big headlines, not body text.

Choosing fonts for a site right now? Start with our list of web safe fonts to see which ones work without loading font files, then browse the best Google Fonts for 20 modern picks and advice on pairing them.