guardian / guardian/dotcom-rendering

Incorrect font sizing on fronts when user set large default font size

Open
#13,381 1 comment 0 reactions 0 assignees View on GitHub
a11y fronts + curation
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

When on a mobile device using Chrome and the user has the font size set to large in their accessibility settings, then some of the kickers do not increase relatively in size with the rest of the content. In the screenshot below, this includes the "live" kickers and the inline kickers

On the surface this looks like a `px` instead of `rem` issue, but all font sizes look to be either inherited from a parent or defined in `rem`. This is only a problem on a mobile device, so you will not be able to reproduce by adjusting the viewport on your laptop. It also looks to only be an issue on Chrome - I tested both Safari and Firefox on mobile devices and both worked fine.

I have not found a solution to remedy this without causing design changes. For the inline kickers, changing the display from `inline-block` to `inline` does fixes the problem, but this causes the height of the kicker to change, which is not intended.

| | Mobile device, Chrome, font-size 2x | laptop, Chrome, font-size very large |
| - | - | - |
| | ![chrome] | ![other] |

[chrome]: https://github.com/user-attachments/assets/5c2bd6a1-d454-4c8b-b38f-29381d298fc2
[other]: https://github.com/user-attachments/assets/6d00c5c4-1f57-48d9-af1d-c46b10ad4799

Browsers affected:
- Chrome, Edge

Devices affected:
- Android, (unable to test on iOS Chrome)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.