Change HPE theme to brand Metric font

[ericsoderberghp]

A long time ago ...
In a sprint week far far away ...
We decided to address some issues we were having with the HPE Metric font by making our own font files. This caused some unexpected side effects and we would like to go back to using the original HPE Metric font. But, what about the issues we were having with it you ask? Well, that's what this ticket is about.

• determine what issues we were fixing before
• come up with alternative means of addressing them without changing the font: @samuelgoff has some explorations with font optimizations that will be able to apply to Next apps and also other frameworks
  • Connect with Sam Goff about font optimizations #3010
• identify any necessary grommet changes to support this.
  • This seemed to be the main grommet related action item: Change to have viewbox fit the graphic grommet-icons#287
• switch grommet-theme-hpe to use the brand font: Use Brand Central font versions grommet-theme-hpe#288

[samuelgoff]

🎉

[taysea]

Tracking the work, rationale, and recommendation in this FigJam: https://www.figma.com/file/yEueZRtVp6AuofGfzwb055/MetricHPE-Font?node-id=0%3A1

[ericsoderberghp]

Can you also try with a label that has lowercase descenders, like "jgqyp"? I'm curious to see how those will align.

[taysea]

Can you also try with a label that has lowercase descenders, like "jgqyp"? I'm curious to see how those will align.

I've added that to the label "This label big jump" -- let me know if you have any concerns.

[ericsoderberghp]

Can you also try with a label that has lowercase descenders, like "jgqyp"? I'm curious to see how those will align.

I've added that to the label "This label big jump" -- let me know if you have any concerns.

When I zoom in and use a rule, the Windows with MetricHPE looks a hair too low and the Mac with MetricHPEXS looks a hair too high. All that to say that I don't think MetricHPE is overall worse and would be fine with switching it to it now.

I seem to recall Sam Goff suggesting that we could do something in CSS to improve alignment but I cannot remember what it was.

[taysea]

When I zoom in and use a rule, the Windows with MetricHPE looks a hair too low and the Mac with MetricHPEXS looks a hair too high. All that to say that I don't think MetricHPE is overall worse and would be fine with switching it to it now.

I would agree re: alignment. Readability is definitely improved with MetricHPE -- so net positive to me.

I seem to recall Sam Goff suggesting that we could do something in CSS to improve alignment but I cannot remember what it was.

I have a meeting scheduled on Thursday with Scott, Matt, Chris, Sam and myself to discuss font stuff. I'll bring the topic up to see if Sam has suggestions.

[taysea]

Follow ons:

• Connect with Sam Goff about font optimizations #3010
• Change to have viewbox fit the graphic grommet-icons#287

[taysea]

Update here: Chris is going to reach out to Robert Folk's team to find out who is managing the fonts on the CDN.

[samuelgoff]

Update here: Chris is going to reach out to Robert Folk's team to find out who is managing the fonts on the CDN.

Hey @taysea These fonts are not actually CDN'd. They are being served up over HTTP/1.1 😱 from https://h50007.www5.hpe.com/hfws-static/fonts/metric-hpe/.

Also, I have a HPE Fonts app in progress that will add CDN'ing, as well as make standardization & adoption among teams a no-brainer.

[taysea]

Got it, Chris connected with Bob Folk and he's going to direct towards whichever team is currently managing. Once we have that info, I'll connect with you to see how your work might fold in here.

[ericsoderberghp]

What are the specific font weights and variations that we need?

[samuelgoff]

What are the specific font weights and variations that we need?

Hey @ericsoderberghp that's the thing: we should be using lazy-loading such that only fonts that actually get used on a page or in a view get loaded. I see the following getting loaded, en toto:

• 300 (light)
• 400 (regular)
• 500 (medium)
• 600 (semibold)
• 700 (bold)
• 800 (black)

That may actually expand if we browse other HPE properties, but if we're using lazy-loading, it won't impact performance.

[halocline]

What are the specific font weights and variations that we need?

From a CDN standpoint, I think we will likely want to serve the full spectrum of font weights from thin to black. Specifically:

• Thin / 100
• Light / 300
• Normal / 400
• Medium / 500
• Semi-bold / 600
• Bold / 700
• Black / 900

The type ramp being explored primarily is making use of 300, 400, 500, and 900 weights.

However, adding all weights allows for future flexibility and very minimal extra storage cost. I do not see a need for adding italic variants at this time, but again, minimal incremental cost in doing so.

[samuelgoff]

Hey @halocline I agree: cover the full monty. It's all of 2¢ (if that) to cover all the variants.

One clarification: Black is 800, Ultra Black or Extra Black is 900. The Brand Central version includes Black (800), but not Ultra Black (900).

It also does not include Ultra Light / Extra Light (200), which is why it's omitted from both of these lists.

[halocline]

Hey @halocline I agree: cover the full monty. It's all of 2¢ (if that) to cover all the variants.

One clarification: Black is 800, Ultra Black or Extra Black is 900. The Brand Central version includes Black (800), but not Ultra Black (900).

It also does not include Ultra Light / Extra Light (200), which is why it's omitted from both of these lists.

I see. I guess I was thinking we'd follow common mapping conventions (MDN, OpenType).

Soft opinion.

[samuelgoff]

I see. I guess I was thinking we'd follow common mapping conventions (MDN, OpenType).

No worries. I got this from MDN, which gets it from OpenType, but they vary slightly on the labels for those last 2. Actually, upon looking at it again, MDN seem to have updated this list to include 950, adding even more to the confusion.

I personally prefer MDN's scale for web fonts, but when sourcing & self-hosting custom fonts, I will sometimes make a judgement call about the weight that the foundry calls it versus what it actually IS, and adjust the stylesheet accordingly.

[samuelgoff]

I feel like I'm taking crazy pills. I could've sworn I JUST looked at the MDN and black was 800. I stand corrected. Sorry, @halocline. This is why I shouldn't be working when I have the flu & a fever 🤪

[taysea]

Friday status summary:

• Followed up with Artur via email, but he is out of office until Jan 9.

[taysea]

Friday 1/13/23 update:

• Artur replied to our email, he is going to work on getting the woff2 files and will send update when completed

[taysea]

1/23/22 -- followed up with Artur via email.