Reading/Web/Accessibility for reading/dev/Vector font-size audit

Before changing the font-sizes in skins, we need to understand the impact that change could have, on the skin as well as the broader ecosystem. The following is a summary of how font-size works in Vector as investigated in T344515.This summary goes through Life as a Less variable in MediaWiki: from inception in MediaWiki core, into the Vector skin, onto an HTML document in a browser, and from there into the wild MediaWiki ecosystem.

CSS variable sources edit

Vector imports Less variables from two places:

  1. Codex: theme-wikimedia-ui.less or theme-wikimedia-ui-legacy.less
  2. The mediawiki.less module MediaWiki Core, i.e

Codex variables are grouped into themes. Currently either Wikimedia UI or Wikimedia UI Legacy. The mediawiki.less modules is imbued with far more magical ResourceLoader powers (and far less documentation). Although both of these sources share many of the same variables, Vector needs them both, and they both need to be imported in the correct order (first then codex).

mediawiki.less & edit

The mediawiki.less ResourceLoader module, specifically the file, enables skins to import, modify and share a standardized set of variables with extensions.

The process goes like this:

  1. The skin creates a file called
  2. That file imports MediaWiki core variables via @import ''. That actually imports the file at core/resources/src/mediawiki.less/
  3. The skin overrides any or none of those variables.
  4. Extensions can use @import '' to gain access to those core or modified variables.

If a skin creates a file, and does not import '' , then extensions will not have access to core variables, and the Less build will fail due to undefined variables. For this reason, we have to import even if Vector doesn’t use those core variables.

As illustrated in the chart at the end of this section, core font-size variables such as @font-size-base are actually initially defined in the core file, then overridden by Vector several times.

variables.less edit

Currently both legacy vector and Vector 2022 import the mediawiki.skins.less file into a file called Vector/resources/common/variables.less. That file is used by both legacy and modern Vector as the source of variables throughout the rest of the Less code.

This file uses @import '' , that means that it actually imports the file at: Vector/resources/mediawiki.less/vector/ OR Vector/resources/mediawiki.less/vector-2022/ depending on whether the skin is legacy or modern Vector.

This behaviour is confusing. In general, legacy and modern Vector should be separated as much as possible.  

Variable usage in Vector Less edit

Vector uses the following range of font-size values:

Font Sizes Class Name/ID File Name Line Number
84% ``#contentSub2` ./skins.vector.styles/layouts/screen.less 96
@font-size-base ./skins.vector.styles/components/PageTitlebar.less 29
@font-size-base .vector-toc ./skins.vector.styles/components/TableOfContents.less 18
@font-size-base .vector-dropdown-label-text ./skins.vector.styles/components/LanguageDropdown.less 30
@font-size-base .vector-body ./common/typography.less 86
@font-size-base .mw-indicators ./common/components/Indicators.less 4
@font-size-base--trident-hack .vector-search-box ./skins.vector.styles/components/SearchBox.less 10
@font-size-base--trident-hack .vector-body ./common/typography.less 89
@font-size-dropdown .mixin-vector-dropdown-menu-item() ./common/mixins.less 44
@font-size-footer .mw-footer ./common/components/Footer.less 17
@font-size-heading-1 .mw-body ./common/typography.less 74
@font-size-heading-2 .vector-sticky-header ./skins.vector.styles/components/StickyHeader.less 65
@font-size-heading-2 #siteSub ./common/typography.less 106
@font-size-heading-3 #siteSub ./common/typography.less 120
@font-size-nav-main .vector-legacy-sidebar ./skins.vector.styles.legacy/components/LegacySidebar.less 21
@font-size-nav-main-body .vector-menu-content ./skins.vector.styles.legacy/components/LegacySidebar.less 69
@font-size-nav-main-heading .vector-menu-heading ./skins.vector.styles.legacy/components/LegacySidebar.less 47
@font-size-nav-personal .vector-user-menu-legacy ./skins.vector.styles.legacy/components/UserLinks.less 6
@font-size-reset #siteSub ./common/typography.less 131
@font-size-reset .toc h2 ./common/typography.less 136
@font-size-root N/A ./common/typography.less 11
@font-size-search-input .searchButton ./skins.vector.styles.legacy/components/SearchBox.less 77
@font-size-site-notice #siteNotice ./common/components/SiteNotice.less 10
@font-size-sticky-header-links .vector-sticky-header ./skins.vector.styles/components/StickyHeader.less 76
@font-size-tabs .vector-page-toolbar-container ./skins.vector.styles/components/PageToolbar.less 8
@font-size-tabs .vector-menu-heading ./skins.vector.styles.legacy/components/MenuDropdown.less 24
@font-size-tabs .mw-list-item ./skins.vector.styles.legacy/components/MenuDropdown.less 92
@font-size-tabs .vector-menu-heading ./skins.vector.styles.legacy/components/MenuTabs.less 54
@font-size-user-links .vector-user-links .mw-portlet-vector-user-menu-overflow ./skins.vector.styles/components/UserLinks.less 46
0.75em .vector-toc-toggle ./skins.vector.styles/components/TableOfContents.less 35
12.8px #siteSub ./common/typography.less 97
14px .cdx-mixin-css-icon-alignment( ); ./skins.vector.styles/components/Icon.less 8
16px .vector-feature-custom-font-size-clientpref-enabled & ./common/typography.less 93
inherit .vector-toc-list-item ./skins.vector.styles/components/TableOfContents.less 102
inherit .vector-dropdown-label ./skins.vector.styles/components/MenuTabs.less 83
inherit .mixin-vector-dropdown-content-flip(); ./skins.vector.styles/components/LanguageDropdown.less 67
unit( @font-size-browser, px ) .vector-popup-notification ./skins.vector.styles/components/PopupNotification.less 2
unit( 14 / @font-size-browser, rem ) .vector-pinnable-header-label ./skins.vector.styles/components/PinnableHeader.less 18
unit( 16 / @font-size-browser, rem ) .search-toggle ./skins.vector.styles/components/Header.less 29

Computed values in the DOM edit

In Vector, nearly all relative font values are calculated in em's. This leads to cascading font-size issues based on the HTML structure because the `em` unit calculates its value based on it's parents font-size value.

In the screenshot below, font-sizes that are computed to decimals, equal to 13px, or less than 12px are highlighted. The reason for this is that these values represent unintentional font sizes, i.e. they do not conform to any design specification or system.  

Although many highlighted areas come from user generated content, there are plenty of arbitrary or miscalculated font sizes originating in the Vector skin as well.