Help us improve
Share bugs, ideas, or general feedback.
From grimoire
Implements responsive text using rem/em units and flexible layouts to meet WCAG 2.1 AA requirements for text resize, reflow, and text spacing.
npx claudepluginhub jeffreytse/grimoire --plugin grimoireHow this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:apply-responsive-textThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use relative units and flexible layouts so text remains readable when users increase font size, zoom to 400%, or override text spacing — without horizontal scrolling or lost content.
Designs accessible typography systems using relative units, scalable type scales, and user-override-safe spacing. Useful for setting font sizes, line heights, and ensuring WCAG readability compliance.
Implements fluid typography using CSS clamp() with viewport-relative scaling, minimum readable sizes, and hierarchy across breakpoints.
Enforces typography rules—curly quotes, dashes, spacing, hierarchy—in HTML/CSS/React/JSX UI code. Auto-applies silently on generation; audits and fixes existing code.
Share bugs, ideas, or general feedback.
Use relative units and flexible layouts so text remains readable when users increase font size, zoom to 400%, or override text spacing — without horizontal scrolling or lost content.
Adopted by: WCAG 2.1 SCs 1.4.4, 1.4.10, and 1.4.12 are all Level AA — required by
Section 508 (US), EU EN 301 549, and UK PSBAR 2018. The UK Government Design System,
GOV.AU Design System, and US Web Design System all mandate responsive typography as a
core accessibility requirement. Apple HIG and Material Design both specify relative font
units as baseline for accessible typography.
Impact: 13% of people over 65 use browser zoom as their primary accessibility tool
(Nielsen Norman Group, 2023). Low-vision users who zoom to 400% will hit horizontal
scrollbars on fixed-width layouts — requiring them to scroll two dimensions, which is a
WCAG 2.1 AA failure. WCAG 1.4.12 was added after research showed dyslexia software
overriding text spacing consistently broke layouts that used fixed line heights.
Why best: px units in font-size and line-height override user browser font
preferences and break zoom/reflow. rem/em units inherit from and respect user
browser settings. Responsive text is a CSS architecture decision that must be made at
the foundation — retrofitting is expensive.
Sources: W3C WCAG 2.1 SC 1.4.4, 1.4.10, 1.4.12 (2018); Nielsen Norman Group Zoom study (2023); UK Government Design System typography guidance
rem for font sizes — never px alone/* Wrong — fixed px overrides user's browser font preference */
body { font-size: 16px; }
h1 { font-size: 32px; }
p { font-size: 14px; }
/* Right — rem respects browser default (typically 16px) */
:root { font-size: 100%; } /* inherits browser default, not override */
body { font-size: 1rem; } /* = browser default */
h1 { font-size: 2rem; } /* = 32px at default, scales with user preference */
p { font-size: 0.875rem; }
Setting html { font-size: 62.5%; } (10px base) undermines user preferences — avoid.
Use font-size: 100% on :root and rem everywhere else.
/* Wrong — px line-height breaks WCAG 1.4.12 text spacing override */
p {
font-size: 1rem;
line-height: 24px; /* fixed — breaks when font-size changes */
}
/* Right — unitless or em line-height scales with font size */
p {
font-size: 1rem;
line-height: 1.5; /* 1.5× the font size — scales automatically */
}
/* WCAG 1.4.12 minimum text spacing (must not break layout when applied): */
/* line-height: ≥ 1.5× font-size */
/* letter-spacing: ≥ 0.12em */
/* word-spacing: ≥ 0.16em */
/* paragraph spacing: ≥ 2× font-size */
Inject this CSS and verify no content is lost or clipped:
/* Text Spacing Test — apply as bookmarklet or browser devtools */
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }
Everything that was visible must still be visible. Truncated text (overflow: hidden
on a fixed-height container) is the most common failure.
400% zoom on a 1280px desktop = a 320px viewport. Content must reflow to a single column without horizontal scrolling:
/* Wrong — fixed widths cause overflow at 320px */
.container { width: 800px; }
.sidebar { width: 300px; float: left; }
/* Right — fluid layouts with max-width */
.container { width: 100%; max-width: 1200px; }
/* Right — CSS Grid/Flexbox that wraps naturally */
.layout {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.main { flex: 1 1 300px; }
.sidebar { flex: 1 1 200px; }
Test with: Chrome DevTools → device toolbar → set width to 320px. Or zoom browser to 400% and verify no horizontal scrollbar appears.
Exception: content that requires 2D layout to function (data tables, maps, complex diagrams) is exempt from WCAG 1.4.10 — but must still be scrollable.
1. Set browser font size to maximum (Chrome: Settings → Appearance → Font Size → Very Large)
2. OR zoom to 200% (Ctrl/Cmd +)
3. Verify: all text is still readable
4. Verify: no text is clipped, truncated, or overlapping
5. Verify: all interactive elements remain operable
Common failures:
min-height not height<canvas> is not affected by CSS zoom. If canvas text must be accessible, provide a text alternative outside the canvas.role="region" and aria-label.overflow: hidden on fixed-height containers with text. When a user increases text spacing or font size, text overflows the container and is clipped. Use min-height instead of height, or overflow: auto.
px in media query breakpoints. Browser zoom affects viewport width — a 320px media query breakpoint in px doesn't adjust with zoom. Use em-based breakpoints: @media (max-width: 20em).
Testing only at the default browser font size. Increase the browser's default font size in settings (not just zoom) to catch layout breaks that only appear when the base rem value increases.