Page MenuHomePhabricator
Create Task
Maniphest T245136

Font family variables: use consistent names
Open, Needs TriagePublic
Actions

Description

Purpose

This task defines a consistent pattern for font-family variable names in Less files that have been started with WikimediaUI Base.
Vector, Minerva skins use this naming convention already, with a few inconsistencies: codesearch.

Changes

Renamed variable:

  1. @font-family-heading-main -> @font-family-heading

The rename has no effect: this variable is redeclared by its sole user: codesearch.

Renamed system font stack definitions, following the pattern of @font-family-system-sans (line 201):

  1. @font-family-serif -> @font-family-system-serif
  2. @font-family-monospace -> @font-family-system-monospace

The renames have no effect: the variables with the old name are defined with (defaulted to) the renamed variables. Users of these variables: -serif, -monospace..

Skins, extensions using these definitions can redefine @font-family-serif, etc. by extending or replacing @font-family-system-serif, etc.
Previously only replacing @font-family-serif was possible, extending it was not.

Result, summary

@font-family-system-sans      // WikimediaUI Base sans-serif font stack
@font-family-system-serif     // WikimediaUI Base serif font stack
@font-family-system-monospace // WikimediaUI Base monospace font stack
// The 'system' part in these names signals these fonts are typically installed by the operating system.

@font-family-sans             // Skin's / extension's sans-serif font stack
@font-family-serif            // Skin's / extension's serif font stack
@font-family-monospace        // Skin's / extension's monospace font stack
// These variables can be redefined by skins and extensions, extending upon the system stack, or replacing it.
// The default values are the respective `-system-` font-stacks.

@font-family-sans--fallback: sans-serif;
@font-family-serif--fallback: serif;
@font-family-monospace--fallback: monospace, monospace;
// Monospace fix:  http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/

@font-family-base             // Font stack for content body
@font-family-heading          // Font stack for headings (h1-h6)

Documentation

The font stack definitions - each individual font - are commented with the system where it's expected to be available and the reason to include or exclude it.

Questions

  • Any comments about the renames?
  • Should the font stack definitions be moved into a separate file? What file name to choose?

Patches

  1. Implementing the renames: 573046
  2. Commenting the font stacks: 573609 Task: T244794
  3. Updating package metadata: 573433
  4. Documentation summarizing the research from 2014: 571944

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Add semantic @font-family-heading-main variablemediawiki/skins/MinervaNeuemaster+32 -14
Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.mediawiki/skins/MonoBookmaster+31 -2
Rename font-family variable names to follow WikimediaUI Basemediawiki/skins/Vectormaster+14 -8
Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.mediawiki/skins/Timelessmaster+91 -17
Rename 2 font-family-* variables to font-family-system-*wikimedia-ui-basemaster+11 -6
Rename 2 font-family-* variables to font-family-system-*mediawiki/coremaster+7 -4
Rename 'font-family-heading-main' to 'font-family-heading'mediawiki/coremaster+2 -2
Rename @fontFamily* variables to WikimediaUI Base naming conventionmediawiki/skins/MinervaNeuemaster+6 -6
Rename 'font-family-heading-main' to 'font-family-heading'wikimedia-ui-basemaster+3 -3
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Demian created this task.Feb 13 2020, 11:14 AM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 13 2020, 11:14 AM
gerritbot added a comment.Feb 13 2020, 8:08 PM

Change 570638 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/570638

gerritbot added a project: Patch-For-Review.Feb 13 2020, 8:08 PM

Change 570619 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MonoBook@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/570619

gerritbot added a comment.Feb 13 2020, 8:10 PM

Change 570757 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/570757

gerritbot added a comment.Feb 13 2020, 8:36 PM

Change 570174 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MonoBook@master] Css cleanup: merge font-size: 127%; with font-size: x-small; -> font-size: 0.79375em;

https://gerrit.wikimedia.org/r/570174

gerritbot added a comment.Feb 14 2020, 4:06 AM

Change 570275 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Timeless@master] Follow consistently the CSS variable naming convention in font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/570275

MarcoAurelio moved this task from Untriaged to Hodgepodge on the Projects-Cleanup board.Feb 16 2020, 12:36 PM
• Demian added a project: CSS.Feb 18 2020, 4:40 PM
• Demian moved this task from Backlog to Change CSS on the CSS board.
gerritbot added a comment.Feb 19 2020, 12:45 AM

Change 573028 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Intermediary solution for @import 'theme/wikimedia-ui-base';: duplicate/move the file to 'core/resources/src/mediawiki.less/theme' until a solution to import the original is implemented.

https://gerrit.wikimedia.org/r/573028

gerritbot added a comment.Feb 19 2020, 1:23 AM

Change 573046 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/573046

Volker_E removed a project: Wikimedia Design Style Guide.Feb 19 2020, 1:32 AM
gerritbot added a comment.Feb 19 2020, 4:12 AM

Change 573062 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/573062

• Demian added a subtask: T244794: Add comments to the font-stacks to summarize the research since 2014's Typography Refresh.Feb 19 2020, 4:34 AM
gerritbot added a comment.Feb 19 2020, 4:37 AM

Change 573065 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/573065

• Demian mentioned this in T244794: Add comments to the font-stacks to summarize the research since 2014's Typography Refresh.Feb 19 2020, 8:47 PM
• Demian added a subtask: T244790: Document WikimediaUI Base's font stacks, the research and reasons for each choice.Feb 20 2020, 4:50 AM
• Demian removed a subtask: T244790: Document WikimediaUI Base's font stacks, the research and reasons for each choice.
gerritbot added a comment.Feb 20 2020, 4:59 AM

Change 573435 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Consistently follow the CSS variable naming convention with font variable names. Document the fonts.

https://gerrit.wikimedia.org/r/573435

• Demian added a comment.Mar 4 2020, 2:07 AM

Added T246859: Follow WMUI's font-family variable names in Vector skin for discussing the patch related to the Vector skin.

• Demian renamed this task from Consistently follow the CSS variable naming convention with font variable names to Font family variables: use consistent names.Mar 4 2020, 2:28 AM
• Demian updated the task description. (Show Details)
• Demian removed a subscriber: Jdforrester-WMF.
• Demian updated the task description. (Show Details)Mar 4 2020, 2:38 AM
• Demian updated the task description. (Show Details)
gerritbot added a comment.Mar 7 2020, 10:04 AM

Change 577744 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Add comments to the font-stacks, reference documentation

https://gerrit.wikimedia.org/r/577744

• Demian removed a subtask: T244794: Add comments to the font-stacks to summarize the research since 2014's Typography Refresh.Mar 7 2020, 1:24 PM
gerritbot added a comment.Mar 7 2020, 4:51 PM

Change 577786 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Rename 'font-family-heading-main' to 'font-family-heading'

https://gerrit.wikimedia.org/r/577786

gerritbot added a comment.Mar 7 2020, 4:51 PM

Change 577787 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[wikimedia-ui-base@master] Rename 2 font-family-* variables to font-family-system-*

https://gerrit.wikimedia.org/r/577787

gerritbot added a comment.Mar 7 2020, 5:22 PM

Change 577790 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Rename 'font-family-heading-main' to 'font-family-heading'

https://gerrit.wikimedia.org/r/577790

gerritbot added a comment.Mar 7 2020, 5:22 PM

Change 577791 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] Rename 2 font-family-* variables to font-family-system-*

https://gerrit.wikimedia.org/r/577791

gerritbot added a comment.Mar 7 2020, 5:38 PM

Change 573046 abandoned by Aron Manning:
Consistently follow the CSS variable naming convention with font variable names.

Reason:
Split up: https://gerrit.wikimedia.org/r/c/wikimedia-ui-base/ /577786

https://gerrit.wikimedia.org/r/573046

gerritbot added a comment.Mar 7 2020, 5:38 PM

Change 573046 restored by Aron Manning:
Consistently follow the CSS variable naming convention with font variable names.

https://gerrit.wikimedia.org/r/573046

gerritbot added a comment.Mar 8 2020, 4:15 AM

Change 577844 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Rename @fontFamily* variables to WMUI Base convention

https://gerrit.wikimedia.org/r/577844

gerritbot added a comment.Mar 8 2020, 4:15 AM

Change 577845 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] Add semantic @font-family-* variables

https://gerrit.wikimedia.org/r/577845

• Demian added projects: Code-Health, Technical-Debt.Mar 14 2020, 10:21 AM
gerritbot added a comment.Mar 14 2020, 10:50 AM

Change 570638 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Rename font-family variable names to follow WikimediaUI Base

https://gerrit.wikimedia.org/r/570638

• Demian added subscribers: • nray, ovasileva, • Niedzielski and 2 others.EditedMar 14 2020, 11:04 AM

@ovasileva @Quiddity @phuedx @nray @Niedzielski @Jdlrobson

Dear Readers Web Team!

The cleanup and refactoring patches are rolling in every day. These cleanup patches in Vector and the official skins fit well with those patches. After 1 month that this ticket and solution has been created, I'd like to ask your attention to it.

The patches are ready to merge and incorporate hours of intensive work together with JdlRobson and days on my part. Please make use of our effort, don't let this work be wasted:

Vector:
570638 Renaming 3 LESS variables for consistency. (T246859) Code-Health Technical-Debt
577744 Adding comments summarizing 2 weeks of research digging up the discussions and decisions behind the status quo. Documentation

Minerva Neue:
577844 Renaming 2 LESS variables
573065 Adding comments. Long discussion: intensive work with JdlRobson that formed these patches.
577845 Adding 2 meaningful LESS variables

MonoBook and Timeless patches linked in "Related gerrit patches".

The patches are made to be easy and quick to evaluate. There are no functional changes, these changes are intended to benefit the developers, volunteers and third-parties.
Please spend the necessary 10 minutes per person to review these patches, so a month's volunteer effort won't go to waste. Thank you in advance.

• Demian removed a project: Projects-Cleanup.Mar 15 2020, 8:53 AM
gerritbot added a comment.Apr 15 2020, 7:51 PM

Change 577786 abandoned by Aron Manning:
Rename 'font-family-heading-main' to 'font-family-heading'

https://gerrit.wikimedia.org/r/577786

Jdlrobson moved this task from Needs triage to Technical on the Vector (legacy skin) board.May 15 2020, 4:59 PM
Jdlrobson removed a project: MinervaNeue.
gerritbot added a comment.Jun 25 2020, 8:35 PM

Change 577844 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Rename @fontFamily* variables to WikimediaUI Base naming convention

https://gerrit.wikimedia.org/r/577844

Volker_E added a comment.Jun 25 2020, 8:49 PM

From the task description, there seems to be a misunderstanding in what *-system-sans refers to resulting in a misdirected request for consistency:

@font-family-serif -> @font-family-system-serif
@font-family-monospace -> @font-family-system-monospace

serif in font-family-serif refers to the generic font family, that is chosen by the web browser and writable by the user. Some browser rely on so called web fonts that are system-independent for historic reasons, like Arial or Times/Times New Roman.
*system-sans refers to specifically chosen font stack of Operating System sans serif fonts that are stacked up so a user in a browser on each of the major (more specifically mobile) operating systems should see the site first in its system sans serif font, not a generic one.
Therefore renaming @font-family-monospace to @font-family-system-monospace is misleading!

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.39; 2020-06-30).Jun 25 2020, 9:00 PM
• Demian added a comment.Jun 26 2020, 3:53 AM

@Volker_E thank you for documenting this reasoning behind the font-family-system-* variables. That was my understanding as well.

The Minerva skin - where these variables are defined and used - has this exact comment (ref):
"System font stack for monospace fonts, see T221043." for the following definition:
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

• Demian mentioned this in W2550 Inactive tasks.Jun 26 2020, 4:28 AM
Quiddity unsubscribed.Jun 26 2020, 5:59 PM
• Demian added a project: User-Demian.Jul 6 2020, 2:58 PM
• Demian moved this task from Incoming to Stalled on Review on the User-Demian board.
gerritbot added a comment.Aug 25 2020, 1:15 PM

Change 577790 abandoned by VolkerE:
[mediawiki/core@master] Rename 'font-family-heading-main' to 'font-family-heading'

Reason:
font-family-heading-main got its name as variable that only applies to main headings

https://gerrit.wikimedia.org/r/577790

gerritbot added a comment.Aug 25 2020, 1:20 PM

Change 577791 abandoned by VolkerE:
[mediawiki/core@master] Rename 2 font-family-* variables to font-family-system-*

Reason:
Not completely incorrect, but also not clearer. Just another complexity level. Until someone else flags this, we'll continue wiith the status quo.

https://gerrit.wikimedia.org/r/577791

gerritbot added a comment.Aug 25 2020, 1:20 PM

Change 577787 abandoned by VolkerE:
[wikimedia-ui-base@master] Rename 2 font-family-* variables to font-family-system-*

Reason:
Not completely incorrect, but also not clearer. Just another complexity level. Until someone else flags this, we'll continue wiith the status quo.

https://gerrit.wikimedia.org/r/577787

• Demian moved this task from Stalled on Review to Denied on the User-Demian board.Nov 2 2020, 12:21 AM
Aklapper removed • Demian as the assignee of this task.Nov 8 2020, 10:22 AM
Aklapper subscribed.

[Resetting assignee due to inactive user account]

gerritbot added a comment.Dec 5 2020, 4:44 PM

Change 570275 abandoned by Isarra:
[mediawiki/skins/Timeless@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

Reason:

https://gerrit.wikimedia.org/r/570275

ANKAN1306 subscribed.Dec 7 2020, 4:37 AM
ANKAN1306 unsubscribed.
gerritbot added a comment.Mar 17 2021, 10:15 PM

Change 570638 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Rename font-family variable names to follow WikimediaUI Base

Reason:
405 days old

https://gerrit.wikimedia.org/r/570638

ReaperDawn subscribed.Apr 11 2021, 10:12 AM
gerritbot added a comment.May 3 2021, 10:24 PM

Change 570619 abandoned by Jdlrobson:

[mediawiki/skins/MonoBook@master] Consistently follow WikimediaUI Base's CSS variable naming convention for font variable names. Document the fonts.

Reason:

Going forward we'll want to use mediawiki.skin.variables.less rather than adding variables here.

https://gerrit.wikimedia.org/r/570619

gerritbot added a comment.Jun 11 2021, 4:01 PM

Change 577845 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Add semantic @font-family-heading-main variable

Reason:

Moving towards skin.variables and mediawiki.ui

https://gerrit.wikimedia.org/r/577845

Jdlrobson moved this task from Backlog to Appearance on the MonoBook board.Jul 1 2021, 11:06 PM
Jdlrobson moved this task from Technical to Tracking on the Vector (legacy skin) board.Apr 25 2022, 10:25 PM
Jdlrobson edited projects, added Vector (legacy skin) (Tracking); removed Vector (legacy skin).
Volker_E edited projects, added Design-System-Team, Codex; removed User-Demian, UI-Standardization.Feb 13 2025, 8:26 AM
Volker_E removed subscribers: • Niedzielski, • nray, • Demian.
Volker_E moved this task from Inbox to Backlog on the Design-System-Team board.Feb 13 2025, 8:50 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits