What is the best base font size for websites?

For most websites the best base font size is 16px, which is also the default size every major browser uses for body text. It is large enough to read comfortably on phones and laptops, and it respects the size most users have never changed. Text-heavy sites such as blogs, documentation and news often go a little larger, typically 17px to 20px on wider screens, because readers spend longer with the text. You should express the base size in relative units, usually by leaving the root at 100% and sizing everything else in rem, so that users who raise their browser's default text size still get bigger text. Going below 16px for main body copy is rarely a good idea.

The base font size is the anchor for your whole type system. Headings, line height, spacing and even layout widths are often derived from it, so getting it wrong makes everything else feel slightly off. In this article you'll learn where the 16px default comes from, how typeface choice changes the "real" size, how to set the base size in CSS without overriding user preferences, when to scale it up responsively, and how to test it properly.

Why 16px Became the Default

Browsers have shipped with a default font size of 16px for decades. When you write a page with no CSS at all, the html element gets a computed font-size of 16px, and paragraphs inherit it. CSS defines the medium keyword as the user's preferred font size, and in practice browsers set that to 16px out of the box.

A CSS pixel is not a physical device pixel. It is a reference unit tied to a typical viewing distance, which is why 16px text looks roughly the same physical size on a high-density phone and on a desktop monitor, even though the phone uses many more device pixels to draw it. That consistency is a large part of why 16px works well across devices.

There's also a practical reason on mobile. iOS Safari automatically zooms into a form field when it receives focus if the field's font size is below 16px. Setting inputs to at least 16px avoids that jarring zoom without disabling user scaling.

Font Size Is Not the Same as Visual Size

Two fonts set at the same font-size can look very different in size. The font-size value sets the size of the em box, the notional square each glyph is designed within, not the height of the letters. What your eye mostly responds to is the x-height, the height of lowercase letters such as x, a and e.

• Large x-height faces: Fonts like Verdana, Inter and Atkinson Hyperlegible look big at 16px and can feel cramped if you go much larger without adjusting line height.
• Small x-height faces: Fonts like Garamond-style serifs or many classic book faces look small at 16px and often need 18px to 20px to read comfortably on screen.
• Condensed faces: Narrow fonts fit more characters per line, so they may need a slightly larger size to keep words distinct.

This is why "16px" is a starting point rather than a rule. Always judge the base size with your actual typeface. If you want to dig into this further, see what the x-height is and why it affects readability.

You can compare faces side by side with a quick test page:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Base size comparison</title>
  <style>
    body { margin: 2rem; line-height: 1.5; }
    p { max-width: 65ch; margin-block: 0 1.5rem; }
    .verdana  { font-family: Verdana, sans-serif; }
    .georgia  { font-family: Georgia, serif; }
    .garamond { font-family: "EB Garamond", Garamond, serif; }
  </style>
</head>
<body>
  <p class="verdana">Verdana at 16px. The quick brown fox jumps over the lazy dog.</p>
  <p class="georgia">Georgia at 16px. The quick brown fox jumps over the lazy dog.</p>
  <p class="garamond">Garamond at 16px. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Open it on your phone as well as your desktop. The differences are usually obvious within seconds.

How to Set the Base Font Size in CSS

The most important rule is not to lock the root font size to a fixed pixel value. If you write html { font-size: 16px; }, users who have set their browser default to 20px will still get 16px. Browser zoom still works, but the text-size preference, which many people with low vision rely on, is ignored.

Leave the Root Alone, or Use a Percentage

The safest approach is to leave the root at the browser default and size everything in rem:

html {
  /* 100% = the user's preferred size, 16px by default */
  font-size: 100%;
}

body {
  font-size: 1rem;      /* 16px by default */
  line-height: 1.6;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
small { font-size: 0.875rem; }

If a user sets their default to 20px, 1rem becomes 20px and every size scales with it.

Going Larger Than 16px

If you want a larger base, scale it relative to the user's preference rather than replacing it:

html {
  /* 112.5% of 16px = 18px by default, but grows with user settings */
  font-size: 112.5%;
}

Common percentages and what they produce with the 16px default:

Root font-size	Default result	Typical use
100%	16px	Apps, dashboards, marketing sites
106.25%	17px	General content sites
112.5%	18px	Blogs, documentation
125%	20px	Long-form reading, editorial sites

Avoid the 62.5% Trick

A once-popular technique sets html { font-size: 62.5%; } so that 1rem equals 10px, which makes mental arithmetic easier. It does respect user settings, but it means every element that forgets to set a size, including third-party widgets, falls back to a tiny 10px. You also have to remember to set body { font-size: 1.6rem; }. Modern tools and CSS custom properties make the trick unnecessary, so it's better to work with a 16px rem and let your build tools or a scale do the maths.

Making the Base Size Responsive

Small screens are held closer to the eye than laptops, and laptops are closer than large monitors. That means a single base size can feel slightly too large on phones and slightly too small on wide desktops. A modest increase across viewport widths often works well.

With Media Queries

html { font-size: 100%; }          /* 16px */

@media (min-width: 48em) {
  html { font-size: 106.25%; }     /* 17px */
}

@media (min-width: 75em) {
  html { font-size: 112.5%; }      /* 18px */
}

Media queries in em are based on the browser's initial font size, so they respond sensibly when users change their default text size.

With clamp()

For a smooth increase, use clamp() and always include a rem component so the size still responds to user preferences and zoom:

html {
  /* 16px at small widths, rising to 19px on large screens */
  font-size: clamp(100%, 0.9rem + 0.35vw, 118.75%);
}

Avoid sizing text purely in vw. A value like font-size: 1.2vw doesn't grow when the user zooms in, which can fail WCAG 1.4.4 (Resize Text), which expects text to be resizable to 200% without loss of content or function. Keeping a rem term in the formula avoids that problem.

Base Size for Different Kinds of Sites

There's no single right number, but there are sensible ranges based on what people do on the page.

• Long-form reading: Blogs, documentation and news benefit from 18px to 20px on desktop. Readers stay longer, and a larger size reduces fatigue.
• Marketing and landing pages: 16px to 18px body text with large, confident headings usually works. Copy is shorter and scanned rather than read.
• Web applications and dashboards: 14px to 16px is common for dense interfaces, but keep primary content and form inputs at 16px. Use smaller sizes only for secondary labels and metadata.
• E-commerce: Product descriptions at 16px or 17px, with prices and key details given emphasis through weight and size rather than shrinking everything else.
• Audiences with older readers: Lean towards 18px or more, with generous line height and strong contrast.

Secondary Text

Captions, footnotes and metadata are usually set at 0.875rem (14px by default) or 0.8125rem (13px). Going smaller than about 12px for anything people need to read is risky, especially in lighter weights or low-contrast colours.

.caption,
.meta {
  font-size: 0.875rem;
  line-height: 1.45;
  color: #4a4a4a; /* still well above 4.5:1 on white */
}

Base Size and Its Partners: Line Height and Line Length

A base size never works on its own. If your text column is fixed in pixels, increasing the font size reduces the number of characters per line, and bigger text usually needs a little less relative line height.

A good pattern is to size the reading column in ch or em so it scales with the text:

.prose {
  font-size: 1.125rem;   /* 18px by default */
  line-height: 1.6;
  max-width: 68ch;       /* keeps roughly 60-75 characters per line */
  margin-inline: auto;
  padding-inline: 1rem;
}

As a rough guide, body text at 16px to 18px is comfortable with a line height between 1.5 and 1.7. Larger text, such as 20px or more, often looks better around 1.4 to 1.5. Headings need tighter line height still, often 1.1 to 1.25.

How to Test Your Base Font Size

Numbers on a screen are no substitute for reading. Use these checks before you settle on a value.

1. Read a full article on your phone: Hold it at a normal distance and read for two or three minutes. If you find yourself pinching to zoom, the text is too small.
2. Check at arm's length on a laptop: Sit back in your chair rather than leaning in. Body text should still be easy to read.
3. Change your browser default size: In Chrome, go to Settings, Appearance, Font size and choose Large. In Firefox, use Settings, General, Fonts. Your text should grow.
4. Zoom to 200%: Press Ctrl or Cmd and the plus key until you reach 200%. Text should reflow without overlapping or being cut off.
5. Inspect the computed size: In DevTools, select a paragraph and check the Computed tab to confirm the final pixel value.

You can also check the computed root size in the console:

const rootSize = getComputedStyle(document.documentElement).fontSize;
const bodySize = getComputedStyle(document.querySelector("p")).fontSize;
console.log({ rootSize, bodySize });

{ rootSize: '18px', bodySize: '18px' }

If rootSize stays the same after you change your browser's default text size, something in your CSS is hard-coding a pixel value on the root.

---

FAQ: Base Font Size

---

Conclusion

The best base font size for most websites is 16px, set through the browser default rather than a hard-coded pixel value. From there, adjust for your typeface and your content: fonts with small x-heights and sites built for long reading sessions benefit from 17px to 20px, especially on larger screens, while dense interfaces can use smaller sizes for secondary information only.

Set the root as a percentage, size everything else in rem, and if you scale responsively, keep a rem term in any clamp() formula so user preferences and zoom still work. Then test by actually reading on a phone and a laptop, changing your browser's default size and zooming to 200%. A base size that passes those checks will give the rest of your typography a solid foundation.