Background
Font modes have been added to Codex as of v2.0.0-rc.1. Codex components use various font-size, line-height, and size-icon tokens that point to CSS custom properties, and each font mode sets these CSS custom properties to different values to create a visually complete and consistent experience across font modes.
However, we’re not actually using the font modes in MinervaNeue/MobileFrontend, leading to inconsistent sizing of Codex components. Codex components use many different font-size, line-height, and size-icon tokens, which do not change with text size yet.
Additionally, the text size settings for MinervaNeue are hardcoded values inconsistent with Codex design tokens. They are also located in MobileFrontend (see resources/mobile.init.styles/mobile.less). Finally, the selectors and the names of the text size settings are different, making this confusing to maintain.
These issues will be resolved if MinervaNeue uses font modes for the different text size settings, meaning all tokens will scale properly and Codex components will appear as designed at the different text size settings. Ideally, these mixins would be used in MinervaNeue itself instead of MobileFrontend, but that may be out of scope for this task.
Font mode mapping
- The "standard" text size (.mf-font-size-clientpref-small) should use the medium font mode (16px)
- The "regular" text size (.mf-font-size-clientpref-regular) should use the large font mode (18px)
- The "large" text size (.mf-font-size-clientpref-large) should use the x-large font mode (20px)
Note that there is a .mf-font-size-clientpref-xlarge selector as well but this can potentially be removed if it's not used anymore.
Acceptance criteria
- Build a prototype that integrates Codex font modes into MobileFrontend text settings
- Test and update as needed
- Roll out the changes
- Carefully test the changes
Nice to haves:
- Unify text size setting names and selectors
- Remove the .mf-font-size-clientpref-xlarge selector if it's not needed
- Move the code from MobileFrontend to MinervaNeue