TWE Design System: Web Typography Standards Research

[satokarina]

Overview

The research will guide our web typography standards ensuring accessibility, consistency, and readability throughout our website.

Action Items

• Research best practices and type scale for web typography from at least 3 different sources (ex: material design, adobe, etc.)
• Compile findings in the Figma file
• Review with Dev and other PMS
  • revise
• Make the Microsite page
• get signoff from Dev and other PMs
• add to Design System> Ready for Dev

Resources/Instructions

• "Material Design" (https://m3.material.io/styles/typography/type-scale-tokens)
• "Adobe" (https://spectrum.adobe.com/page/typography/)
• "Apple" (https://developer.apple.com/design/human-interface-guidelines/typography)
• Microsite figma pages
• Microsite Ready for Dev figma page

[karina-sato]

Updated the type scale according to Major Third rule (x 1.250) adjusted to a 4-pixel system, base 16px. Divided the type scale into Body Section and Hero Section.

Link to type scale: https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=4763%3A3948&mode=design&t=cmjqTUJOXhV9dYip-1
Link to microsite: https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=4763%3A3580&mode=design&t=cmjqTUJOXhV9dYip-1

@joshfishman Does the microsite meet Dev needs?

[ExperimentsInHonesty]

The dev team accepts the microsite draft.