Research & plan updating font to Metric2

[SeamusLeonardHPE]

Description:

Evaluate strategies and create a plan to update our current font from MetricHPEXS to Metric2.

The purpose is to ensure we have visibility of potential impact on consistency, compatibility & legibility on components in Figma and Grommet.

Initial thoughts:

Grommet:
Create a visual diff in storybook with https://www.chromatic.com/
Developers document plan to serve new font on CDNs & update to HPE grommet theme.
Document the licence of the new font.

Figma:
How can we update text styles in figma and test in a sandbox/branch without impacting live components?
Process to check visual diff in Figma (any benefits in tooling when we get access to an enterprise account?)
If updating text styles in Figma is high risk, should we wait for figma to launch typographic variables in their roadmap where we will be able to create multiple text style sets?
Impact on any text not contained in an autoflow wrapper.
Initially leave all fonts the same size and weight & do a review?
Document our plan for testing and signing of any changes in font size or weight in components.

Potential issues:
X-height: Metric2 has larger x-height (screenshot below from typeface.app)
Solution - reduce/adjust font size across text styles - impact accessibility?
(Line height & baseline are the same)

Plan to check accessibility across various weights & font sizes in buttons

Plan for fonts in figma design files that are not using our text styles?
Figma plugin for replacing non styled text
https://www.figma.com/community/plugin/738840446766071906/Font-Replacer

Licensing

• - Confirm that we have the correct licensing to proceed

Create checklist of steps for figma

• - Preparation
• - Execution
• - Testing & feedback
• - Launch

Create checklist of steps for Grommet

• Preparation
• Execution
• Testing & feedback
• Launch

[KennyAtHPE]

To test text styles in Figma we could:

• Create a local file and create local text styles
• Pull in existing Figma components and manually swap out text styles

This allows us to easily compare the visual changes and it won't require us to push any changes in our current components.