Background

DST is seeking to implement a standardized typographic scale based on CSS custom properties and REMs into Codex (similar to how color schemes for dark-mode have been implemented). The goal of this task is to scope out the work involved in adopting this new type scale in the Vector 2022 skin.

User story

• As a discerning reader, I expect consistency in font-sizes across the entire UI when reading Wikipedia
• As a developer and skin maintainer, using a centralized type scale that is shared between skins and extension will reduce bugs and maintenance costs by reducing duplication.

Requirements

In general, the current technical proposal involves moving away from generic font-size tokens like @font-size-small to ones with semantic meaning and values that correspond to CSS custom properties.
POC: https://gerrit.wikimedia.org/r/c/design/codex/+/1042373

current font size tokens

@font-size-small: 0.875rem; 
@font-size-medium: 1rem; 
@font-size-medium: 1.125rem;

Type scale proposal (for demonstration purposed, final values might change)
Proposed values https://phabricator.wikimedia.org/T369125

::root {
  --font-size-caption: 0.875rem;
  --font-size-body: 1rem;
  --font-size-heading: 1.125rem;
}

@font-size-caption: var(--font-size-body, 0.875rem);
@font-size-body: var(--font-size-body, 1rem);
@font-size-heading: var(--font-size-body, 1.125rem);

Acceptance criteria

Investigate the following:

• Identify where Vector 2022 uses custom font-size variables or hard-coded font-sizes
• Estimate the effort involved in converting the custom font-sizes to the proposed Codex tokens
  • Does the conversion involve switching to different units? (rems, em, or px?)
  • Are there Less math functions involved in the current font sizing that will have to be adjusted or removed?
• Estimate the effort of integrating the proposed type scale into Vector
• Investigate how to make Vector 2022's font-size customization feature compatible with the proposed type scale
• Create a strategy for implementing the type scale in Vector
  • Is this something we can do in one go?
  • Should/Can we do this incrementally?
  • Should we do a unit conversion first? or mimic the proposal in Vector with existing font-sizes?

This task was created by Version 1.2.0 of the Web team task template using phabulous