Body Text Sizes in rem (14px to 20px)

Body Text: Finding the Right rem Value

Body text is the most-read content on any page. Choosing the right size in rem directly impacts readability, accessibility, and user engagement.

Common Body Text Sizes

px	rem	Usage
14	0.875	Dense UI, dashboards, admin panels
15	0.9375	Compact blogs, documentation
16	1	Standard web body text (default)
18	1.125	Long-form reading, articles
20	1.25	Large-format editorial, accessibility-first

Why 16px (1rem) Is the Sweet Spot

Research on reading ergonomics suggests that 16px is a comfortable minimum for body text on screens viewed at arm's length (~50–70 cm). At this size, most adults can read without squinting or leaning forward. However, for long-form content (blog posts, documentation), bumping to 18px (1.125rem) significantly improves reading comfort and reduces eye strain.

Line Height Recommendations

Line height (leading) should increase proportionally with body text size:

Body size	Line height	Actual leading
14px (0.875rem)	1.5	21px
16px (1rem)	1.5–1.6	24–25.6px
18px (1.125rem)	1.5–1.6	27–28.8px
20px (1.25rem)	1.5	30px

Optimal Line Length

The ideal line length for body text is 45–75 characters per line. In CSS, you can approximate this with max-width:

.prose {
  font-size: 1rem;        /* 16px */
  line-height: 1.6;       /* 25.6px */
  max-width: 65ch;        /* ~65 characters */
}

The ch unit is relative to the width of the "0" character and works beautifully with rem-based font sizes.

Responsive Body Text

Consider increasing body text size on larger screens:

body {
  font-size: 1rem;         /* 16px on mobile */
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;   /* 18px on tablet+ */
  }
}

This approach uses the root rem system to scale all relative values automatically when the body size changes.