a11y | Fonts are not scaling on magnification

[scottqueen-bixal]

What's expected

Font sizes should adjust proportionately to relative scale

This could impact scaling issues when users zoom/magnify the screen

reference: https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

What happened

Beta release has fixed font sizes using an absolute length unit, px

Attachments

How to replicate

Chrome: Open Settings or Preferences and change the font size to Very large or Very small.

Example at "Very Large"

[scottqueen-bixal]

// USAGov font ratio is based on 16px
// for example h1 @ 2.44rem = 39.04px

// Our conversions
// 36px = 2.25rem
// 32px = 2rem
// 24px = 1.5rem
// 22px = 1.375rem
// 20px = 1.25rem
// 17px = 1.063rem
// 16px = 1rem
// 15px = 0.938rem

[angelina-smith]

Reviewed this on https://bf-cms-dev.bxdev.net/benefit-finder/death# environment and it looks good to go!