REM Accessibility: Scaling, Zoom & Tokens

User font-size preferences

Most developers think of accessibility scaling as page zoom. But there is a second, distinct mechanism: browser default font-size settings.

In Chrome: Settings → Appearance → Font size. In Firefox: Preferences → General → Default font size. Safari: Preferences → Advanced → Never use font sizes smaller than.

When a user increases their browser default font size from 16px to 20px, the intended behaviour is that all REM-based text and spacing scales up proportionally. A font-size: 1rem becomes 20px. A padding: 1.5rem becomes 30px. The interface feels like a larger, more comfortable version of itself.

With font-size: 16px (pixel), nothing happens. The browser's preference is overridden. The user's explicit accessibility configuration is ignored.

This distinction matters for two groups in particular:

• Users with low vision who have configured larger default text before encountering your site
• Users who browse on high-DPI displays and have bumped their default size for legibility at native resolution

Two scaling paths: zoom vs font-size

There are two independent mechanisms users have for making text larger:

CSS px is immune to browser font-size changes. This is why WCAG recommends relative units for text and interactive targets.

/* This user preference is ignored */
body { font-size: 16px; }

/* This user preference is honoured */
body { font-size: 1rem; }

/* Even better: don't set a base font-size at all */
/* The browser default (user's preference) will apply */
html { font-size: 100%; }

The font-size: 100% on the root is the most accessible approach — it defers entirely to the user's browser setting rather than resetting it.

WCAG text sizing requirements

WCAG 1.4.4 — Resize Text (Level AA)

Text can be resized up to 200% without loss of content or functionality, and without requiring assistive technology.

REM-based text satisfies this because the root font-size doubles under 200% zoom and all REM values scale with it. Layouts built with REM spacing also reflow proportionally, avoiding content truncation.

WCAG 1.4.12 — Text Spacing (Level AA)

Content does not lose functionality when line-height is set to 1.5× font-size, letter-spacing to 0.12× font-size, word-spacing to 0.16× font-size, and spacing after paragraphs to 2× font-size.

This is best satisfied by avoiding fixed-height containers for text content:

/* Fragile: clips text when spacing is increased */
.card-description {
  height: 48px; /* fixed */
  overflow: hidden;
}

/* Resilient: grows with content */
.card-description {
  min-height: 3rem; /* minimum, not maximum */
}

WCAG 2.5.5 — Target Size (Level AA in WCAG 2.2)

Interactive targets are at least 24×24 CSS px. The recommended size from Apple HIG and Material Design is 44×44px:

button,
a,
[role="button"],
[role="checkbox"],
[role="radio"] {
  min-height: 2.75rem; /* 44px at 16px root — scales with user preference */
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Tokens, QA, and test matrix

Define a type token ladder in REM, then test representative pages at multiple zoom/font-size configurations:

:root {
  --font-xs:   0.75rem;   /* 12px — caption, metadata */
  --font-sm:   0.875rem;  /* 14px — secondary body, labels */
  --font-base: 1rem;      /* 16px — primary body */
  --font-lg:   1.125rem;  /* 18px — prominent labels */
  --font-xl:   1.25rem;   /* 20px — small headings */
  --font-2xl:  1.5rem;    /* 24px — section headings */
  --font-3xl:  1.875rem;  /* 30px — page headings */
  --font-4xl:  2.25rem;   /* 36px — display */
}

Accessibility QA test matrix:

When design still delivers px, convert with PX to REM but record the assumed root to avoid silent drift between teams.

Common accessibility pitfalls

1. html { font-size: 62.5%; }

This legacy pattern sets root to 10px for mental arithmetic convenience. It overrides user font-size preferences and breaks the browser's accessibility scaling. Avoid it.

2. font-size: 0 on parent elements

Some CSS resets or icon systems set font-size: 0 to eliminate inline gaps. This breaks REM inheritance if any descendant uses EM units. Use line-height: 0 instead for inline gap removal.

3. overflow: hidden on fixed-height containers

Fixed-height boxes with overflow: hidden clip text when user spacing overrides are applied. Replace fixed heights with min-height.

4. px for line-height on elements with rem font-size

/* Fragile: line-height does not scale with font-size changes */
p { font-size: 1rem; line-height: 24px; }

/* Correct: unitless line-height scales with font-size */
p { font-size: 1rem; line-height: 1.5; }

5. Hardcoded viewport units for text

/* Dangerous: shrinks to tiny on narrow viewports */
.hero-title { font-size: 5vw; }

/* Safe: clamped with a minimum */
.hero-title { font-size: clamp(1.75rem, 1rem + 3vw, 4.5rem); }

Accessibility testing workflow

1. Browser font-size change: In Chrome, set font size to "Very Large" (24px). Verify layouts hold without overflow.
2. Page zoom: Zoom to 200% (Ctrl/Cmd + × 4). Verify all content is accessible without horizontal scrolling (WCAG 1.4.10).
3. Text spacing bookmarklet: Apply WCAG 1.4.12 text spacing overrides and verify no content is lost.
4. Screen reader: Tab through interactive elements — all should have accessible names and meet minimum target sizes.
5. Contrast: Run primary text/background pairs through the WCAG contrast checker. Body text needs 4.5:1 (AA), large text needs 3:1 (AA).

Key takeaways

• REM honours browser font-size preferences — this is the primary accessibility argument for using it.
• px is not automatically WCAG non-compliant, but it breaks one of two user scaling mechanisms.
• Avoid fixed heights on containers with text — use min-height so content can grow with text spacing overrides.
• Target size: min-height: 2.75rem on interactive elements satisfies both WCAG 2.5.5 and Apple HIG.
• Test at 200% zoom and 20px root — the two configurations most likely to reveal fragile layouts.