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]

check also: IBM Carbon, Salesforce Lightning System

[karina-sato]

One of the most popular methods for creating a type scale is the Modular Scale. The Modular Scale uses a base number (usually 16) multiplied by 1.125 to calculate various sizes. We round the multiplied numbers to the closest even number for practical reasons. Usually, the type styles have 4-5 levels: display, heading, title, body, label.

The defined type scale for our design system has 4 headings, 5 paragraphs, 2 links, and 3 subtitles. The subtitles are the same size as the paragraphs - which doesn't create a proper hierarchy for the design system.

Proposal: rename paragraph 4 and 5 to captions; add display type level, adjust subtitle sizes to differentiate from paragraphs

[karina-sato]

New type scale suggestion

[karina-sato]

updated Figma link: https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=4407%3A2026&mode=design&t=0gJx7SRrPtBp0YyJ-1