Standardize header sizes, fonts, weights

cloud-gov / cg-ui

for the 2024 18F-supported cloud.gov product UI formerly known as the Stratos Dashboard

Other

3 stars 0 forks source link

Standardize header sizes, fonts, weights #470

Open echappen opened 2 weeks ago

echappen commented 2 weeks ago

Adjust USWDS theme settings to set new global header sizes, fonts, and weights:

Acceptance Criteria

[ ] Header settings match design

beepdotgov commented 1 week ago

Hey @echappen, I did a quick inventory of our current heading styles. (It…didn’t take long!) Here’s what I found:

Basically, we’ve got four text styles we could reasonably classify as “headings”. It’s possible we’ll need to expand on that eventually (potentially in #477), but that’s where we are today!

echappen commented 1 week ago

@beepdotgov Thanks! Are you thinking these are mapped to specific heading levels? (Like, Page Title will always be an H1?) Or should we make it so that any style could be applied to any heading level?

echappen commented 1 week ago

For context, here are the theme settings I know of that apply to headers globally:

$theme-font-role-heading (default is "serif" but dashboard uses "sans")
$theme-heading-line-height (using default)
$theme-h1-font-size (using default)
$theme-h2-font-size (using default)
$theme-h3-font-size (using default)
$theme-h4-font-size (using default)
$theme-h5-font-size (using default)
$theme-h6-font-size (using default)

beepdotgov commented 1 week ago

These are fantastic questions — thanks, @echappen!

Are you thinking these are mapped to specific heading levels? (Like, Page Title will always be an H1?) Or should we make it so that any style could be applied to any heading level?

Ideally, it’d be the latter: I don’t see these as tied to specific levels in the page, but to specific functions. But if that makes implementation challenging, I’d be happy to talk through a different strategy.