Revise type hierarchy

[Scotchester]

Describe the problem to be solved

The current heading scale in our design system should be revised to be smaller overall, so that we can make proper use of the full scale without faking the sizes down.

Background:

• The JPL external website has long supported only one semantic heading level, H2, but those headings are all presented as our "Heading H5" style.
• Similarly, H1s are styled as H2s.
• On WCP, all heading levels are styled as one level below (H5s are not available).
• On WWW, we've now implemented the option to choose other semantic heading levels in order to support the content needs of future press kits. When trying to use these with the heading scale as designed, it results in some headings that feel too large for the length of the content. One h3 in the sample content even gets to five lines!
  

Our specific history aside, a design system's web type hierarchy should be designed such that a page can have all possible heading levels on it, all at a comfortable size, and all feeling distinct enough from each other. That is the driving principle behind this issue, in my opinion.

Suggested solution

One potential approach that we discussed yesterday would be to start from the bottom and work up: Looking at the body text (our WWW and WCP default of text-body-lg (22px), specifically), what is the smallest possible H5 that would feel appreciably distinct from the body copy? (The answer to that may still be the current H5 size, 24px.) Then, moving up to H4, what is the smallest possible H4 that would feel different enough from the H5? And so on up the hierarchy.

The resulting scale should, in particular, have an H2 style that the JPL external website team is comfortable changing all of their StreamField headings (currently styled as H5s) to.

Open questions

• Should we add H6 to the scale?
• Should we not add H6 and also remove H5 from the scale, limiting ourselves to just H2, H3, and H4 within body content?
• Should we consider other style changes besides just size (e.g., weight), which might make it easier to make headings close in size more distinct from each other?

[Scotchester]

Reference chart of our current type sizes across all breakpoints:

https://docs.google.com/spreadsheets/d/1Vzb7Jg5X6-_nH5KoGEli1uw__ZMQsMMYbNAQ-Iz7fmc/edit

(Should open to a chart of pixel values; chart of rem values is available on the second tab.)

[Scotchester]

Noting for the record the modular scale devised by @gekim84 after extensive research and testing:

Not pictured: no changes to Subtitled or body type sizes under Body Large.