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

Updated October 17, 2026

A lot of people read their phones with a larger text size than the default, whether because of eyesight, a small screen, or just comfort. When they open your site, one of three things happens: the text stays the same size, it grows and the layout adapts, or it grows and the layout breaks. This guide explains how text size settings reach the web on iPhone and Android, what the accessibility guidelines expect, and how to make your layout hold up.

How text size settings reach web pages

iPhone and iPad

The system text size on iOS (Dynamic Type) changes text in apps, but Safari doesn't apply it to ordinary web pages. A site only follows it if it uses Apple's system font keywords, such as font: -apple-system-body. What Safari users do have is page zoom in the "aA" menu, and a default zoom level in Safari settings, which scales the whole page, layout included. Pinch-zoom works too, which is why disabling zoom is a bad idea.

Android

Android has a system font size setting, and Chrome on Android has its own accessibility settings for text scaling or page zoom that can follow the system size. Depending on the browser version, text either grows on its own (including text set in px) or the whole page is zoomed. Other Android browsers have similar settings. Text-only scaling is the harder case for layouts, because fonts grow while boxes with fixed sizes don't.

Desktop browsers

Desktop browsers offer page zoom and a default font size setting. Page zoom scales everything; the default font size affects text sized in rem and em, but not text fixed in px.

What WCAG expects

• 1.4.4 Resize Text (AA): text can be resized up to 200% without assistive technology and without loss of content or functionality.
• 1.4.10 Reflow (AA): content works at a width of 320 CSS pixels without scrolling in two directions, which is what a desktop page looks like at 400% zoom.

In practice: bigger text may make the page longer, but nothing should be cut off, overlap, or require sideways scrolling. The W3C's Understanding Resize Text page explains the details.

How MobileCheck tests large text

Large text is one of the four scenarios MobileCheck runs for every device, along with the normal view, dark mode and the opened menu. We take each element's rendered font size and increase it to 150%, together with line heights set in pixels, while widths and heights stay as your CSS defines them. That mimics the harder case, text scaling, rather than page zoom. Then we screenshot the page and check for:

• Content wider than the screen: the page starts scrolling sideways.
• Text cut off: labels no longer fit their boxes.
• Overlapping text: text runs into other text.

We use 150% because it's a realistic everyday setting that already exposes most fragile layouts; if a page survives 150% cleanly, it's well on the way to the 200% that WCAG asks for.

Layouts that break, and how to fix them

Fixed heights

Buttons, cards, banners and headers with a fixed height are the number one cause. Text grows, the box doesn't, and the text is clipped or spills out. Use min-height and padding instead:

.button { min-height: 2.75rem; padding: 0.5rem 1rem; }
.card   { min-height: 20rem; }

Fixed widths and nowrap

Navigation bars and tab rows that fit perfectly at default size overflow at 150%. Allow items to wrap, or collapse them into a menu earlier:

.nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.nav a { white-space: normal; }

Pixel line heights

A line-height: 20px stays 20px when text grows, so lines collide. Use unitless values like 1.5; see line height and line length.

Breakpoints that ignore text size

Media queries in em respond to the user's default font size, while px breakpoints don't. Sizing fonts and spacing in rem means a larger default font size scales your whole typographic system consistently:

html { font-size: 100%; }          /* respect the user's default */
body { font-size: 1rem; }
h1   { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); }
@media (min-width: 48em) { /* layout change */ }

When using clamp() with viewport units, keep a rem part in the middle value. Font sizes in pure vw don't grow with text settings at all.

Absolutely positioned text over images

Hero text placed with fixed offsets runs off the image or into other text when it grows. Put the text in normal flow, or in the same grid cell as the image, so the container grows with it. The overlap and clipping guide has examples.

Icons and text side by side

Icons sized in pixels next to text sized in rem drift out of proportion as text grows, and a row with an icon, a label and a badge can run out of room. Size icons in em so they scale with the adjacent text, and let the row wrap or stack on narrow screens. Also check that the mobile menu still fits: a menu that was exactly one screen tall at default size may need to scroll at 150%.

How to check the fix

Run the free check and compare the large text screenshots with the normal ones for each device; a small phone like the iPhone SE is the toughest test. On your own Android phone, raise the font size in system settings and reload the page in Chrome. On iPhone, try Safari's page zoom at 150% and 200%. And on a desktop, zoom to 400% at a 1280px window to check Reflow.

Related guides