As the Wikimedia design system continues to evolve, ensuring consistency across platforms remains a key priority. One area where this has recently come into focus is typography: the foundation of readable, accessible, and cohesive interfaces.
We’ve uncovered significant inconsistencies in how typography is handled across Codex components; MediaWiki skins like Vector 2022 and MinervaNeue; and Figma, our design tool of choice. These discrepancies have made it difficult for designers and developers to align on expectations, often leading to mismatches between mockups and real-world interfaces.
By standardizing on a unified type scale, we aim to simplify workflows, improve visual consistency, and reinforce Codex as the single source of truth for experiencing the Wikiverse.
What We Found: A Typographic Mishmash
An audit revealed a scattered landscape of font sizes and line heights across different skins and components. Designers often saw one thing in Figma, only to find a different behavior once their work reached code. The root of the confusion? A misalignment between Codex’s internal type scale and the font settings used by Vector 2022 and MinervaNeue: the two most widely used skins on desktop and mobile.
These inconsistencies made it harder to:
- Maintain pixel-perfect parity between design and implementation
- Scale Codex components reliably across different skins
- Ensure consistent reading experiences for users across devices
The Path Forward: A Unified Typographic Scale
To address this, we’re centralizing around a single typographic system that works everywhere–from design to final code. Here’s what this work is achieving:
Key Goals
- Codex type scale becomes the standard across MediaWiki skins, including Vector 2022 and MinervaNeue.
- Scalability with font modes: Codex components will respond to setting font size defined by each skin or by the user’s settings, allowing flexible and skin-aware UI rendering.
- One source of truth: Wikimedia Figma mockups using Codex components will now translate predictably to code, eliminating the guesswork.
How It Helps Designers and Engineers
Unifying typography may sound like a behind-the-scenes adjustment, but its impact is felt across the entire design-to-engineering workflow:
- For designers: Designers willl no longer have to tailor each design mockup for a specific skin or override Codex defaults to match production. The system simply works.
- For developers: Component behavior becomes more predictable and requires less manual adjustment, reducing friction during implementation.
- For users: Consistent typography across pages and devices improves readability, accessibility, and trust in the interface.
What’s Next
We’re in the process of rolling out this unified type scale across Codex, ensuring components adapt dynamically to the context of the skin they’re rendered in. Alongside this, we’re refining documentation in Codex to reflect the updated behavior, making it easier for contributors across the Foundation and community to design with confidence.
Looking ahead, this typographic unification will serve as a template for how we approach future visual consistency work in Codex–from spacing tokens to component density and beyond.
Thank You!
Thanks to numerous people behind these changes, Derek Torsani and Bárbara Martínez as main designer and consultant, Matthew Williams as design manager, design system team engineers Anne Tomasevich, Eric Gardner, Roan Kattouw and Lauralyn Watson and myself, engineer director Nat Baca and product manager Chris Ciufo; and to our peers from the Foundation’s Web team who were originally implementing the font scale switcher.
As always, we’re grateful to the many volunteers and community members who surfaced these issues and continue to help shape a more coherent and resilient design system. With your feedback and support, Codex continues to grow as the unifying design language that powers Wikimedia experiences across the globe.
Let’s keep building a design system that’s consistent, scalable, and user-first–down to every letter and line.
Volker E. on behalf of the Wikimedia Design System Team
Can you help us translate this article?
In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?
Start translation