Type and text

Serif vs sans serif: how to choose the right typeface

The old rule said serifs for print and sans serifs for screens. Screens changed, the rule didn't. Here is what actually matters when you choose.

GradientlyVerified Gradiently account··5 min read
Cover: Eucalyptus Fanfare · GR·1BHG·XT

The short version

  • Serif typefaces have small finishing strokes at the ends of letters, while sans serif typefaces do not.
  • Neither style is reliably more readable than the other; the design of the specific typeface, its size, spacing and proportions matter more.
  • The rule of serifs for print and sans serifs for screens came from low-resolution displays, and modern high-density screens render both well.
  • Serifs tend to read as traditional, literary or refined, and sans serifs as modern, direct or neutral, but these associations depend on the specific typeface.
  • Many strong designs use both: a serif for headlines and a sans serif for body text, or the reverse.
On this page

Serif vs sans serif is a choice of voice more than of readability. Serif typefaces have small finishing strokes, called serifs, at the ends of their letters; sans serif typefaces (sans is French for without) don't. Neither is reliably easier to read. Choose by what the type needs to say, where it will be read and at what size, and remember you can use both.

What the difference actually is

Look at the ends of the strokes in a capital T or a lowercase i. In a serif typeface, each stroke finishes with a small foot or bracket. In a sans serif, it simply stops. Serif faces also often have more contrast between thick and thin strokes, while many sans serifs have strokes of nearly even thickness. Each side is a family of styles, not one look.

CategoryTraitsGoogle Fonts exampleTends to feel
Old-style serifSoft, angled stress, modest contrastEB GaramondLiterary, warm
Transitional serifMore upright, crisperLibre BaskervilleClassic, trustworthy
Didone serifVery high contrast, hairline serifsPlayfair DisplayFashion, luxury
Slab serifHeavy, block-like serifsRoboto SlabSturdy, confident
Grotesque sansSome quirks, slight contrastWork SansHonest, a little retro
Neo-grotesque sansEven, neutral, closed shapesInterModern, plain, product-like
Geometric sansBuilt on circles and linesJostClean, design-led
Humanist sansBased on handwriting, open shapesSource Sans 3Friendly, readable
The main families on each side, with a free example of each. Knowing the category helps more than knowing serif or sans alone.

A very short history

Serif letters go back to Roman capitals and centuries of printing, which is why serifs still carry a sense of tradition and books. Sans serif typefaces for printing appeared in the early nineteenth century and were first used mainly for posters and display. In the twentieth century, modernist and Swiss designers made sans serifs the voice of clarity and neutrality. On early computer screens, with few pixels per letter, fine serifs broke up, so sans serifs became the default for interfaces, and faces like Verdana and Georgia were drawn specifically to work on those screens.

Readability: the myth and what matters instead

You will still read that serifs are easier to read in print because they guide the eye along the line, and that sans serifs are easier on screens. Neither holds as a general rule. The screen advice was about low resolution; today's high-density phone and laptop screens render serifs cleanly. What actually makes text readable is the design of the particular typeface and how it's set.

Matters less than you think

  • Whether the face has serifs
  • The rule of serif for print, sans for screen
  • Which style is fashionable this year

Matters more

  • A generous x-height and open letter shapes
  • Size, line height and line length
  • Sturdy strokes at small sizes, no hairlines
  • Clear differences between similar letters, like I, l and 1

Size and spacing are the biggest levers, and they apply to both styles equally. Typography basics gives sensible defaults for each.

What serifs and sans serifs tend to signal

Type carries associations, learned from where we have seen it before. They are tendencies, not rules, and a specific typeface can push against its category: a playful serif or a formal sans is entirely possible.

Serif tends to say

  • Tradition, heritage, craft
  • Editorial, literary, considered
  • Refinement, especially with high contrast
  • Warmth, with softer old-style shapes

Sans serif tends to say

  • Modern, direct, efficient
  • Neutral, product-like, technical
  • Friendly, with rounded or humanist shapes
  • Bold and loud, in heavy weights

Serif or sans serif for screens, print and social

WhereGood defaultWhy
Interface labels and buttonsSans serifSmall sizes, sturdy shapes, quick scanning
Long reading on screenEitherPick a face designed for text, at a generous size
Printed books and long documentsEither, often serifConvention, and many excellent text serifs
Social post headlinesEither, with weightLarge sizes let serifs show their character
Small text on busy backgroundsSans serifEven strokes survive changing contrast
Luxury and editorial brandsOften serifHigh-contrast serifs signal refinement
Defaults, not rules. The typeface's own design matters more than its category.

On phones, the thin parts of high-contrast serifs can disappear at small sizes. Fonts for social media covers what holds up.

How to choose for your brand

  1. 1

    Name the voice

    Write three words for how your brand should sound, such as calm, precise, warm. Brand personality helps.

  2. 2

    Shortlist by category, not style

    Warm and literary points to old-style serifs or humanist sans; precise and modern to neo-grotesques or transitional serifs.

  3. 3

    Test your real words

    Set your name, a headline and a paragraph in three candidates, at real sizes.

  4. 4

    Check the practical side

    Weights, italics, the languages you need and the licence.

  5. 5

    Consider using both

    A serif for headlines and a sans for body, or the reverse, gives you range. Font pairing shows how.

On the web, you can also rely on the fonts already on people's devices. These stacks give you a good serif or sans serif with no download:

css
.serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.sans {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
System font stacks for serif and sans serif. Each browser uses the first font it has, ending with the generic family.

For the wider decision, including licensing and languages, read brand fonts.

Questions people ask

What is the difference between serif and sans serif?

Serif typefaces have small finishing strokes at the ends of letters; sans serif typefaces do not.

Is serif or sans serif easier to read?

Neither is reliably easier. Readability depends more on the specific typeface's design, its size, line height and line length.

Should I use serif or sans serif on a website?

Either works on modern screens. Sans serifs are a safe default for interface text; serifs designed for text work well for long reading at a generous size.

Can I use serif and sans serif together?

Yes. A serif for headlines with a sans serif for body, or the reverse, is one of the most reliable font pairings.

Share this guide

Written by GradientlyVerified Gradiently account

The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.

See our profile