Explore Metric2

[taysea]

Deploy Preview

What does this PR do?

This is a draft PR to be able to assess Metric2.

Setup:

• Use Metric2 fonts locally
  • The setup required use of NextJS 13 local font optimization to load the fonts, but this would
• Also, exploring use of rem as opposed to px for more modern behavior of font scaling based on browser settings

Notes:

• Metric2 has a bigger x-height, so the fonts appear "bigger" than before
• Because of the bigger x-height, the line heights also come across a bit tight compared to before
• The "bold" weight seems to be a little lighter than our current bold

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Related to #3522

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?