Background
Concept/prep
- A revised type scale is formulated T358723
- Web team reviews and approves of the revised type scale across the various Text Appearance user preferences T369125
- DST determines to set font-size and line-height in px values, then transform them into rem values according to the Codex 16px base size T358038
Set up
- Option tokens are added for font-size and line-height which do not yet exist for revised type scale values
- Previous font-size and line-height application tokens are deprecated and new tokens are added
- small, medium, and large JSON files are created (tokens are built and modes are created)
- Public typography mixins are created and made available T333890
Implementation
- Components are updated to use mixins/line-heights
- Calculations are made to be used in height, padding, and margin in order to maintain proper sizing and spacing per component
- For now, some elements will scale with the change in font-size or line-height:
- No scaling singularly interactive elements yet — will rely on responsive work for this decision (e.g. Buttons and Inputs)
- Yes scaling for other components which rely on padding (e.g. InfoChip)
- Yes scaling for information dense components (e.g. Table rows)
- Yes scaling for interactive elements which are usually grouped (e.g. Accordion and MenuItems)
- Icons use calculations to scale proportionally to changing font-sizes
Usage
- Teams/projects can import the mode files and/or mixins and use them as desired, either set to a fixed mode for a project (e.g. small for Wikifunctions) or used to enable user customization base don preference (i.e. Appearance Text settings in Vector and Minerva)
- Usage of deprecated Codex font-size and line-height tokens are not affected
Acceptance criteria
- Publish an ADR on the summary of this approach
Related work to be done
Create page to test type scale and font modes T386298
Update all text on Codex docs site T387244
Update Style Guide/Typography page on Codex docs site T338598
Create font mode switcher on Codex docs site T359884
Replicate type scale and update components in Figma T386299