sizing-units

# Sizing Units ## The Question the Unit Answers A unit is not a formatting preference. It is a declaration of what happens to a value when the user enlarges text. - `rem` — this value belongs to the text and must grow with it. - `px` — this value belongs to the screen and must stay put. - `%`, `fr`, `ch`, `clamp()`, `min()` — this value belongs to the available space. Pick the unit by answering that question, not by picking a house style and applying it everywhere. Both absolutist positions — all-rem and all-px — produce defects, and they are different defects. ## Zoom Is Not the Font-Size Setting The common argument for px everywhere is that browsers already have full-page zoom, so the root font size can be ignored. They are separate controls serving separate people. - **Full-page zoom** magnifies everything, layout included. It buys larger text at the cost of horizontal scrolling and fewer items per screen. - **The browser's default font size** enlarges text and leaves the layout alone. This is what a user with low vision sets once, years ago, and never touches again. They will not switch to zoom because your product ignored it. A product that hard-codes every dimension in px answers the first user and silently refuses the second. WCAG 2.2 SC 1.4.4 (Resize Text) requires text to reach 200% without loss of content or function, and SC 1.4.10 (Reflow) requires the page to survive it in a single column. See [[wcag-accessibility]]. ## Use rem For **Typography.** Every ...