Headings

[bspeare]

Revisit heading sizes and spacing. We often get reports that the <h2> sizing is too large and site editors often try to skip this level for a smaller heading. Let's work to adjust our typography hierarchy and provide layout examples.

Heading sizes

• Revisit heading sizes and spacing.
  • https://typescale.com/ - minor third?
  • https://baseline.is/tools/type-scale-generator/
  • https://typescale.net/

Work with the brand team to develop this sizing and provide best practice layout examples in the UIDS showcase for headings.

Heading spacing

• Heading spacing when used over lists vs. inline with text?
  • See Line-height on block headlines and WYSIWYG headings creates inconsistent spacing when used together uiowa#8346 and More space between page title and first block (text area) uiowa#7884 as issues needed to be solved.

Fluid headings

• Confirm headings are following best practices for fluid typography: https://moderncss.dev/container-query-units-and-fluid-typography/.
• See how https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:heading could be useful.

[bspeare]

It sounds like the heading hierarchy sizing is going to be a part of the brand refresh project. I will update this issue when we have some progress there.