Background

This task is a copy of T375934, and involves scoping out work for implementing the proposed Codex typographic scale in the MinervaNeue skin.

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 MinervaNeue 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 Minerva 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 Minerva
• Investigate how to make Minerva's font-size customization feature compatible with the proposed type scale
• Create a strategy for implementing the type scale in Minerva
  • 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 Minerva with existing font-sizes?

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