When we release Codex 2.0, which includes the font modes work, many Codex components will now set internal font-size rules, e.g. font-size: @font-size-medium. By default, these font sizes are based on a 1rem base font size, which is typically 16px as a browser default. In contrast, Monobook sets a ~12.7px font size.
As a result, Codex components will start to appear larger once the 2.0 version is used in core. This means a visual change in MonoBook, especially when Codex components appear next to non-Codex UI element, which will not change sizes.
To mitigate this issue, we propose using the new "small" font mode in MonoBook. The small bode is based around a 0.875rem/14px base font size, which is much closer to MonoBook's base. This will both minimize the visual impact in MonoBook and ensure that Codex components follow the new typographic scale..
Considerations
MonoBook does not appear to use any Codex components or Codex design tokens. This means that using the small font mode will affect nothing but Codex components that are used in UIs built in core or extensions.
The small font mode can be used by adding the following to resources/variables.less in MonoBook (note that the mixin and mixin file may be renamed at some point):
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-small.less';
:root {
.cdx-mode-small();
}Visual changes
General summary:
- Only Codex components will change sizes after 2.0. This only affects interfaces built with Codex, like the login and create account forms, some special pages, message boxes, and other features (e.g. QuickSurveys).
- Article text, editing interfaces, and everything else not built with Codex will not be affected.
- Text within components will use Codex font-size tokens and will therefore become larger, as the font-size rules in Codex will override the font-size rules in the MonoBook skin. In the case of MonoBook, this means that medium-size text will go from 12.7px to 14px. Other text sizes (smaller text, headings) will scale in a similar fashion.
- Some components that are currently out of sync with the type scale, like Accordion (see the special page screenshots below) will now follow the type scale and appear more consistent with the rest of the interface. In the Accordion example, the Accordion title will go from being 1rem/16px to 0.875rem/14px.
- Items like text inputs, menus and menu items, checkboxes and radios, buttons, etc. will not change size. Only their internal text will change size.
| Interface | Current | Proposed | Notes |
|---|---|---|---|
| Login form |  |  | Message icon, inputs, and button stay the same size. Message, field label, input, and button text moves from 12.7px to 0.875rem/14px. |
| Special page with Codex form |  |  | Message icon, inputs, radios and checkboxes, and menus stay the same size. Message, field label, input text moves from 12.7px to 0.875rem/14px. Accordion title text becomes smaller/consistent with the rest of the interface. |
Acceptance criteria
- Use the small mode mixin in MonoBook
- Ensure the patch depends on the core patch to add Codex 2.0.0-rc1, since the mixin won't be available until that version