Explore improving the text-only zoom experience for GOV.UK Frontend

[owenatgov]

What

Explore applying em sizing to all spacing on GOV.UK Frontend to theoretically improve the text-only zoom experience for components and styles.

Why

Whilst GOV.UK Frontend is built to accomadate standard browser zoom and provide a good experience for zoom users, browser also include features to "zoom" text only ie: increase the size of the text on the page but not the viewport ala standard browser zoom. The experience for text only zoom currently isn't great, with text often getting squashed within width containers that don't grow and reflow with the larger text.

Examples

Using the Check your answers full page example.

Chrome's default text size increase (set to Very Large):

Safari's text zoom (roughly 400%)

Firefox's text only zoom (roughly 400%)

Previous issues

• Icons don't resize with text #1569
• Back link's arrow and border do not scale #1717

Where we've tried to tackle this already

• Refactor back link and breadcrumb chevrons to use ems #2998
• Make form elements scale correctly when text resized by user #1574

Assumptions

• Using em sizing will provide a good experience for text only zoom users
• Replicating the appearance and behaviour of standard browser zoom in text only zoom is useful
• Replicating the appearance and behaviour of standard browser zoom in text only zoom is feasible

Timebox

1 sprint

Questions to answer

• What is the impact of replacing all instances of px with em or the govuk-em mixin?

Done when

• Questions have been answered or we have a clearer idea of how to get to our goal
• Findings have been reviewed and agreed with at least one other person
• Findings have been shared, e.g: via a write-up on the ticket, at a show & tell or team meeting