What are the best fonts for body text on the web?

The best fonts for body text on the web are typefaces designed for continuous reading on screens: they have a generous x-height, open letter shapes, moderate stroke contrast, clear distinctions between similar characters and a true italic. Reliable open-source choices include Source Serif 4, Literata, Charter and Merriweather among serifs, and Source Sans 3, Inter, IBM Plex Sans, Public Sans and Atkinson Hyperlegible among sans-serifs. If you want zero download cost, a system font stack using system-ui, or classic screen fonts such as Georgia and Verdana, also read well. No font can rescue poor settings, so size, line height, line length and contrast matter just as much as the typeface. The best body font is the one your readers can read for ten minutes without noticing it.

Body text makes up most of what people read on a page, and it's where small differences in typeface design become tiring over hundreds of words. Display fonts can get away with quirks; text fonts can't. In this article you'll learn the qualities that separate good text faces from merely attractive ones, a shortlist of strong serif, sans-serif and system options, the CSS settings that make any body font work, and how to compare candidates fairly.

What Makes a Font Good for Body Text

Text faces are designed to disappear into the act of reading. These qualities make that possible.

• Comfortable x-height: Lowercase letters make up most of what we read. A moderate to large x-height makes text look bigger and keeps it legible at small sizes, though very large x-heights can make ascenders and descenders feel cramped.
• Open apertures: Wide openings in c, e, s and a keep letters distinct at small sizes and in low light.
• Moderate contrast: Strokes that vary only gently between thick and thin hold up on screens of all resolutions. Very thin hairlines can disappear.
• Distinguishable characters: I, l and 1, or O and 0, should never be confused. This matters for codes, names and numbers.
• Even rhythm and spacing: Good text faces have consistent spacing, so paragraphs form an even grey texture without dark spots or gaps.
• A true italic: Body text needs emphasis, and a designed italic reads far better than a slanted roman.
• Sturdy bold: Bold should be clearly heavier but not so heavy that counters fill in.
• Wide character set: Proper quotes, dashes, accented letters and currency symbols for every language you publish in.

Fonts designed for large sizes, such as high-contrast Didones, condensed headline faces and decorative scripts, usually lack several of these qualities.

Best Serif Fonts for Body Text

Serifs suit long-form reading, editorial content and brands that want warmth or authority. On modern high-density screens, serifs render cleanly at body sizes.

• Source Serif 4: A transitional serif with an optical size axis, so letters get slightly sturdier and more open at text sizes. Excellent for articles and documentation.
• Literata: Designed for long-form digital reading, with sturdy serifs and a calm texture. It has an optical size axis and broad language support.
• Charter: Designed by Matthew Carter in the 1980s for low-resolution printers, which gives it robust shapes that suit screens. Free versions are available, and it's included with recent versions of macOS and iOS, so it can sometimes be used without a download.
• Merriweather: Sturdy, slightly condensed and with a large x-height, it stays readable on small and low-resolution screens.
• Newsreader: Made for on-screen news reading, with optical sizes that work from captions to headlines.
• Georgia: Another Matthew Carter design, made for screens and pre-installed on Windows and macOS. It remains a dependable zero-cost serif.

Best Sans-Serif Fonts for Body Text

Sans-serifs suit interfaces, product sites, documentation and brands that want a modern, neutral voice.

• Source Sans 3: A humanist sans with open shapes and a friendly rhythm. It reads well in long passages and is part of a larger family with matching serif and code faces.
• Inter: Designed for screens, with a tall x-height and optional features like a slashed zero and alternate 1 and l. Excellent for interfaces and product copy; some readers find it slightly mechanical for very long reading.
• IBM Plex Sans: A grotesque with a little humanist warmth, distinctive without being distracting. It pairs with Plex Serif and Plex Mono.
• Public Sans: Created for the US Web Design System, neutral and highly legible, with a broad range of weights.
• Atkinson Hyperlegible: Created by the Braille Institute to make characters as distinct as possible for readers with low vision. A strong option where accessibility is central.
• Verdana: Designed by Matthew Carter for screens, with wide letters and generous spacing. It's pre-installed widely and very legible at small sizes, though its width means fewer characters per line.

System Font Stacks

If performance matters most, you can skip web fonts entirely. Modern operating systems ship excellent text fonts: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android and various sans-serifs on Linux.

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
}

For a serif system stack:

body {
  font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text",
    Cambria, Georgia, serif;
}

Each visitor sees a different font depending on their device, so check your layout with each likely result. The trade-off is less control over appearance in exchange for instant rendering and no layout shift from font swapping.

Comparing the Main Options

Font	Style	Strengths	Consider
Source Serif 4	Serif	Optical sizes, versatile	Needs a download
Literata	Serif	Built for long reading	Bookish tone
Charter	Serif	Robust, often pre-installed on Apple devices	Fewer weights
Georgia	Serif	Pre-installed, zero cost	Limited weights and features
Source Sans 3	Sans-serif	Warm, open, readable	Less distinctive
Inter	Sans-serif	Screen-optimised, rich features	Very common
IBM Plex Sans	Sans-serif	Character with clarity	Slightly technical tone
Atkinson Hyperlegible	Sans-serif	Maximum character distinction	Distinctive shapes
System UI stack	Sans-serif	No download, native feel	Varies by platform

CSS Settings That Make Body Text Readable

Even the best font fails with poor settings. These defaults are a good starting point for most body fonts.

:root {
  --body-font: "Source Serif 4", Charter, Georgia, serif;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--body-font);
  font-size: 1.125rem;         /* 18px by default */
  line-height: 1.6;
  color: #1f2328;              /* strong contrast without pure black */
  background: #ffffff;
  font-optical-sizing: auto;   /* use optical sizes where available */
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.prose {
  max-width: 68ch;
  margin-inline: auto;
}

.prose p {
  margin-block: 0 1.25em;
  hyphens: auto;
  text-wrap: pretty;
}

What each setting does:

• Size: 16px to 20px depending on the font's x-height and your audience. Fonts with small x-heights need the larger end of the range.
• Line height: 1.5 to 1.7 for most body text. Wider columns and fonts with large x-heights need more.
• Line length: Around 60 to 75 characters per line. The ch unit makes this easy to approximate.
• Colour: Very dark grey on white, or off-white on a dark background, comfortably above the WCAG minimum of 4.5:1.
• Hyphenation: hyphens: auto requires a correct lang attribute on the html element and helps with narrow columns.
• Better wrapping: text-wrap: pretty reduces short last lines in paragraphs in supporting browsers and is ignored elsewhere.

For more on spacing, see what leading is and what line height to use.

Tune the Fallback

While a web font loads, the browser shows the fallback. If the fallback has different metrics, text reflows when the web font arrives. You can reduce the shift by adjusting a local fallback to match:

@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --body-font: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
}

The values here are a starting point. Measure your actual fonts and adjust until the fallback and web font occupy the same space.

How to Compare Body Fonts Fairly

Comparisons are only useful when everything except the font stays the same.

1. Use real content: A full article with headings, links, lists, numbers and italics.
2. Match visual size: Adjust each font's size so the x-heights look equal. Otherwise the font with the bigger x-height wins unfairly.
3. Read, don't look: Read at least a few hundred words in each. Fatigue shows up over time, not in a glance.
4. Test on several devices: A phone, a Windows laptop and a Mac at minimum, as rendering differs.
5. Try dark mode: Thin strokes can look weaker in light-on-dark text, and some fonts hold up better than others.
6. Check weight on screen: Some fonts look light at 400. A variable font lets you nudge the weight to 420 or 450 for body text if needed.

@media (prefers-color-scheme: dark) {
  body {
    color: #e6e6e6;
    background: #121212;
    font-weight: 380;  /* light text appears heavier, so ease off slightly */
  }
}

This only works with a variable font or a family that includes the weight you specify.

---

FAQ: Body Text Fonts

---

Conclusion

The best fonts for body text are designed for the long haul: a comfortable x-height, open shapes, moderate contrast, distinct characters, a real italic and a full character set. Source Serif 4, Literata, Charter and Merriweather are excellent serifs; Source Sans 3, Inter, IBM Plex Sans, Public Sans and Atkinson Hyperlegible are excellent sans-serifs; and system font stacks offer strong, instant alternatives.

Whichever you choose, give it room to work with a sensible size, line height between 1.5 and 1.7, lines of around 60 to 75 characters and strong contrast. Then compare candidates fairly by reading real content on real devices. The font that feels invisible after a few minutes of reading is the one to keep.