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.
| Codex | Vector | Minerva | |||||
| Small | Standard | Large | Standard | Medium | Large | ||
| h1 | 28/35 | 28.8/39.6 (collapsed 24/24) | 28.8/39.6 (collapsed 24/24) | 28.8/39.6 (collapsed 24/24) | 27.2/37.4 | 27.2/37.4 | 27.2/37.4 |
| h2 | 24/30 | 21/28.875 | 24/33 | 30/41.25 | 24/33 | 24/33 | 24/33 |
| h3 | 20/25 | 16.8/26.88 | 19.2/30.72 | 24/38.4 | 19.2/26.4 | 19.2/26.4 | 19.2/26.4 |
| h4 | 18/22.5 | 14/22.4 | 16/25.6 | 20/32 | 16/22 | 16/22 | 16/22 |
| h5 | 16/20 | 14/22.4 | 16/25.6 | 20/32 | 16/22 | 16/22 | 16/22 |
| h6 | 14/22.4 | 14/22.4 | 16/25.6 | 20/32 | 16/22 | 16/22 | 16/22 |
| body | 16/25.6 & 14/22.4 | 14/22.4 | 16/25.6 | 20/30 | 16/26.4 | 18/28.8 | 20/30 |
| small | 12/19.2 | 12.6/19.8 | 14.4/23.04 | 18/27 | 14.4/23.76 | 14.4/23.04 | 14.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.
| Small | Medium (default) | Large | X-Large | |
| h1 | 26/36 | 28/38 | 30/40 | 32/42 |
| h2 | 22/32 | 24/34 | 26/36 | 28/38 |
| h3 | 18/28 | 20/30 | 22/32 | 24/34 |
| h4 | 14/22 | 16/26 | 18/28 | 20/30 |
| h5 | 14/22 | 16/26 | 18/28 | 20/30 |
| h6 | 14/22 | 16/26 | 18/28 | 20/30 |
| body | 14/22 | 16/26 | 18/28 | 20/30 |
| small | 12/20 | 14/22 | 16/26 | 18/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
- T358038: Discuss how to handle font-size tokens in different skins with different base font sizes
- T338598: Update Typography guidelines in Codex Style guide
- T333890: Implement typographic public mixin
- T358485: Codex Fonts: update them to match the Brand updates
- T360092: [spike] Identify small default content area pages
- T344515: Typography: Audit font sizes across Vector 2022 and Minerva
- T320906: Text for "You have a new talk page message" does not get larger when the page font size is made larger