Browsers let people enlarge text or zoom the page, and a substantial number do. A site built with fixed sizes ignores the first and breaks under the second, which turns a preference the visitor already set into a page they cannot use.

Two different things people do

Worth separating, because sites can handle one and fail the other.

Zoom enlarges everything: text, images, layout. Every browser supports it and it is what most people use.

Text-only enlargement increases the size of text while leaving other elements alone. This is a browser setting people apply once and forget, meaning they arrive at your site with it already on.

A site using fixed pixel sizes for text ignores the second entirely. The visitor set a preference, the site overrode it, and they now have to zoom instead, which is a worse experience they did not ask for.

How many people this affects

More than the accessibility framing suggests.

Anyone over about forty is likely to have some degree of long-sightedness, which is a large share of the customers for most trades and professional services. Add anyone reading on a phone at arm's length, anyone on a high-resolution screen where defaults render small, and anyone in poor light.

The practical consequence is that the group affected by small text is not a minority. It is a substantial portion of the people with the property and the budget.

What breaks under zoom

Fixed-height containers

A box sized to fit its text at the default size overflows when the text grows, and depending on the settings the text is either cut off or spills over what is beneath it.

Horizontal scrolling

Layouts with fixed widths force the page wider than the screen when zoomed, so the reader has to scroll sideways to read every line. This is the single worst outcome and it makes a page effectively unusable.

Overlapping elements

Anything positioned absolutely relative to text that has now moved. Common in headers and hero sections.

Navigation collapsing wrongly

A menu that works at normal size and breaks at two hundred percent, which is a genuine problem since navigation is what a visitor needs most when they are struggling.

Blocked zoom entirely

A setting in the page can disable pinch zoom on a phone. It exists, it is still found on older sites, and it removes the visitor's ability to enlarge anything at all.

This one is worth checking specifically, since it is a single line and it is entirely preventable.

The build decisions that avoid it

None of these are additional work during a build. They are choices made once in the stylesheet, and retrofitting them into a site built the other way is considerably more effort than doing it correctly at the start.

The default size

Sixteen pixels or equivalent is a reasonable floor for body text, and slightly larger reads better for most small business audiences.

Text at twelve or fourteen looks refined on a designer's monitor and is genuinely difficult for a share of readers. Given who is buying, erring larger is the safer direction, and it costs nothing.

Secondary text such as captions and footers should not drop far below the body size. A footer at ten pixels containing your phone number is a phone number some visitors cannot read, which is a specific and avoidable loss.

Testing it

Two checks, both quick.

Zoom your own site to two hundred percent on a desktop browser and read a service page. Nothing should require horizontal scrolling, nothing should overlap, and the navigation should still work.

Then set your browser's minimum or default text size larger and reload. If nothing changes, the site is using fixed sizes and ignoring the setting.

On a phone, pinch to zoom on a page and confirm it is permitted at all.

Why this is not only an accessibility question

Everything above improves the site for people with no impairment at all.

A page with comfortable text, generous spacing, and a layout that reflows is easier to read on a phone in daylight, on a small laptop, and at the end of a long day. The changes that make a site survive zoom are the same ones that make it pleasant at normal size.

Which is the recurring pattern in this area, and the reason it is worth treating as ordinary build quality rather than as a separate obligation, as set out in why accessibility is a business issue.


Frequently asked questions

What is the difference between zoom and text enlargement?

Zoom enlarges everything including layout. Text enlargement is a browser setting that increases text only, which a site using fixed pixel sizes overrides entirely.

How many visitors does small text affect?

More than the accessibility framing suggests. Anyone over about forty is likely to have some long-sightedness, which is a large share of the customers with property and budget.

What breaks when someone zooms a page?

Fixed-height containers overflow, fixed-width layouts force horizontal scrolling, absolutely positioned elements overlap, and navigation sometimes stops working at higher zoom levels.

What is the minimum body text size?

Sixteen pixels or equivalent as a floor, slightly larger for most small business audiences. Footers at ten pixels containing your phone number are unreadable for a share of visitors.

Can zoom be disabled on a phone?

Yes, by a single line in the page settings, and it is still found on older sites. It removes the visitor's ability to enlarge anything and should always be removed.

How do I test this?

Zoom to two hundred percent and read a service page, checking for horizontal scrolling and overlap. Then increase your browser's default text size and reload to see whether anything changes.

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.

Site that falls apart when someone zooms in?

We rebuild the sizing and layout so it survives enlargement, which also makes it easier to read at normal size.

Start a Conversation