Dynamic type is specced in every design system. Almost no one visualizes what actually happens when a user cranks their font size to Accessibility XL.
~27%of iOS users change their default type size
7Dynamic Type sizes above the default
0Design reviews that show Accessibility XL
The Problem What we're missing in every design review
The spec says use Dynamic Type.
The spec says support Dynamic Type. The component gets built. The Figma file shows one size. Nobody ever checks what happens at Accessibility XL. Then a user with low vision opens your app.
190%
Maximum type scale at Accessibility XL5 — nearly 2× the default font size
1screen
The single Figma frame almost every designer reviews — Default size, light mode
1 in 5
Americans have a disability — many depend on accessibility text sizes daily
A button that looks perfect at Default
can completely break at Accessibility Large.
We just never showed anyone.
One Button, Every Size The same primary button rendered at five Dynamic Type settings
Live Scale Drag or select — watch the button respond
Primary Button — Dynamic Type Simulation
Default — 100%
Live preview
Text fits — no overflow
Computed values
font-size17px
btn height44px
line-height1.0
statusPass
DefaultAX5
Why it breaks Two common mistakes, and the fix
Mistake 1
The label gets cut off
Locking text to one line with white-space: nowrap means that at large sizes the words run past the edge and disappear. The button still looks tappable — but the label is gone, and no one notices in design review.
Mistake 2
The button can't grow
A fixed height: 44px can't stretch to fit bigger text. The label spills out of the button or gets clipped — and neighboring elements get shoved around.
The fix
Let it size to its content
Swap fixed pixels for min-height and em units, and let text wrap. The button grows with the type and the layout flexes around it — nothing clips, nothing hides.
The Right Token Model What the spec should actually say
Button — Dynamic Type Token Schema8 tokens
Token
Wrong value
Correct value
At AX3
btn.height
44px
min-height: 2.5em
Adapts
btn.font-size
16px
1rem (system-relative)
Scales
btn.padding.v
12px
0.7em
Scales
btn.padding.h
24px
1.4em
Scales
btn.white-space
nowrap
normal (allow wrap)
Wraps
btn.line-height
1.0
1.2 (accommodate caps)
Readable
btn.border-radius
8px
0.5em
Proportional
btn.icon-size
20px
1.2em
Scales
What value this brings
Richer component documentation
Design and tech docs could show a component live across every accessibility view, not just one static frame — making the spec something you see, not just read.
Live prototype environments
Scale a real screen to any accessibility size on the fly — instantly see where content slips below the fold, where layouts expand, and where things break.
Beyond type, into vision
Imagine the same screen viewed through color-blindness simulations or quick translations — catching where contrast fails or longer copy reflows before it ships.