Define the system's typographic scale (font sizes and line-heights)
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Sarai-WMDE
	Apr 12 2022, 2:20 PM

Description

Background/Goal

We need to define and document Codex's typographic scale. The system's type scale is made out of reusable text styles that result from combining system font sizes with their appropriate, corresponding line heights.

User stories

As a designer, I need to have access to the system's typographic scale, so I'm aware of which font styles I can apply, and where, when creating system compliant designs.

Figma specification sheet

Typographic style

Acceptance criteria (or Done)

We are able to document each one of the text styles that compose the system's typographic scale:
- font sizes
- line heights

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.2.2 to v0.3.0	mediawiki/core	master	+2 K -1 K
tokens: Amend design-first `line-height` tokens to latest	design/codex	main	+31 -3
Update Codex from v0.2.1 to v0.2.2	mediawiki/core	master	+1 K -1 K
tokens: Add design-first `line-height` tokens	design/codex	main	+15 -2

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		• STH	T302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
Invalid		None	T302025 Upgrade Codex to Beta version
Resolved		Volker_E	T293127 [EPIC] Design System Foundation: Design and define design tokens
Resolved		None	T314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
Resolved		bmartinezcalvo	T295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
Resolved		Volker_E	T296995 Define the system's color palette
Resolved		Volker_E	T297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
Resolved		Volker_E	T305236 Create visited red link color token
Resolved		Volker_E	T313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
Resolved		ldelench_wmf	T322833 Update Yellow 600 for warning color
Resolved		Volker_E	T324449 Add new colors used in Message component and update border colors to the darkest tone
Resolved		• EUdoh-WMF	T322960 Define `accent-color` design token
Resolved		Sarai-WMDE	T296998 [Epic] Define the system's typographic styles and scale
Resolved		• DAbad	T305920 Define the system's sans, serif and monospace typefaces
Resolved		Volker_E	T305947 Define the system's typographic scale (font sizes and line-heights)
Resolved		bmartinezcalvo	T321470 Use the system's typographic scale tokens (font size and line-heights)
Resolved		Sarai-WMDE	T297000 Define the design system's size and spacing scale
Resolved		Catrope	T324367 Enable Codex tokens to work with different font sizes
Open		None	T326900 Vertical centering issues of text/multiline text and icons in several components
Resolved		ovasileva	T328053 Verify impact of Design Systems Team's Codex Update on Web properties
Resolved	BUG REPORT	Volker_E	T329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
Resolved		Volker_E	T297001 Define the system's opacities
Resolved		Volker_E	T305084 Add 0.3 opacity
Resolved		Volker_E	T297003 Define the system's box shadow styles
Resolved		Volker_E	T310409 Button: Simplify focus styles application including `box-shadow`
Resolved		Sarai-WMDE	T297007 Define the system's iconography
Resolved		Volker_E	T300562 Define Border tokens
Resolved		bmartinezcalvo	T302181 Define the system's cursors
Resolved		Catrope	T304443 Document Motion tokens (animations and transitions)
Resolved		• DAbad	T303522 Decide on CSS breakpoints for the design system
Resolved		Volker_E	T322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Sarai-WMDE created this task.Apr 12 2022, 2:20 PM

Sarai-WMDE mentioned this in T296998: [Epic] Define the system's typographic styles and scale.

• STH edited projects, added Design-System-Team; removed Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint).Apr 15 2022, 7:13 PM

• STH moved this task from Inbox to Backlog on the Design-System-Team board.Apr 30 2022, 4:33 PM

• STH triaged this task as High priority.May 1 2022, 1:20 PM

• STH moved this task from Backlog to Design-System-Sprint on the Design-System-Team board.May 14 2022, 1:34 AM

• STH edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

• STH moved this task from Committed to Ready for Design on the Design-System-Team (Design-System-Sprint) board.

Sarai-WMDE moved this task from Ready for Design to In Design on the Design-System-Team (Design-System-Sprint) board.May 25 2022, 1:55 PM

• STH changed the task status from Open to In Progress.May 26 2022, 1:16 AM

ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).Jun 3 2022, 6:21 PM

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.

Sarai-WMDE edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Jun 21 2022, 4:24 PM

Hey @Sarai-WMDE , wanted to check in and see if this task was still in progress, or if it would be helpful to break down further? Thanks!

Volker_E updated the task description. (Show Details)Jul 24 2022, 8:08 PM

The Typographic scale is caring for font-size and line-height tokens and is currently in v5 exploration phase. It doesn't necessarily make sense to further split this up as the two properties are intertweened and co-dependent.
We've prioritized other topics in the meantime and wanted to go in a big round of designers to support the decision making here, as it's one of the most prominent design attributes.

Status update: We're working on v7 of the current typographic styles proposal. The goal is to document this initial proposal* as Figma styles and apply them to Codex and OOUI components (as part of T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries). I think we should close this task once styles are both documented and applied (the latter can help us detect inconsistencies and require changes).

Making the typographic styles available for designers to use in their Figma files is going to help us detect needed improvements, which we could document in separate tasks.

*We tried to create a set of unified styles based on the designs and previous decisions made in our code libraries. We consider this an initial proposal/step because reaching a point where we're able to consolidate the extensive amount of typographic styles in all our projects is going to be a long, iterative process.

Pulling back into backlog since the task hasn't seen any action in >1 month; feel free to adjust.

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint). · View Herald TranscriptSep 16 2022, 9:08 PM

@ldelench_wmf The conversations have all been happening on DS design sync, other Slack conversations and the Figma proposal itself. We're currently already on v10 of typographic styles proposal, latest update yesterday.

From DS design sync: We've agreed on putting option token line-height-100: 1.6 as normalized base.

Change 834403 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Add design-first `line-height` tokens

https://gerrit.wikimedia.org/r/834403

gerritbot added a project: Patch-For-Review.Sep 23 2022, 12:09 AM

Change 834403 merged by jenkins-bot:

[design/codex@main] tokens: Add design-first `line-height` tokens

https://gerrit.wikimedia.org/r/834403

Maintenance_bot removed a project: Patch-For-Review.Sep 23 2022, 6:30 PM

Volker_E updated the task description. (Show Details)Sep 23 2022, 10:05 PM

Change 848169 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Amend design-first `line-height` tokens to latest

https://gerrit.wikimedia.org/r/848169

gerritbot added a project: Patch-For-Review.Oct 24 2022, 7:44 AM

Volker_E mentioned this in T321470: Use the system's typographic scale tokens (font size and line-heights).Oct 24 2022, 7:58 AM

ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:36 PM

Volker_E moved this task from In Design to Ready for Development on the Design-System-Team (Design-System-Sprint) board.Oct 24 2022, 4:31 PM

Change 849191 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.2.1 to v0.2.2

https://gerrit.wikimedia.org/r/849191

Change 849191 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.1 to v0.2.2

https://gerrit.wikimedia.org/r/849191

Volker_E updated the task description. (Show Details)Oct 28 2022, 6:42 AM

Volker_E updated the task description. (Show Details)Oct 28 2022, 6:48 AM

Volker_E updated the task description. (Show Details)

Change 848169 merged by jenkins-bot:

[design/codex@main] tokens: Amend design-first `line-height` tokens to latest

https://gerrit.wikimedia.org/r/848169

Maintenance_bot removed a project: Patch-For-Review.Oct 31 2022, 6:30 PM

Sarai-WMDE removed Sarai-WMDE as the assignee of this task.Nov 7 2022, 3:17 PM

Change 859597 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

https://gerrit.wikimedia.org/r/859597

gerritbot added a project: Patch-For-Review.Nov 22 2022, 6:58 PM

Change 859597 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

https://gerrit.wikimedia.org/r/859597

Maintenance_bot removed a project: Patch-For-Review.Nov 22 2022, 7:32 PM

Catrope edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).Dec 5 2022, 5:51 PM

Catrope moved this task from Backlog to Up Next on the Design-System-Team board.

Volker_E renamed this task from Define the system's typographic scale (sizes and line-heights) to Define the system's typographic scale (font sizes and line-heights).Dec 23 2022, 5:53 PM

Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

Ha, one task that wasn't mentioned most importantly in https://gerrit.wikimedia.org/r/c/design/codex/+/871022/
Design-first font size tokens are in now!

Volker_E assigned this task to bmartinezcalvo.Jan 23 2023, 10:18 PM

Volker_E moved this task from Ready for Development to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.

bmartinezcalvo reassigned this task from bmartinezcalvo to Sarai-WMDE.Jan 24 2023, 12:16 PM

Sarai-WMDE updated the task description. (Show Details)Jan 26 2023, 5:46 PM

v13 of the typographic styles' proposal reflects the latest stable version of Codex font styles.
These have been documented as Figma styles in our Design tokens library, and used to style both the Codex and OOUI design components (See T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries). Lastly, font sizes and line-heights have also been incorporated as design tokens in our library.

Given that this first iteration of the typographic scale has been both documented, applied and implemented consistently, I'd say that this ticket can be signed-off from a design point of view.

(As previously mentioned, the attempt to consolidate all existing font styles in the Wikiverse will be a long, and necessarily iterative process. This is our first step in that undertaking.)

Sarai-WMDE reassigned this task from Sarai-WMDE to Jrbranaa.Jan 26 2023, 6:07 PM

Sarai-WMDE reassigned this task from Jrbranaa to • DAbad.

Sarai-WMDE moved this task from Design Sign-Off to QTE Sign-off on the Design-System-Team (Design-System-Sprint) board.

Sarai-WMDE moved this task from QTE Sign-off to Product Sign-Off on the Design-System-Team (Design-System-Sprint) board.

Sarai-WMDE added a subscriber: Jrbranaa.

Volker_E moved this task from Product Sign-Off to Pending Release on the Design-System-Team (Design-System-Sprint) board.Feb 13 2023, 3:22 PM