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 Vector 2022, leading to inconsistent scaling of Codex components. In Vector 22, only --font-size-medium and --line-height-medium scale with the text size user setting, but Codex components use many different font-size, line-height, and size-icon tokens, which do not change with text size yet. This leads to issues like a too-small line height at the large text size, input chips not scaling within ChipInputs, and others.

These issues will be resolved if Vector 2022 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. We want to evaluate the effects of using Codex font modes to determine the level of effort it'll take to implement this.

Prototypes

The prototype should use the font modes mixins exported by Codex to set up font mode CSS custom properties by default and for the different text size options. See this early proof of concept as an example.

We're currently using an unstable CSS class, no-font-mode-scale, to exclude certain areas of the UI from scaling with text size. We should also discuss longer-term solutions:

1. Only scale text size in the content area, where we actually want scaling
2. Make the exclusion class stable for use

Prototype 1: font mode integration

This prototype integrates the Codex font modes into Vector 2022, setting the small font mode by default:

• Patch Vector/+/1144634
• Patchdemo 1144634,3

Prototype 2: font mode integration + limit text size switching

This prototype integrates the Codex font modes into Vector 2022, setting the small font mode by default, and limits text size switching to the .vector-body class, eliminating the need for excluding parts of the interface from scaling with the text size setting:

• Patch Vector/+/1144635
• Patchdemo 1144635,4

Testing

We should look at the following:

• Whether the "chrome" of the site scales with text size. Everything outside of content should remain the same size when the user changes text size. If that's not the case, we should evaluate the level of effort to prevent scaling in unwanted places.
• Whether there are unexpected visual changes in any in parts of the interface. We're particularly concerned about the fact that the large text size currently uses a unitless value for line height and will move to using the equivalent rem value. UIs to test:
  • The Vector 22 "chrome" (header, sticky header, sidebars, page title and toolbar)
  • Interfaces that use Codex (login form, messages in content, special pages built with Codex)
  • Interfaces that use OOUI (preferences page, special pages built with OOUI)
  • More?
  • Run pixel tests locally

Findings

• Vector uses @font-size-small for many elements in the chrome of the site. This is currently 0.875rem by default. Once the chrome of the site uses the small font size, however, we will need to change these tokens to @font-size-medium, which in the small font mode has a value of 0.875rem.
• Source editor scales with text size

---

Acceptance criteria

• Build a prototype that integrates Codex font modes into Vector 2022, including the text size options
• Prototype and discuss long-term solutions to excluding parts of the UI from scaling
• Document test findings and level of effort/risk to actually do this work