Text Too Small

Body text under 16px forces your visitors to pinch-zoom like they're reading the fine print on a medicine bottle. Bump it up.

What is this?

You know the fine print on a medicine bottle? The stuff that is technically there but requires a magnifying glass and good lighting to actually read? That is what body text under 16px feels like on a website — especially on mobile. Your visitors should not need to pinch-zoom to read your main content. If they are squinting, you have already lost them.

Why it matters

For your visitors: Small text causes real physical strain. People lean closer to their screens, squint, lose their place, and read more slowly. On mobile phones, 14px body text becomes genuinely tiny. People over 40 (a significant chunk of internet users) are especially affected, but even young eyes get fatigued reading small text for extended periods.
For your business: If your visitors cannot comfortably read your product descriptions, pricing, or value proposition, they will not convert. Small text also makes your site look amateurish — most professionally designed sites use 16-20px body text because designers know this is what works.
The standard: The browser default for body text is 16px for a reason — it is the minimum comfortable reading size on most screens. For body text, 16px is the floor, and 18-20px is recommended for content-heavy pages. WCAG 1.4.4 requires that text can be resized up to 200% without loss of content or functionality.

Comfortable body text

body {
  font-size: 1.125rem; /* 18px — comfortable for reading */
}

.small-text {
  font-size: 0.875rem; /* 14px — ONLY for captions/footnotes */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }

Everything is tiny

body {
  font-size: 12px; /* Squint mode activated */
}

p {
  font-size: 13px; /* Still too small */
}

.fine-print {
  font-size: 10px; /* Basically invisible */
}

How to fix it

React / Next.js

Set your base font size in your global CSS and use relative units everywhere else. In Tailwind v4:

// In your globals.css or tailwind base layer:
// html { font-size: 16px; } /* Already the browser default */

// Your components — use Tailwind's text utilities:
function LandingPage() {
  return (
    <main>
      {/* Hero — larger text for impact */}
      <h1 className="text-4xl font-bold md:text-5xl">Your big headline</h1>

      {/* Body text — 18px is the sweet spot */}
      <p className="text-lg leading-relaxed">
        Your main content should be easy to read without any zooming or squinting.
      </p>

      {/* Secondary text — never below 14px */}
      <span className="text-sm text-neutral-500">Captions and metadata can be smaller</span>

      {/* NEVER do this */}
      {/* <p className="text-xs">Main content in 12px</p> */}
    </main>
  );
}

Key sizes: text-base (16px) is the minimum for body, text-lg (18px) is recommended, and text-sm (14px) should only be used for captions and metadata.

Plain HTML

<style>
  /* Set a solid base */
  html {
    font-size: 100%; /* Respects user's browser settings (usually 16px) */
  }

  body {
    font-size: 1.125rem; /* 18px for body content */
    line-height: 1.7;
  }

  /* Use rem for everything — scales with user preferences */
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.875rem;
  }
  h3 {
    font-size: 1.5rem;
  }

  /* Small text — but never for main content */
  small,
  .caption {
    font-size: 0.875rem; /* 14px — smallest you should go */
  }

  /* NEVER set a pixel font-size on html/body — it breaks
     browser zoom and user font-size preferences */
</style>

<body>
  <h1>Big and Bold</h1>
  <p>Body text at 18px. Comfortable on any screen.</p>
  <small>This caption is 14px — the absolute minimum.</small>
</body>

High impact — contentReadability~2 paws

The cat can read in the dark, but your visitors cannot. Body text under 16px is an instant readability penalty. Bump your font size up — it costs nothing and helps everyone.

How the cat scores this

The cat measures the computed font size of all body text elements (<p>, <li>, <td>, <span> inside content areas). If the primary body text is below 16px, it gets flagged. Text under 14px gets a harder flag unless it is clearly a caption, timestamp, or footnote. The cat also checks whether the page uses pixel values on the <html> element (which overrides user font-size preferences and breaks accessibility zoom).