What's the Best Font Size for Body Text?
Desktop, mobile, accessibility, and the one thing nobody told me about x-height.
The Email That Made Me Rethink Everything
Her name was Margaret. She was a retired teacher who loved reading design blogs. She wrote:
"I enjoy your content, but I've stopped visiting your site. The text is too small on my phone, and my eyes get tired after a few minutes. I'm not alone — my book club friends feel the same way."
That email is still in my inbox. I look at it every time I'm tempted to use 14px body text. Margaret wasn't asking for special treatment — she was asking to be included. And she was right. My font size was excluding a huge portion of my audience.
After that, I dug into the research, tested everything, and rebuilt my approach to typography. This guide is what I learned — and what I wish I'd known years ago.
1. Desktop vs Mobile — They're Not the Same
The biggest mistake I made was using the same font size everywhere. Desktop and mobile are different environments. Here's what actually works:
2. The X-Height Trap (Why 16px Isn't Always 16px)
Here's something that confused me for years: 16px in one font can look significantly smaller than 16px in another. The culprit is x-height — the height of lowercase letters relative to the font's point size.
3. What WCAG Actually Says About Font Size
Surprisingly, WCAG 2.1 doesn't specify a minimum font size. Instead, it requires that text can be resized up to 200% without loss of content or functionality. This effectively means:
- ✅ Your layout must not break when users zoom to 200%
- ✅ Don't set body text in viewport units (vw) that prevent resizing
- ✅ Use relative units (rem, em) instead of absolute pixels when possible
- ⚠️ 16px is widely considered the practical minimum
Real-world interpretation: Start at 16px. If your audience is over 50 or has accessibility needs, go to 18px. For legal or medical content, 18-20px is recommended.
Live Font Size Tester — See the Difference Yourself
4. Best Google Fonts for Body Text (Ranked by Readability)
5. Fluid Typography — Make Fonts Scale Automatically
Instead of setting a single font size, use clamp() to create fluid typography that scales between screen sizes.
/* Fluid body text that scales from mobile to desktop */
body {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
/* 16px on mobile → scales → 20px on desktop */
line-height: clamp(1.5, 1.5 + 0.2vw, 1.7);
}
/* Better: Use rem for consistency */
html {
font-size: 100%; /* 16px default */
}
@media (min-width: 1200px) {
html {
font-size: 112.5%; /* 18px on large screens */
}
}6. Common Font Size Mistakes (I've Made All of Them)
❌ Mistake 1 — Using 14px Body Text
14px excludes older readers and anyone with low vision. It's fine for captions, footnotes, or legal disclaimers. Never for main content.
❌ Mistake 2 — Setting Font Size in px Only
Users who need larger text often change their browser's default font size. If you use px exclusively, their preference is ignored. Use rem for better accessibility.
❌ Mistake 3 — Ignoring Line Height
Font size is only half the story. Tight line heights (1.2-1.3) make text feel cramped and hard to follow. Use 1.5-1.7 for body text.
❌ Mistake 4 — Not Testing on Real Devices
What looks perfect on your 27-inch monitor might be unreadable on a phone. Test on actual devices in real lighting conditions.
Body Text Font Size Checklist
Frequently Asked Questions
What is the best font size for body text on a website?
16px is the recommended minimum for both desktop and mobile. For longer articles or audiences over 50, use 18px. For legal, medical, or accessibility-focused content, 18-20px is best.
Is 14px body text OK for mobile?
No. 14px is too small for comfortable reading on mobile. It excludes older users, people with low vision, and anyone reading in bright sunlight. Use 16px minimum.
What's the difference between px, em, and rem?
px is absolute (1px = 1/96 inch). em is relative to the parent element. rem is relative to the root element (<html>). For accessibility, use rem — it respects user font size preferences.
Does WCAG require a minimum font size?
WCAG 2.1 does not specify a minimum font size. Instead, it requires that text can be resized up to 200% without loss of content. This effectively makes 16px the practical minimum.
What line height should I use with body text?
Use 1.5–1.7 for body text. 1.5 is good for shorter paragraphs. 1.6-1.7 is better for long-form articles. Tight line heights (1.2-1.3) are only for headings.
How do I test if my font size is readable?
Open your site on a phone in bright sunlight. If you squint or need to zoom, it's too small. Better yet, find someone over 60 and ask them to read a paragraph. Their feedback is invaluable.