What Is the Best Font Size for Body Text on Websites?

A client reviews their new site on a 14-inch laptop and says it looks great. Their sales director opens it on a phone in a sunny car park and can't read the product descriptions. Their oldest customer, who has their browser default set to 20px, sees text that never gets bigger because every size in the stylesheet is hard-coded in pixels. All three are looking at the same body text, and it fails two of them. Choosing a body font size isn't about picking one magic number; it's about picking a sensible default and making sure it adapts.

This article covers the best font size for body text on websites in 2026: the recommended ranges for different content types and devices, why 16px is a floor rather than a target, how font choice changes the "right" size, and how to implement sizes in CSS, Tailwind CSS v4, and WordPress so they respect user preferences and WCAG.

The Short Answer

For most websites, set body text between 16px and 20px, expressed in rem so it scales with the user's browser setting.

Content type	Desktop	Mobile
Long-form articles and blogs	18–21px	17–18px
Marketing and landing pages	17–20px	16–18px
E-commerce product descriptions	16–18px	16–17px
Web apps, dashboards, and admin UIs	14–16px	16px
Documentation	16–18px	16–17px
Captions, footnotes, metadata	13–15px	13–15px

The 16px number comes from the default font size in every major browser. It's a sensible minimum for body copy, but many reading-focused sites now go larger. Very few content sites should go below it.

Why 16px Is the Floor, Not the Target

Browsers have defaulted to 16px since the early days of the web, when screens were lower resolution and viewed from roughly the same distance as a printed page. Several things have changed since:

• Screens are higher density, so text renders crisper but physically smaller per CSS pixel on many laptops.
• Laptops are used at arm's length, often farther away than a book.
• Typefaces have changed. Many popular web fonts have smaller x-heights than Verdana or Georgia, the fonts that made 16px feel large.
• Audiences are older. Presbyopia affects most people over about 45, and they make up a large share of web users.

For these reasons, 16px is often too small for comfortable long-form reading on desktop. Most major publishing and documentation sites use 17–21px for article text.

On mobile, 16px matters for another reason: iOS Safari zooms into form inputs with a font size below 16px when they receive focus. Keep input, select, and textarea at 16px or larger to avoid that jarring zoom.

The Font Matters More Than the Number

Two fonts at the same font-size can look dramatically different in size. What your eye perceives as size is mainly the x-height, the height of lowercase letters like x, a, and e. A font with a large x-height at 16px can look bigger than a font with a small x-height at 18px. See what x-height is and why it matters for screen fonts for the details.

Font	X-height ratio (approx.)	Comfortable body size
Verdana	0.55	15–17px
Inter	0.55	16–18px
Source Sans 3	0.49	17–19px
Georgia	0.48	17–19px
Merriweather	0.56	16–18px
EB Garamond	0.40	19–22px
Futura / Jost	0.43	18–20px

The ratio is x-height divided by the font size (em). Treat the values as approximate, and check the actual rendering in your browser. The lesson: if you switch typefaces, revisit your body size. A literary serif with a small x-height may need 20px to feel like 17px of Inter.

You can also normalize perceived size across fonts and fallbacks with font-size-adjust:

body {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-size-adjust: 0.48;
}

That tells the browser to scale the font so its x-height equals 0.48 of the font size, which keeps the fallback and the web font looking the same size during loading.

Set Sizes in rem, Not px

The single most important implementation detail is using relative units. If you write font-size: 16px on the body, a user who has set their browser's default font size to 20px gets 16px anyway. If you write font-size: 1rem, they get 20px, which is what they asked for.

/* Never set a fixed pixel size on html; it overrides user preferences */
html {
  font-size: 100%;
}

body {
  font-size: 1.125rem; /* 18px at default settings */
  line-height: 1.6;
}

.caption {
  font-size: 0.875rem; /* 14px at default settings */
}

Avoid the old html { font-size: 62.5%; } trick that makes 1rem equal 10px. It works mathematically but makes every component depend on an arbitrary root size, and it's easy to leave unadjusted text tiny. For the full argument, see why you should use rem instead of px for font sizes.

Make Body Text Scale with the Viewport

You can increase body size slightly on larger screens with breakpoints or with fluid sizing. Fluid sizing with clamp() avoids jumps:

body {
  /* 17px on small screens, up to 20px on wide screens */
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

Always include a rem component in the preferred value, as above. A pure vw value doesn't respond to the user's font size setting or to browser zoom in the same way, which can cause problems with WCAG 1.4.4. For a full method of deriving clamp() values, see fluid typography with CSS clamp().

Line Height and Line Length Go Together

Font size doesn't work alone. Larger text needs a matching line height and line length:

• Line height: 1.5–1.7 for body text. WCAG 1.4.12 requires that layouts tolerate a user-set line height of at least 1.5.
• Line length: 45–75 characters per line, ideally around 60–70. Because ch units scale with font size, a max-inline-size: 65ch container grows automatically when you increase body size. See the ideal line length for web content.
• Paragraph spacing: around 1–1.5em between paragraphs. WCAG 1.4.12 requires tolerance for spacing of 2 times the font size.

.prose {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  max-inline-size: 65ch;
}

.prose p + p {
  margin-block-start: 1.25em;
}

Accessibility Requirements

WCAG doesn't specify a minimum font size, but several criteria affect what you can do:

1. 1.4.4 Resize Text (AA): text must be resizable up to 200% without loss of content or functionality. Relative units and flexible layouts make this straightforward.
2. 1.4.10 Reflow (AA): content must reflow without horizontal scrolling at a width equivalent to 320 CSS pixels, which is what a 1280px-wide window looks like at 400% zoom.
3. 1.4.12 Text Spacing (AA): layouts must survive line height of 1.5, paragraph spacing of 2 times font size, letter spacing of 0.12em, and word spacing of 0.16em.
4. 1.4.3 Contrast (AA): smaller text requires higher contrast, 4.5:1 for normal text versus 3:1 for large text, defined as 24px regular or about 18.66px bold. Small grey body text is one of the most common accessibility failures.

Implementing Body Size in Tailwind CSS v4

Tailwind v4's default text scale uses rem. Set body text on the body or a prose wrapper, and customize sizes and their line heights in @theme:

@import "tailwindcss";

@theme {
  --text-base: 1.0625rem;
  --text-base--line-height: 1.65;
  --text-lg: 1.1875rem;
  --text-lg--line-height: 1.6;
}

@layer base {
  body {
    @apply text-base;
  }
}

Then use responsive variants to step up on larger screens:

<article class="text-base md:text-lg max-w-prose mx-auto">
  ...
</article>

Implementing Body Size in WordPress Block Themes

In a block theme, set the root body size in theme.json using rem or a fluid value. WordPress generates clamp() values for presets when fluid typography is enabled:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "slug": "small",
          "name": "Small",
          "size": "0.875rem",
          "fluid": false
        },
        {
          "slug": "medium",
          "name": "Medium",
          "size": "1.125rem",
          "fluid": { "min": "1.0625rem", "max": "1.25rem" }
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.65"
    }
  }
}

How to Test Your Body Size

Numbers on a spec sheet don't tell you how text feels. Test it:

1. Read a full article at your chosen size on a laptop, a phone, and an external monitor.
2. Change the browser default font size to 20px (in Chrome: Settings, Appearance, Font size) and confirm everything scales.
3. Zoom to 200% and check that nothing overlaps or gets cut off.
4. Apply the WCAG 1.4.12 spacing overrides with a bookmarklet or DevTools and verify layout holds.
5. Ask people over 50 to read it without glasses. You'll learn more from that than from any guideline.

Body Font Size FAQ

Conclusion

The best font size for body text on most websites falls between 16px and 20px, with long-form content leaning toward the upper end and dense interfaces toward the lower. Treat 16px as the floor, not the goal, and adjust for your typeface's x-height, because a small-x-height serif needs noticeably more size than a screen-optimized sans.

Express sizes in rem so they honor user preferences, use clamp() for gentle fluid scaling, and pair your size with a 1.5–1.7 line height and a 45–75 character measure. Then test it on real devices, with a larger browser default, and at 200% zoom. Body text that holds up under those conditions will work for nearly everyone who reads it.

Here are some useful references for going deeper on body text size:

1. W3C: Understanding SC 1.4.4 Resize Text — what resizing to 200% requires.
2. W3C: Understanding SC 1.4.12 Text Spacing — the spacing overrides your layout must tolerate.
3. MDN Web Docs: font-size — units, keywords, and how relative sizes are computed.
4. Butterick's Practical Typography: Point size — practical advice on choosing text size for print and screen.
5. WordPress Developer Resources: Fluid typography — how theme.json generates fluid font size presets.