Background

The font modes work includes changing line-height tokens from being unitless to being in rems. This will mean using the same t-shirt scale for both font-size and line-height tokens (e.g. text with font-size-xxx-large should use line-height-xxx-large.

As a result, some typography will need to use different line-height tokens than they currently do. For example, see the page title here. The font size is around 28px and line-height-xx-small is used. This made sense when that token was unitless, but now the line-height is far too small. This token should be updated to the new line-height-xxx-large (and the font-size should be font-size-xxx-large.

Not all instances of line-height tokens used in the wild will cause issues. Only ones where the following are true.

• The project does not define the line-height token itself.
• The line-height token is being used with a font-size token that is not semantically the same name, or a font-size equivalent to what a token would represent (line-height-medium with font-size-medium is not problematic).
• font-size and line-height tokens are explicitly defined and do not one of the current exception combinations:
  • font-size-x-small and line-height-xxx-small
  • font-size-small and line-height-xx-small
  • font-size-medium and line-height-xx-small
• The line-height token is not above the size of medium, as anything larger did not previously exist in Codex.
• The token is not in a toolforge or data-engineering repo, as the maintainers of these projects can update to Codex 2.0 at their convenience following the breaking changes guide.

Solution

We need to replace the line-height tokens being used in various areas with the correct intended line-height token based on the font-size being used. We should understand each case where we know line-height tokens are being used, present fixes for the repos we are able to (such as skins), and notify the others (such as extensions).

However, some of these tokens don't exist yet, and won't exist until the font modes work is merged. To avoid the need to create patches with dependencies, we will create a temporary workaround by hardcoding token overrides in skin variables in Vector 2022, legacy Vector, and Monobook:

@line-height-xx-small: 1.375;
@line-height-medium: 1.6;

This will override the Codex tokens to their original values, preventing regressions. Once the font modes work is released and deployed to core, we will begin updating features to the proper tokens. Once that is complete, we will remove the overrides from skin variables.

The way we want to do this is to introduce the suggested/intended line-height tokens in a stand-alone patch which use the same values as the currently used line-height tokens, then merge and test this. The font modes patch would then just be overriding these line-height tokens with the new pixel/rem values.

Alternative considerations

We also considered:

• Introducing the new line-height tokens in a stand-alone patch which use the same values as the currently used line-height tokens, then merge and test this. The font modes patch would then just be overriding these line-height tokens with the new pixel/rem values.
• Going back to unitless line-height tokens.

Audit

It's possible that some or many of these instances where the font-size is not explicitly listed are already an intended combination. We would need to verify what the font-size is in these instances to determine the correct line-height.

Additionally, there are a couple instances in Vector where certain tokens are being overwritten to account for adjustments based on user preferences in the Appearance/Text size settings. These instances (such as this one) do not need to be changed at this time, but are exactly the places where font modes could are intended to be used in place of this.

Working with the text size switcher

The font modes work will change the Less variable @line-height-medium from pointing to a raw, unitless value to pointing to a CSS custom property, var( --line-height-medium ). This conflicts with the --line-height-medium custom property in Vector that is used to change the line height when text size changes. Without the overrides in skin variables, --line-height-medium becomes self-referential and therefore nothing. You can see this by viewing the text on the main page of this patchdemo when you select the "standard" text size - the text loses its line height and becomes squished.

When we remove the workarounds from skin variables, we will need to update CSSCustomProperties.less in Vector to account for this and ensure the font-size and line-height for all text sizes work properly. We may be able to simply remove the lines that assign --font-size-medium: @font-size-medium and --line-height-medium: @line-height-medium.

Acceptance criteria

• Add override tokens to skin variables for Vector 2022, Vector, MinervaNeue, and Monobook

Future work:

• T391014: Font modes: Update line height tokens in skins and features
• T391017: Font modes: remove line-height workaround