conduct viability assessment for heading sizes

[MikeWalrath]

Please take a look at the below proposal and evaluate the viability of an algorithmic approach (Grommet) vs hard coded values.
https://www.figma.com/file/oJhw3JqMemtbwWjlLPWW5O/HPE-Typography-Styles?node-id=541%3A0

For reference, this is how the design system text sizing was initially implemented (I believe the hard coded values came from this calculation): https://github.com/grommet/hpe-design-system/pull/62/files#diff-413a4b94bc47b0c7dfac6fe49ff6d52911c1af858f97f7024220a941a2cf1c74R6

https://codesandbox.io/s/heading-level-default-evvho?file=/index.js

[ericsoderberghp]

Here are some notes on what I've found so far.

grommet's font scale is driven by generate() -> fontSizing(n). The argument n indicates a scale factor above the base font size, which defaults to baseSpacing * 0.75, with baseSpacing defaulting to 24 yielding a base font size of 18px.

• grommet starts Heading level 4 at fontSizing(0), regardless of size. This doesn't seem like the right approach, as size="large" still results in a font size of 18px for level 4. The large size levels use 18, 34, 50, 82 font sizes, which seems too much scaling between levels.

The two aspects to how Heading font sizes are scaled are the starting scale factor for level 4 and then the scale delta as the level decreases. For instance, grommet's defaults have a starting scale factor delta of 0, they all start at 0.

• small - font sizes: 18, 22, 26, 34, scale factors: 0, 1, 2, 4, scale delta: 1, 1, 2 (inconsistent)
• medium - font sizes: 18, 26, 34, 50, scale factors: 0, 2, 4, 8, starting delta: 0, scale delta: 2, 2, 4 (inconsistent)
• large - font sizes: 18, 34, 50, 82, scale factors: 0, 4, 8, 16, starting delta: 0, scale delta: 4, 4, 8 (inconsistent)

The current HPE theme is hard coded to:

• small - font sizes: 22, 27, 31, 36
• medium - font sizes: 27, 36, 44, 53
• large - font sizes: 31, 44, 58, 88

CCS Option 1 has a starting scale factor delta of 1.5, 3 (linear)

• small - font sizes: 18, 24, 30, 36, scale factors: 0, 1.5, 3, 4.5, scale delta: 1.5
• medium - font sizes: 24, 32, 40, 48, scale factors: 1.5, 3.5, 5.5, 7.5, scale delta: 2
• large - font sizes: 36, 48, 60, 72, scale factors: 4.5, 7.5, 10.5, 13.5, scale delta: 3

CCS Option 2 has a starting scale factor delta of 1.5, 3 (linear)

• small - font sizes: 18, 22, 26, 32, scale factors: 0, 1, 2, 3.5, scale delta: 1, 1, 1.5 (inconsistent)
• medium - font sizes: 24, 30, 36, 42, scale factors: 1.5, 3, 4.5, 6, scale delta: 1.5
• large - font sizes: 36, 44, 52, 60, scale factors: 4.5, 6.5, 8.5, 10.5, scale delta: 2

If we change CCS Option 2 small h1 to be 30 (scale factor 3) it will be fully consistent.

Both Options 1 and 2 use the same starting scale factor sequence: 0, 1.5, 4.5. This seems like a better idea than grommet's current approach of not varying the h4 font size across Heading size.

Option 1 increases the scale delta quadratically (0.5 -> 1) which results in a wider spread of sizes.
Option 2 increases the scale delta linearly (0.5) which results in a narrower spread of sizes.

From conversations with @L0ZZI, it seems like designers are finding the current HPE theme size medium to be too large and size small to be a bit too small. Size large doesn't seem to be considered, as it is even bigger. So, we should probably change to a set of sizes where "medium" heading font sizes are between the current HPE theme small and medium sizes. Option 1 medium is less than current medium but closer to it than current small. Option 2 medium is greater than current small but closer to it than current medium. I have asked @L0ZZI for further input on which option might be better.

My current inclination is towards Option 2 as its narrower band of sizes will result in designers being less likely to be frustrated at not being able to find a size that works for them. The current behavior of disregarding the large size entirely seems to indicate that we've gone too wide a band of sizes. I'd rather have the majority case be designers choosing the t-shirt sizes and only for exceptional occasions specifying a custom larger size.

[ericsoderberghp]

The one change I would recommend in the published Option 2 is to change the small level 1 to be 30 instead of 32. That would result in the font sizes being fully consistent.

[ericsoderberghp]

Here is a theme showing the Option 1 sizes: https://theme-designer.grommet.io/Typography?id=HPE-Heading-option-1-eric-soderberg-hpe-com

Here is a theme showing the Option 2 sizes: https://theme-designer.grommet.io/Typography?id=HPE-Heading-option-2-eric-soderberg-hpe-com

[abbyperez]

The GLC Platform team has been overriding our code to use header-small. The regular header sizes don't fit the webapp experience and feels really big. I attached a screenshot of one of our pages with the default header sizes. We're running into an issue right now that we have to manually override these header text sizes to fit the experience we want, but that becomes difficult because other service teams will have to manually change it too.

Looking at option 1 and 2, it looks like the option 2, header-small, would fit what we need at GLC.