Figma Design Library: Typography

[sabrinang]

Create and document styles in Figma.

• capture existing type as text styles and design tokens
• consider typography tokens for: Font families, Font weights, Font sizes, Line heights, Letter spacing, Paragraph spacing
• capture states (links, hover etc.)
• capture desktop and mobile versions
• capture light and dark versions
• clean up sizing to follow rem proportions
• clean up by adding new commonly used classes or removing uncommonly used classes
• document any usage or margin notes

Related to issue #765 & https://github.com/mozilla/foundation.mozilla.org/issues/6952 & https://github.com/mozilla/foundation.mozilla.org/issues/6985

[kristinashu]

Is this ok to close now that you have https://github.com/MozillaFoundation/Design/issues/1036?

[sabrinang]

• audited typographic styles by inspecting webpages and had met with Simon walking through styles in code
• captured font family, font weight, font size, line height, letter spacing, paragraph spacing, text case and text decoration elements as tokens via figma tokens plug-in and work in-progress typography figma page
• majourity of styles are captured but existing/new design decisions will be reviewed with the team and I will review them as I apply/create/test them in the composite design tokens for typographic styles as part of the following ticket as

Things to review & progress to note for following ticket:

• Font family: Review and decide token naming
  • example: names we create (primary font, body font etc.), inspired from tailwind utility class (sans, mono, display etc.) or names inspired by css font-family generic name syntax (serif, cursive, fantasy etc.)
• Font weight: Confirm desired range and italic options
  • Currently the largest range for weights we use is light 300 - black 900 for Nunito Sans, so I'm basing the tokens from that range but only 300-600 italics range are used on the site. Review if we want to capture the entire range of font weight italics and note that these options are for other font families too but keeping in mind that not all font families have available weights for use.
• Font size: Decide typographic scale, naming and what to do with existing outliers
  • After auditing the site we have a range from 12px-112px (including bespoke pages such as youtube findings and dear internet) using 25+ sizes across various breakpoints. Discuss if that is too many or less for our needs and perhaps removing odd number options.
• Line height: Review line height approach
  • I explored three types of scales (fixed pixel scale, stored em sizing token of 16px with math and percentage scale based on font size) and after testing I believe percentages is the most flexible with font size and close to what we have in code currently. Would we want an auto option or is it unnecessary if our range covers options?
• Letter spacing: Review
  • I followed tailwinds naming and scaling and is currently mainly used in h6 so I don't believe we need a broad range.
• Paragraph spacing: Review
  • I've mainly noticed 16px spacing after type sections so I stored one token for this but more may be added if needed in the future
• Text case: Review
  • included the three we use (capitalize, uppercase, none)
• Text decoration: Review
  • included two that we use (underline, none)

Closing and continued work and review in issue #1036