Screenshot gallery

Each pair shows a page at normal size and with the text doubled. Headings stay bigger than body text, pictures keep their size, and nothing needs sideways scrolling.

Real sites

Saved copies of real websites, shown on a phone.

Aftenposten

Norwegian news article — the original motivating example

Aftenposten: page at normal text size — Before

Aftenposten: the same page with text at 200% — After (2×)

Try it live

Hacker News

Dense, text-heavy page with minimal styling

Hacker News: page at normal text size — Before

Hacker News: the same page with text at 200% — After (2×)

Try it live

Wikipedia

Long reference article with mixed headings, tables and an infobox

Wikipedia: page at normal text size — Before

Wikipedia: the same page with text at 200% — After (2×)

Try it live

BBC News

International news article

BBC News: page at normal text size — Before

BBC News: the same page with text at 200% — After (2×)

Try it live

Peter Norvig: Teach Yourself Programming in Ten Years

Essay with no mobile layout: phones show it 980px wide, shrunk to fit

Peter Norvig: Teach Yourself Programming in Ten Years: page at normal text size — Before

Peter Norvig: Teach Yourself Programming in Ten Years: the same page with text at 200% — After (2×)

Try it live

Function demos

Small pages that each use one technique websites rely on to size their text. They double as the test fixtures: the automated test suite checks every one of them in Firefox and Chromium.

Plain px sizing

Plain px sizing: page at normal text size — Before

Plain px sizing: the same page with text at 200% — After (2×)

Try it live

Root-relative sizing (rem/em)

Root-relative sizing (rem/em): page at normal text size — Before

Root-relative sizing (rem/em): the same page with text at 200% — After (2×)

Try it live

Deeply nested em inheritance

Deeply nested em inheritance: page at normal text size — Before

Deeply nested em inheritance: the same page with text at 200% — After (2×)

Try it live

Open shadow DOM content

Open shadow DOM content: page at normal text size — Before

Open shadow DOM content: the same page with text at 200% — After (2×)

Try it live

Fixed-height container

Fixed-height container: page at normal text size — Before

Fixed-height container: the same page with text at 200% — After (2×)

Try it live

Stubborn !important styling

Stubborn !important styling: page at normal text size — Before

Stubborn !important styling: the same page with text at 200% — After (2×)

Try it live

Mixed line-height styles

Mixed line-height styles: page at normal text size — Before

Mixed line-height styles: the same page with text at 200% — After (2×)

Try it live

Large page (performance)

Large page (performance): page at normal text size — Before

Large page (performance): the same page with text at 200% — After (2×)

Try it live