What is text scaling (large text) on mobile?

Glossary · Updated October 23, 2026 · Also called: large text, font scaling, Dynamic Type, text resize

Definition Text scaling is enlarging text through the phone's or browser's accessibility settings instead of pinch-zooming. Many people use a larger default size. WCAG 2.2 success criterion 1.4.4 Resize Text (AA) requires that text can be resized up to 200% without losing content or functionality, so layouts must grow with the text instead of clipping or overlapping it.

How to fix it: How to test your website with large text on iPhone and Android

How does text scaling reach web pages?

It depends on the platform and browser:

• iPhone. The system text size (Dynamic Type) changes text in apps, but Safari doesn't apply it to ordinary web pages. A page follows it only if it uses Apple's system font keywords such as font: -apple-system-body. Safari users enlarge pages with page zoom in the "aA" menu or a default zoom in settings, which scales the whole layout.
• Android. Android has a system font size, and Chrome on Android has its own accessibility settings for text scaling or page zoom that can follow it. Depending on the version, text grows on its own, including text set in px, or the whole page is zoomed.
• Desktop. Page zoom scales everything; the default font size setting affects text in rem and em, not text in px.

Text-only scaling is the hard case for layouts: fonts grow while boxes with fixed sizes stay the same.

What breaks with large text?

• text cut off by boxes with a fixed height or overflow: hidden;
• lines overlapping because line-height is set in pixels;
• navigation and button rows that can't wrap and push the page sideways (horizontal scrolling);
• labels truncated with an ellipsis so they no longer make sense.

Example

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 1rem; line-height: 1.5; }   /* unitless line-height */
.card { min-height: 12rem; }                  /* min-height, not height */
.nav { display: flex; flex-wrap: wrap; gap: .5rem; }

text-size-adjust stops the phone's own font boosting from changing your sizes when rotating; it doesn't block the user's text settings, and none should never be used, because it can prevent zooming text in some browsers.

How MobileCheck checks it

MobileCheck loads each page a second time with text at 150% and runs the same checks, so clipped text, text drawn on top of other text and content wider than the screen show up exactly where large text causes them. WCAG asks for 200%; test that on a real phone as well.

Related terms

• WCAGWCAG is the W3C standard for accessible web content. The current version, WCAG 2.2, has testable criteria at levels A, AA and AAA; AA is the usual target.
• Horizontal scrollingHorizontal scrolling happens when content is wider than the viewport, so a phone page can be dragged sideways. WCAG Reflow forbids it at 320 CSS px.
• CSS pixelA CSS pixel (px) is the unit of length in CSS: 1/96 of an inch by definition, drawn with several device pixels on high-density screens.
• Viewport meta tagThe viewport meta tag tells mobile browsers how wide to lay out a page. width=device-width, initial-scale=1 makes it fit the phone's own width.

Guides and tools

• How to test your website with large text on iPhone and Android
• Text overlapping or cut off on mobile
• Mobile font size calculator
• Mobile Resilience Index

Sources

1. W3C: Understanding SC 1.4.4 Resize Text
2. Apple Human Interface Guidelines: Typography

All 27 glossary terms, A to Z