Don't pin the root font size

Leave html alone and size from rem, so the browser setting still works.

Paco Courseypaco.me
almost all websites do not respect browser scaling , because they set a hard-coded font-size on html , or use px which opts out of scaling entirely
px vs rem in font-size · Sep 2022Read article ↗
Paco Courseypaco.me
scaling (browser settings) and zooming (⌘+/-) are different things
px vs rem in font-size · Sep 2022Read article ↗

Zoom scales px too; the font-size setting only reaches rem and em.

1 · The root font size

Change the browser font size. Only one pane follows.

Root pinned to 16pxBad

Weekly digest

Three new comments and one request for review.

Updated 2 min ago
html { font-size: 16px }Root16px
Root left aloneGood

Weekly digest

Three new comments and one request for review.

Updated 2 min ago
html { font-size: 100% }Root20px
html { font-size: 16px; }    /* bad: ignores the setting */
html { font-size: 100%; }    /* good: or leave it out */

.card { font-size: 1rem; padding: 1em; }   /* follows the root */
h3    { font-size: 1.25em; }

2 · Zoom is not font size

Drag the zoom. Then change the font size above.

Page zoomEverything

Weekly digest

Three new comments and one request for review.

zoom: 1Border3px
Browser font sizeText only

Weekly digest

Three new comments and one request for review.

html { font-size: 100% }Border3px
// Read the browser's default: "medium" ignores any px on html
const probe = document.createElement("div");
probe.style.fontSize = "medium";
document.body.append(probe);
getComputedStyle(probe).fontSize;   // "20px" when set to Large
probe.remove();

Why it matters, pros and cons

Why it matters

A px value on html replaces the size your reader picked, for every rem on the page.

Pros

  • With html unset, text, spacing and breakpoints in rem follow the setting.
  • Removing one declaration fixes it site-wide; the rest of the CSS stays put.
  • Zoom still works as before, so readers keep both controls.

Cons

  • Most readers never change the setting, so the gain is for a small group.
  • px values you keep, like borders, will not scale, so each needs a decision.
  • Layouts in rem can overflow at Very large, so test the biggest size.