Build pages whose text can grow: relative font sizes, boxes that expand with their content, real text instead of images of text, and zoom left switched on. Then test at the largest setting.

The setting many customers change

Both iPhones and Android phones let people make text larger. On an iPhone the setting is under Display and Brightness, with bigger sizes again in the accessibility settings.

On most Android phones it is under Display, then Font size. Plenty of people turn it up the day they get a new phone and never think about it again.

They are often older customers, but not only. Anyone with tired eyes, reading glasses left at home or a phone held at arm's length on a job site has a reason.

A site that does not allow for them looks fine in the office and falls apart in their hands.

What the setting does to a web page

The effect depends on the phone and the browser, which is why problems go unnoticed.

Chrome on Android is where layouts break. The text grows, but boxes built to an exact height do not, so words are cut off, spill over buttons or vanish behind the next section.

Where pages break

A few habits in how pages are built cause most of the trouble.

Boxes with a fixed height, such as service panels or price cards, cut off whatever no longer fits. The last line is often the price or the button.

Menus designed to sit on one line wrap onto two or three and cover the top of the page.

Text set inside images, such as a price list saved as a picture or a banner with a headline in it, stays exactly the same size whatever the setting.

And side-by-side columns that looked balanced become narrow strips with one or two words per line.

Pages that block zooming

Some sites go further and stop people zooming at all, with a line of code in the page's header. It was often added to make a site feel more like an app.

For someone who cannot read the text at its normal size, that line removes the last way to read it.

Since iOS 10, Safari ignores the instruction and allows zooming anyway. Many other browsers still obey it, and Chrome on Android overrides it only if the visitor finds an accessibility option.

If your site has that line, have it removed. There is no good reason to stop a customer making your text bigger.

Building text that can grow

The fix is a set of habits rather than a single setting, and a competent developer applies them as a matter of course.

Font sizes are set in relative units, so they scale with the browser's own settings. Text fixed in pixels ignores the font size setting in computer browsers.

Boxes get a minimum height rather than a fixed one, so they grow with their content, and buttons are allowed to wrap onto two lines.

Prices, hours and service lists are written as real text, never saved as images. Real text also helps screen readers and search engines.

And the starting size is sensible. Body text equivalent to about 16 pixels on phones is a common baseline, and it reduces how often people need to enlarge anything.

A worked example

A snow removal company with four trucks and a crew of shovellers clears driveways, walkways and front steps in a hillside suburb. Many of its customers are retired homeowners who no longer want to shovel.

Its site showed the season's prices as a picture of a printed rate card, and each service sat in a box of fixed height with a sign-up button at the bottom.

On an Android phone with large text, the boxes cut off their last lines, button included. The rate card stayed small, and the page could not be zoomed because zooming had been switched off.

The office heard about it indirectly. Customers phoned to ask for prices that were on the site, and several said they had tried to sign up online and found no button.

The rebuild put the prices into a real table, gave each box a minimum height instead of a fixed one, set text sizes in relative units and removed the zoom block.

The owner then tested the sign-up page on his own phone at the largest font, and on his mother's iPhone, before calling it done.

Testing at the largest setting

Testing takes a few minutes and a couple of phones.

On an Android phone, set the font size to the largest option and open the main pages in Chrome. Look for cut-off text, overlapping sections and buttons whose labels have vanished.

On an iPhone, pinch to zoom on each page. On an iPhone still running iOS 9, a page that refuses to zoom is blocking it.

On a computer, zoom the browser to twice the normal size. WCAG 2.0 at level AA, the standard most sites aim for, expects text to be readable at that size without losing content or functions.

Forms and buttons first

If time is short, start where a lost line costs most: the contact form, the booking or sign-up page, and the checkout.

A paragraph that wraps awkwardly is a nuisance. A submit button cut in half, or a phone number pushed behind another element, ends the enquiry.

Check that form labels stay next to their fields at large sizes, and that error messages still appear on screen.

The counter-case

Not every layout can stay elegant at the largest text sizes, and it does not need to. The goal is that nothing is lost, not that every page looks exactly as designed.

A site whose visitors are mostly young and on computers will see fewer of these customers, though they exist in every audience.

A business can reasonably fix the pages that matter first and the rest at the next redesign. The principle stays the same: text that can grow, boxes that grow with it, and zoom left on.

Starting with your own phone

  1. Turn your phone's text to the largest size.
  2. Open your contact and booking pages on it.
  3. Look for cut-off lines and missing buttons.
  4. Try zooming every main page with two fingers.
  5. List any text saved as images.
  6. Ask for fixed heights to become minimum heights.
  7. Remove any setting that blocks zooming.

Step one is the one nobody does. The people who build and approve websites rarely use large text themselves, so the problem stays invisible until someone looks at the site the way these customers do.

The same customers struggle with weak contrast, as described in text too light on coloured backgrounds in emails.

Frequently asked questions

Does the phone text setting affect websites?

On Android, Chrome enlarges web page text to match. On iPhones, Safari leaves most pages at their own size, so people zoom with two fingers or use Reader view.

Why does larger text break a page?

Text grows but boxes built to a fixed height do not, so lines are cut off or spill over buttons. Text inside images does not grow at all.

Should a website block zooming?

No. Blocking zoom removes the last way some customers have to read your text. iOS 10 now ignores the block in Safari, but many browsers still obey it.

How should text be sized?

In relative units that scale with browser settings, from a sensible body size, inside boxes with minimum rather than fixed heights so they grow with their content.

How do I test my site?

Set an Android phone to its largest font and check the main pages, pinch to zoom on an iPhone, and zoom a computer browser to twice normal size.

Which pages should I fix first?

The contact form, booking or sign-up pages and checkout. A paragraph that wraps badly is a nuisance, but a cut-off button or hidden phone number ends the enquiry.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Customers squinting at your site on phones?

Send us the link to your site. We will try it at the largest text size and list what breaks.

Start a Conversation