Summary

Moh'd and I met earlier this week to discuss the entirely of the work involved in this feature. We agreed that in general we can think of this change in two main parts:

1. Increased font-size
2. Adjustable font-size

Both of these parts can (theoretically) be worked on in parallel. We think the work can be split into the following tasks.
(tasks will be created shortly).

Part 1 - Increase font size

• T254055 [design] Increased font size design spec - Although there have been lots of discussions about how to increase the font size, we still need to finalize some decisions.
• T340848 [consultations] Cross-language font-size considerations - Talk to language team about language-specific font sizes. Summarize recommendations.
• T315596#8167345 [consultations] Investigate how change in font-size will impact extensions - Talk to Editing team about font size effects on VisualEditor. Largely taken care of in T315596#8167345
• T313828 [refactor] Prepare Vector 2022 for increased font-size change - Clean up existing font-size related code
  • Remove unnecessary font declarations
  • Ensure that the code reflects the current design thinking. i.e. if we’re distinguishing between UI & content font sizes, we should have variables called @font-size-interface vs @font-size-content.
  • Move the font-size declarations up the DOM tree so they’re easier to change later.
  • T261334 Convert font-sizes to rems so they’re easier to change later.
• [implementation] - Increase the font size in Vector 2022 per design spec
• [implementation] - Add skin configuration for font-size - If we have different font-size for logged-in vs logged-out, then we'll need some kind of config for this.

Part 2 - Adjustable font size

The following work assumes we’ve completed the TDMP and have implemented basic client-side preferences functionality.

• [design] Font size settings interface design- What does the interface for changing font-size look like? How will it accommodate other features? (link to existing figma designs).
• [design] Adjustable font size behavior - What exactly will change when someone increases the font-size? When someone changes the font size? Content column width? Heading sizes? Line height? If the content font size is 28px, is the interface font size still 14px? What will the font-size options be?
• [spike] Determine how to implement CSS custom properties for font-size in Vector 2022 - How can we use them alongside Less variables? Do we need a separate file for them? How do we organize them? What breaks if we use CSS custom properties? Gadgets, VE? Do we need to split legacy Vector from modern any more?
• [implementation] Create CSS custom properties for font-size in Vector 2022 - based on the outcomes of the spike above.
• [spike] How will we build the font-size settings interface? - Codex? Vue? browser/accessibility issues? Grade C, mobile, no-js requirements?
• [implementation] Create font size settings interface - Based on the outcomes of the spike above
• [analytics] Instrumentation plan for reading preferences UI - Assumes we will want to track usage of this new feature.