| CCiufo-WMF | |
| Apr 30 2024, 4:19 PM |
| F54181204: type-variables-ezgif.com-video-to-gif-converter.gif | |
| May 23 2024, 2:23 AM |
Based on our latest proposal to create a new type scale with specifically defined font-size and line-height combinations, and to then adapt components to adjust padding and therefore sizing based on different body font size options, we need to explore how each component changes based on these varying font scales.
| 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 | T363846 Explore different ways Codex components could behave with different font "modes" |
The type scale defined in T363850 has been tested in Figma, exploring how components can proportionally adapt to different body font sizes. This testing provided examples for body font sizes of 14, 16, 18, and 20 and a sample can be seen below.
Although explored in all 4 existing font modes, we are currently considering building for 14 and 16 in an MVP and focusing our attention on the elements outside of the article body. This MVP will address how components and a type scale are handled in a skin and screen size agnostic way, but adapt to where the body font size is set to 14 or 16, i.e. Vector and MinervaNeue, and typically on desktop and mobile screen sizes.
This proposal would introduce new primitive and component tokens to handle the adaptability of body font sizes, laid out in this spreadsheet.