Page MenuHomePhabricator

[EPIC] Typography scale and font sizing
Closed, ResolvedPublic

Description

Problem

There are inconsistencies in how elements within Codex behave in different skins and between Figma and code. This has led to confusion between design and engineering and raised questions about what the expected behavior should be. There is also a Codex typographic scale that is not widely used and differs from the font preferences recently made available in the Vector 2022 and MinervaNeue skins.

By resolving these inconsistencies and centering our projects around a single type scale, we will provide a solid foundation for the design system, making it easier to use and maintain for designers and engineers.

Before

Landscape of font sizes and line heights identified from an audit in T363850. All values are in px.

CodexVectorMinerva
SmallStandardLargeStandardMediumLarge
h128/3528.8/39.6 (collapsed 24/24)28.8/39.6 (collapsed 24/24)28.8/39.6 (collapsed 24/24)27.2/37.427.2/37.427.2/37.4
h224/3021/28.87524/3330/41.2524/3324/3324/33
h320/2516.8/26.8819.2/30.7224/38.419.2/26.419.2/26.419.2/26.4
h418/22.514/22.416/25.620/3216/2216/2216/22
h516/2014/22.416/25.620/3216/2216/2216/22
h614/22.414/22.416/25.620/3216/2216/2216/22
body16/25.6 & 14/22.414/22.416/25.620/3016/26.418/28.820/30
small12/19.212.6/19.814.4/23.0418/2714.4/23.7614.4/23.0414.4/21.6

Goals

  • Vector 2022 and MinervaNeue use the Codex typographic scale.
  • Codex components can be scaled to the needs of a MW skin based on the skin's default (body) font size.
  • Designers using Codex can expect their Figma mock ups to translate predictably into implementation in code without having to design for specific skins.
After

Proposed streamlined typography scale of font sizes and line heights coming from Codex. All values are in px.

SmallMedium (default)LargeX-Large
h126/3628/3830/4032/42
h222/3224/3426/3628/38
h318/2820/3022/3224/34
h414/2216/2618/2820/30
h514/2216/2618/2820/30
h614/2216/2618/2820/30
body14/2216/2618/2820/30
small12/2014/2216/2618/28

Principles

  • Codex should be MediaWiki-agnostic, but still support MediaWiki use cases.
  • The default behavior should be predictable and easy to understand.
  • It should be possible to override the default behavior.

Related / Past Work

Related Objects

StatusSubtypeAssignedTask
Resolved Sarai-WMDE
OpenNone
StalledNone
OpenBUG REPORTNone
ResolvedDTorsani-WMF
ResolvedDTorsani-WMF
ResolvedDTorsani-WMF
ResolvedDTorsani-WMF
ResolvedAnneT
ResolvedSpikeegardner
ResolvedJdrewniak
ResolvedAnneT
Resolvedgengh
ResolvedVolker_E
Resolvedegardner
Resolvedbmartinezcalvo
ResolvedDTorsani-WMF
OpenNone
ResolvedDTorsani-WMF
ResolvedVolker_E
ResolvedVolker_E
ResolvedAnneT
ResolvedVolker_E
ResolvedVolker_E
ResolvedSpikeAnneT
OpenNone
OpenNone
OpenNone
OpenNone
In ProgressAnneT

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
CCiufo-WMF triaged this task as Medium priority.May 28 2024, 5:26 PM
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF changed the task status from Open to In Progress.Jul 4 2024, 5:17 PM
CCiufo-WMF changed the task status from In Progress to Stalled.Sep 5 2024, 2:20 PM

Waiting on feedback from the Web team before moving this forward again.

CCiufo-WMF raised the priority of this task from Medium to Needs Triage.
CCiufo-WMF moved this task from Next to Parking Lot on the Design-System-Team (Roadmap) board.
CCiufo-WMF added a subscriber: DTorsani-WMF.

We'll need to pick this up at a more appropriate time when coordination with work in the skins is a priority.

CCiufo-WMF changed the task status from Stalled to Open.Feb 13 2025, 9:15 PM
CCiufo-WMF assigned this task to DTorsani-WMF.
CCiufo-WMF triaged this task as Medium priority.
CCiufo-WMF moved this task from Parking Lot to Next on the Design-System-Team (Roadmap) board.
CCiufo-WMF changed the task status from Open to In Progress.Mar 4 2025, 4:10 PM
CCiufo-WMF raised the priority of this task from Medium to High.
CCiufo-WMF moved this task from Next to Now on the Design-System-Team (Roadmap) board.
CCiufo-WMF lowered the priority of this task from High to Medium.Mar 12 2025, 6:03 PM
CCiufo-WMF raised the priority of this task from Medium to High.Mar 17 2025, 5:09 PM

Here's an update on the overall status of the font modes work:

  • Current status: Font mode mixins were added to Codex in v2.0.0-rc.1 and are currently in MediaWiki core, but the mixins aren’t being used in most skins and there are some line-height workarounds in place that need to be removed.
  • Line height workarounds: See T391017. These workarounds should be removed once fixes are in place.
  • Skins:
    • Vector 22:
      • We need to use the font mode mixins for each text size setting. See T393739.
      • We could either continue to apply text size settings to the html element and then exclude the “chrome” of the site (see PoC 1) or only apply text size settings to the content, where we actually want things to scale (see PoC 2).
      • This will need to be carefully tested and there may be other updates in the skin needed to make it work properly across the UI.
    • MinervaNeue:
      • We need to use the font mode mixins for each text size setting. See T396513.
      • The code that sets up the text size settings on mobile could be improved. Nice-to-have improvements are noted in the task.
      • This will need to be carefully tested and there may be other updates in the skin needed to make it work properly across the UI.
    • MonoBook: the small mixin is used to ensure that Codex components appear at a 14px base font size (close to MonoBook’s 12.7px). No more action needed. See T392253.
    • Vector legacy: needs a similar solution to MonoBook. Currently, Codex components appear at 16px. See T394685.
DTorsani-WMF updated the task description. (Show Details)