h1 font size should be in rem for browser font size scaling

[randimays]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Slack thread for context: https://dsva.slack.com/archives/C01DBGX4P45/p1726850241972959

What I expected to happen

Font size for <h1> element should be in rem so it will scale with browser font size settings and zoom.

Reproducing

• Go to va.gov/find-locations
• Shrink the screen down to mobile view (<=481px)
• Change your browser font size settings:
  • Chrome: Settings > Appearance > Font size
  • Firefox: Settings > Language & Appearance > Fonts
  • Edge: Settings > Appearance > Fonts
• Notice the <h1> ("Find VA locations") does not scale appropriately with the browser font size settings.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [x] This bug is not blocking any work
• [ ] Other

[randimays]

In general, font sizes should all be in rem so they will scale appropriately with browser font size settings. Per Laura Flannery:

Yes, it's important that fonts are able to resize according to the user's specific setting, it's especially important for when the user is using a larger than typical setting. A 24px heading is always going to be 24px regardless of my font settings but a 1.5rem heading will become larger. according to what I need/would like to use for my own site viewing purposes

[jamigibbs]

Some things we might want to check:

1. Formation: https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/mobile-typography.scss
2. CSS Library: https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/css-library/src/stylesheets/mobile-typography.scss
3. Documentation Site: https://design.va.gov/foundation/typography#semantic-typography-tokens
4. Header Utility classes: https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/css-library/dist/stylesheets/utilities.css

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc