Improve rendering of MetricHPE

[taysea]

This ticket is intended to track work related to improving the rendering/alignment of MetricHPE. Reopening this work based on this slack thread: https://hpe.slack.com/archives/C04LMJWQT/p1686071250418569

The end goal of this work is to:

1. Have the font render as cleanly as possible across browsers and viewports.
2. Have the font render with the correct vertical positioning so it is visually centered with icons and other visual elements.
3. Have approval from both marketing and product teams on the direction (key stakeholders tbd)
4. Ideally, continue to consume the font from an HPE domain to have consistency of fonts across business units

Previous discussions and work can be found below:

• https://github.com/grommet/hpe-design-system/issues/2990
• https://github.com/grommet/hpe-design-system/issues/2080
• https://github.com/grommet/hpe-design-system/issues/2854
• https://www.figma.com/file/yEueZRtVp6AuofGfzwb055/MetricHPE-Font?type=whiteboard&node-id=0-1&t=xXXmJ7lkFn1ayFBu-0

TLDR from previous discussions:

• MetricHPE = official version of font supported by brand central
• MetricHPEXS = version of font created to try to solve some baseline issues in MetricHPE
• MetricHPEXS introduced legibility issues for i/j on certain browsers
• In order to resolve the legibility issues, grommet-theme-hpe reverted to use of MetricHPE
• Given this, some of the baseline misalignments with other elements like icons still exists and should be solved for

Avenues to explore:

1. Explore potential CSS solutions that use the current version of MetricHPE but tweak font-size, line-height, etc. combinations to achieve the desired presentation
2. Work with brand to contact a foundry that can produce an improved version of the font

Tasks to be done in the near term:

• Add flag in grommet-theme-hpe that turns on grommet functionality of text-rendering: auto and -webkit-font-smoothing: antialiased Removing, @samuelgoff shared this did not have improvement even at the sub-pixel level

[samuelgoff]

Hey @taysea, thanks for creating this 🙏🏼 Note that I did a test with adding those 2 CSS rules I had previously recommended, and with regards to the font rendering on the primary button at 19 or 19.5px, toggling them on/off did not make a measurable difference, even at the sub-pixel level. I think it's safe to say we can cross that off the list in terms of potential mitigations with this specific font.

[taysea]

Related to https://github.com/grommet/hpe-design-system/issues/3392