TWE Design System: Web Typography Standards Research

hackforla / internship

The Internship project provides an opportunity for students to work on open source projects in the fields of software, product development, project management, and UI/UX research and design at LA’s fastest growing Civic Tech non-profit organization during their summer.

GNU General Public License v2.0

14 stars 4 forks source link

TWE Design System: Web Typography Standards Research #528

Closed satokarina closed 1 month ago

satokarina commented 5 months ago

Overview

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

Action Items

[x] Research best practices and type scale for web typography from at least 3 different sources (ex: material design, adobe, etc.)
[x] Compile findings in the Figma file
[x] Review with Dev and other PMS
- [x] revise
[x] Make the Microsite page
[x] get signoff from Dev and other PMs
[x] 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 commented 5 months ago

check also: IBM Carbon, Salesforce Lightning System

karina-sato commented 4 months ago

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 commented 3 months ago

New type scale suggestion

karina-sato commented 3 months ago

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

karina-sato commented 2 months ago

Updates:

new typescale page for Hero section
changed the class names to describe the different styles
removed p-link because it will need other states. Suggestion: create a new issue to add "text button" in the variants of buttons

karina-sato commented 2 months ago

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 commented 1 month ago

The dev team accepts the microsite draft.