Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Page MenuHomePhabricator
Create Task
Maniphest T305947

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

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

SubjectRepoBranchLines +/-
Update Codex from v0.2.2 to v0.3.0mediawiki/coremaster+2 K -1 K
tokens: Amend design-first `line-height` tokens to latestdesign/codexmain+31 -3
Update Codex from v0.2.1 to v0.2.2mediawiki/coremaster+1 K -1 K
tokens: Add design-first `line-height` tokensdesign/codexmain+15 -2
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 Resolved• Sarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 ResolvedVolker_ET305947 Define the system's typographic scale (font sizes and line-heights)
 ResolvedbmartinezcalvoT321470 Use the system's typographic scale tokens (font size and line-heights)
 Resolved• Sarai-WMDET297000 Define the design system's size and spacing scale
 Resolved• CatropeT324367 Enable Codex tokens to work with different font sizes
 OpenNoneT326900 Vertical centering issues of text/multiline text and icons in several components
ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 Resolved• Sarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 Resolved• CatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 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
ldelench_wmf subscribed.Jul 22 2022, 5:48 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
Volker_E added a comment.Jul 24 2022, 8:12 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.

• Sarai-WMDE added a comment.EditedAug 11 2022, 3:09 PM

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.

ldelench_wmf added a comment.Sep 16 2022, 9:08 PM

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
Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Sep 16 2022, 9:29 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.

Volker_E added a comment.Sep 23 2022, 12:03 AM

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

gerritbot added a comment.Sep 23 2022, 12:09 AM

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
gerritbot added a comment.Sep 23 2022, 5:37 PM

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
gerritbot added a comment.Oct 24 2022, 7:44 AM

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
gerritbot added a comment.Oct 25 2022, 11:01 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

gerritbot added a comment.Oct 25 2022, 11:35 PM

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)
gerritbot added a comment.Oct 31 2022, 6:02 PM

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
gerritbot added a comment.Nov 22 2022, 6:58 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
gerritbot added a comment.Nov 22 2022, 7:23 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.
Volker_E added a comment.Jan 23 2023, 10:17 PM

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
• Sarai-WMDE added a comment.Jan 26 2023, 6:07 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
Volker_E closed this task as Resolved.Feb 13 2023, 3:30 PM
Volker_E claimed this task.
Volker_E added a subscriber: • DAbad.

All resolved with Codex v0.3.0

• Catrope closed subtask T321470: Use the system's typographic scale tokens (font size and line-heights) as Resolved.Mar 9 2023, 7:48 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits