Best free serif fonts for editorial sites in 2026

Sans-serifs took over the web for a decade. Then around 2022, serifs came back. Substack uses Caslon. Stripe rebranded with a custom serif. The Verge went serif. Editorial sites realized that body text reads better with serifs at the sizes most people read at, and headlines feel more substantial.

This post is the 10 free serifs I'd actually use, with the case where each one wins. Every one is on fontcompressor.com compressed to under 100KB, so dropping them into a project takes one CSS block.

Merriweather

The workhorse. Designed by Eben Sorkin specifically for screen reading at body sizes. Tall x-height, sturdy serifs, generous spacing. Stays sharp on low-res Android displays where most other serifs fall apart.

Use it when: you need a body-text serif that reads cleanly from 14px up. Long-form blog posts, news articles, documentation.

Variable file ships at ~98KB after the aggressive subsetting fontcompressor does. Covers opsz, wdth, and wght axes.

Playfair Display

The display serif everyone reaches for when they want a magazine-cover headline. High contrast, dramatic flourishes, the lowercase g that designers obsess over.

Use it when: you need headlines and pull-quotes at 36px+. Wedding invites, fashion sites, anything that wants to feel premium.

Don't use it for body text. The thin strokes disappear below 18px on most displays and the result is a strain on the reader.

EB Garamond

A digital revival of Claude Garamont's 16th-century types. Old-style proportions, small x-height, true italics with letterform changes (not just slanted uprights). The closest you'll get to a classic book serif on the web for free.

Use it when: you're typesetting longform content and want a literary feel. Book websites, essay-style blogs, anything quietly serious.

91KB compressed. Pairs beautifully with IBM Plex Sans for headlines.

Cormorant Garamond

Higher-contrast take on Garamond, more delicate than EB. The display version is gorgeous at 48px+ for editorial covers. The text-size cuts work for pull-quotes and headlines but get fragile in body copy.

Use it when: you want EB Garamond's heritage feel with extra elegance. High-end editorial, wedding stationery, hospitality sites.

Four optical-size variants ship as separate static cuts: SC, Light, Medium, Display. Pick the one matching your size context or just use the variable.

Fraunces

A contemporary serif with so many axes it's almost too much. Variable on weight, optical size, softness, and a 'wonk' axis that switches between sober and quirky letterforms (the g and a get rounded; descenders curl).

Use it when: you want something that feels modern but not minimal. Tech-with-personality brands, indie SaaS landing pages, design portfolios.

The variable file is 76KB after aggressive subsetting and instancing. The wonk axis is the differentiator nothing else free has.

Source Serif 4

Adobe's open-source serif, designed as the serif companion to Source Sans. Restrained, reads cleanly at small sizes, holds up at headline sizes too.

Use it when: you want a Garamond-feel serif without the literary weight, or you're already using Source Sans and want family consistency.

141KB for the full variable file with multiple optical sizes. Smaller if you instance to wght-only via fontcompressor's pipeline.

Vollkorn

German for 'wholegrain.' Sturdy, slightly chunky, designed for screen body text. Less elegant than Garamond but more reliable across rendering pipelines.

Use it when: you want a body serif that won't surprise you on Windows ClearType or Android Chrome. Documentation sites, personal blogs, anywhere robustness beats refinement.

Variable file at ~50KB. Pairs with monospace cleanly because of its similar weight character.

Lora

Well-balanced contemporary serif designed for screen. Italic is genuinely good (not just slanted upright). Slightly more friendly than Merriweather, slightly more refined than Vollkorn.

Use it when: you want a body serif with personality but not too much. Newsletters, magazine-style blogs, anywhere Merriweather feels too utilitarian.

Ships as both variable and static cuts. The variable runs ~30KB.

Libre Baskerville

Baskerville is the workhorse 18th-century serif behind British book publishing. Libre Baskerville is the free web revival. Reads beautifully at 16px in body copy and at 48px in headlines, which is rare.

Use it when: you want classical typography without paying for ITC Baskerville or Mrs Eaves. Academic sites, longform essays, anything with a literary tone.

21KB compressed. Three static cuts (Regular, Bold, Italic) cover most needs.

IBM Plex Serif

IBM's open-source serif, designed as the serif to its sans and mono. Slightly geometric, slightly mechanical, modern enough to feel current.

Use it when: you want corporate-quality typography with personality. SaaS marketing pages, technical writing, design system documentation.

Looks particularly good paired with IBM Plex Sans and IBM Plex Mono since they share design DNA.

How to pick

Start with what your text actually needs to do.

Body text at 14-18px on screens: Merriweather, Lora, or Vollkorn. They're designed for this.

Editorial headlines at 32px+: Playfair Display, Cormorant Garamond Display, or Fraunces.

Mixed body + headline from one family: Source Serif 4, Fraunces, or IBM Plex Serif. All have variable axes that scale.

Classical / literary feel: EB Garamond or Libre Baskerville.

Modern with personality: Fraunces (especially with the wonk axis) or Lora.

Whatever you pick, pair it with a sans-serif for UI elements like buttons and form labels. Try Inter or Geist for clean sans, or IBM Plex Sans if you went with Plex Serif.

All of these are pre-compressed and ready to drop in: visit the library for the WOFF2 + the @font-face CSS one click away.