Consider token parity for unpaired font sizes and line height

[jonathantneal]

The current tokens include font sizes from 2xl thru 6xl, while line heights only go from 2xl to 4xl. There are no line height tokens for 5xl or 6xl.

:where(:root) {
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
}

Conversely, there is a line height token for 2xs which does not have a corresponding font size.

:where(:root) {
  --line-height-2xs: 14px;
}

I recommend these tokens be removed or otherwise be given parity.

[markacianfrani]

Interesting that font.size.5xl is used on display-2 but it's using the line.height.3xl token.

and line.height.2xs doesn't appear to be used anywhere?

I agree though they should definitely match each other. I'll defer to @steveg-rocket here

[markacianfrani]

We might also want to add in the descriptions: "use with font-size-xl" etc.

[steveg-rocket]

This is hard to follow here on GitHub, as I don't have a frame of reference. However, on our Spacing Tokens page on Confluence we have a table with all of the text styles and associated line heights. It seems the token names have changed, so those are probably out of date on the confluence page. There are probably other styles/tokens that have been used by dev in the past that are no longer relevant or unknown to the design side.

[steveg-rocket]

Also, line heights are not necessarily tied to a single font size. So their descriptions need to be flexible to mention multiple font sizes or text styles in them.

[jonathantneal]

Thanks for the link, @steveg-rocket. At the time of my viewing, that page does not seem to include information about absolute value tokens, like font-size-5xl. Instead, the section on Updated Text Styles is indexed by an alias, like body-1 or display-1.

[steveg-rocket]

@jonathantneal Correct. I do not believe we had those values when the table was created. We probably need to update the page with correct and up to date values. Additionally, we might want to update the information that will go on the Typography page on astrouxds.com as well. That is the most important page.

[markacianfrani]

I think we should definitely do this or at the very least document the pairings better for developers?

Thinking of the use case of Tailwind for example. I just want to be able to use text-sm and wire up our font size/line height together.

Or we could draw a line and say no you have to use our composites like text-body-1 text-body-1-bold, which kind of breaks the ability use font-bold as a separate utility.

It's tough because our DS only talks about typography as a single unit