Text Size Adjuster (A− / A+ Control) — HTML CSS JS Snippet

Browsers already give every user a way to zoom a page in and out, so it is fair to ask why a site would build its own font-size control at all. The answer is that browser zoom and an in-page text size adjuster solve different problems. Browser zoom scales the entire viewport — layout chrome, images, buttons, and text all together — and it resets or behaves inconsistently across sessions, devices, and embedded contexts like iframes or in-app browsers where users often cannot reach the browser's zoom controls at all. A dedicated text size adjuster scales only the reading content, remembers the user's preference per site rather than per browser session, and works identically whether the page is opened standalone or embedded inside another app's webview.

How the scaling actually works: a CSS custom property multiplied through calc()

Every scalable font size in this snippet is expressed as a fixed rem value multiplied by a single CSS custom property: font-size: calc(1rem * var(--user-font-scale)). The custom property is declared once on :root with a default of 1 (100%), and every heading, byline, and paragraph in the sample article references it through its own calc() expression. This means resizing text is a single JavaScript operation — root.style.setProperty('--user-font-scale', scale) — that cascades instantly to every element referencing the variable, rather than requiring the script to walk the DOM and rewrite dozens of individual font-size declarations. A transition: font-size 0.2s ease on each scalable element makes the change animate smoothly rather than snapping instantly, which reduces the jarring effect of a sudden layout shift.

Five clamped steps, not a free-form range

Rather than a continuous slider that could produce awkward in-between values, the control offers five fixed steps — 87.5%, 100%, 112.5%, 125%, 137.5%, and 150% — stored as an array and referenced by index. This mirrors how most production-grade accessible text scalers work: continuous scaling invites line-height and spacing to fall out of visual rhythm at odd percentages, while discrete steps can each be verified to look correct at design time. The A− and A+ buttons decrement and increment the step index, and both buttons disable themselves automatically (btnDecrease.disabled = stepIndex === 0) at the extremes so users get clear, unambiguous feedback that they have reached the minimum or maximum size rather than clicking into a dead zone.

Why persistence to localStorage matters more than it seems

Without persistence, a user who prefers larger text has to re-apply their preference on every single page load, which is a real and recurring cognitive tax for anyone with low vision, presbyopia, or simply a preference for a more comfortable reading size. This snippet writes the current step index to localStorage under the key text-size-scale on every change and reads it back on load via loadScale(), so the very first paint after a return visit already reflects the saved preference — no flash of default-size text that then jumps to the preferred size. Because the value is a small integer index rather than a raw pixel value, it stays valid even if the step array is later extended, and it is trivial to migrate or reset by clearing a single localStorage key.

Why this matters for 2026 accessibility-first design

Calm, accessibility-first design in 2026 treats reading comfort as a per-user, per-site setting rather than a one-size-fits-all default baked into the design system. A text size adjuster gives readers direct, visible control over one of the most consequential variables in reading comfort without requiring them to dig into browser or OS accessibility settings most people never discover. Building it on a single CSS custom property keeps the implementation both trivially simple to maintain and instantly extensible — adding a sixth step, changing the default, or wiring the same variable into a mobile app's WebView all require touching only the STEPS array and the property name, not dozens of scattered font-size rules.