Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | • Sarai-WMDE | T322383 TypeaheadSearch line-height, thumbnail size don't match Figma spec or each other | |||
| Open | None | T322384 Increase MenuItem / TypeaheadSearch line-height | |||
| Stalled | None | T372653 Font size setting should apply consistently across mobile and desktop | |||
| Open | BUG REPORT | None | T387983 Select dropdown for the "Reason" field in Codex Special:Block has text not in the center of the element | ||
| Resolved | DTorsani-WMF | T363845 [EPIC] Typography scale and font sizing | |||
| Resolved | DTorsani-WMF | T363850 Revisit Codex Typography scale |
Event Timeline
Similarly to what was found in an audit previously conducted as a part of T344515, we found a variety of slightly different type styles across Codex, Vector, and MinervaNeue. Below is a current audit including the most up to date font modes across the listed skins.
Reading the table:
font-size/line-height
In Vector, the h1 scales down into a fixed header when the page is scrolled. The second set of numbers is the value of the h1 when in the smaller fixed header after the page is scrolled.
h5 and h6 for the skins was determined uncertain when conducting the audit on the web, but can be filled in later.
| Element | Codex | Vector/Small | Vector/Standard | Vector/Large | MN/Standard | MN/Medium | MN/Large |
| h1 | 28/35 | 28.8/39.6 • 24/24 | 28.8/39.6 • 24/24 | 28.8/39.6 • 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 | ? | ? | ? | ? | ? | ? |
| h6 | 14/22.4 | ? | ? | ? | ? | ? | ? |
| body | 16/25.6 / 14/22.4 | 14/22 | 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 |
A current proposal, which has been tested and refined in Figma, attempts to find middle ground between all skin font modes and what was intended when the original scale was designed in Codex. It also prioritizes the most commonly used font sizes and line heights—the body size in both Vector and MinervaNeue Standard. It unifies the type scale across modes, and creates a uniform pattern for the scale between font-size and line-height as font-size increases by 2 starting at 12 and ending at 32, i.e. font-size + 8px for line-height at sizes 12 and 14, font-size + 10px for line-height at sizes 16 and 18, and font-size + 12px for line-height at sizes 20 and beyond.
| Element | 14/Small | 16/Standard | 18/Medium | 20/Large |
| h1 | 26/38 | 28/40 | 30/42 | 32/44 |
| h2 | 20/32 | 22/34 | 24/36 | 26/38 |
| h3 | 16/26 | 18/28 | 20/32 | 22/34 |
| h4 | 14/22 | 16/26 | 18/28 | 20/32 |
| h5 | 12/20 | 14/22 | 16/26 | 18/28 |
| h6 | - | - | - | - |
| body | 14/22 | 16/26 | 18/28 | 20/32 |
| small | 12/20 | 14/22 | 16/26 | 18/28 |
This newly proposed type scale influences how components scale as a part of T363846 and could potentially be implemented in Vector and MinervaNeue font mode options. The type scale and potential font tokens/mixins can also be found portrayed in this spreadsheet.
The next step with work is to begin prototyping in code, which will be apart of a new task.