Description

In order to support variable font-size in Minerva Neue, we should implement CSS custom properties as was done in T348984 for Vector.

The difference between Minerva and Vector however, is that Minerva already has a variable font-size implementation via the Special:MobileOptions page

Screenshot 2023-10-19 at 10.03.04 AM.png (307×476 px, 46 KB)

and it also supports Apple's Dynamic Type feature for iOS in resources/skins.minerva.base.styles/content/main.less.

When implementing these initial CSS custom properties, they should be compatible with these existing font-scaling methods.

New font-sizes per T356339

Standard: font-size: 16px, line-height: 24px
Medium: font-size 18px, line-height: 27px
Large: font-size: 20px, line-height: 30px

QA steps

On Special:MobileOptions there are 3 options for font size on Minerva
Options Should represent Default, small, and large
Options Names to match the ones in Vector

QA Results - Beta

AC	Status	Details
1	✅	T349303#9530872
2	✅	T349303#9530872
3	✅	T349303#9547887

QA Results - Prod

AC	Status	Details
1	✅	T349303#9568077
2	✅	T349303#9568077
3	✅	T349303#9568077

Details

Subject	Repo	Branch	Lines +/-
i18n: Rename "Regular" font size to "Standard"	mediawiki/extensions/MobileFrontend	master	+1 -1
Visual change: Change font size values	mediawiki/extensions/MobileFrontend	master	+13 -3
Drop legacy font size code/classes	mediawiki/extensions/MobileFrontend	master	+2 -24
Drop X-Large font size control	mediawiki/extensions/MobileFrontend	master	+18 -18

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		Jdrewniak	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open		Jdrewniak	T313828 [EPIC] Typography: improve typography and allow for variable typography settings
Resolved	BUG REPORT	ovasileva	T349303 Implement initial CSS Custom properties for font-size in Minerva Neue
Resolved		Jdlrobson	T357724 [Regression] Users are getting the incorrect default mobile font size
Resolved		ovasileva	T357770 Evaluate rationale for line height changes in Minerva
Resolved		ovasileva	T358498 Change line height on Minerva to 1.65 for "Standard" font size
Resolved		ovasileva	T358591 Ask Readability consortium about ASD, information density, and typography

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson moved this task from Incoming to Web Team FY2023-24 Q2 Sprint 2 on the Web-Team-Backlog board.Oct 19 2023, 4:16 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 2); removed Web-Team-Backlog.

ovasileva triaged this task as High priority.Oct 19 2023, 4:22 PM

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 2).Oct 19 2023, 5:37 PM

ovasileva set the point value for this task to 3.Oct 26 2023, 5:37 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3).Nov 2 2023, 5:51 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q2 Sprint 5); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4).Nov 20 2023, 6:38 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.Nov 30 2023, 10:06 AM

ovasileva moved this task from Ready for Development to Incoming on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Jdlrobson lowered the priority of this task from High to Medium.Nov 30 2023, 6:09 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 1); removed Web-Team-Backlog (FY2023-24 Q2 Sprint 5).Nov 30 2023, 7:05 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.Jan 4 2024, 12:21 AM

Jdlrobson moved this task from FY2023-24 Q3 Sprint 1 to FY2023-24 Q3 Sprint 2 on the Web-Team-Backlog board.Jan 4 2024, 6:07 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 2); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 1).

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 3:47 PM

Jdlrobson renamed this task from Implement initial CSS Custom properties in Minerva Neue to Implement initial CSS Custom properties for font-size in Minerva Neue.Jan 29 2024, 4:34 PM

Blocked on T356339

Jdlrobson moved this task from Backlog to Font Size on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 1 2024, 5:31 PM

@ovasileva we might want to consider punting this to the next sprint since design is not ready and prioritizing something that is as it seems we don't want to rush the design work in T356339.

Jdlrobson assigned this task to ovasileva.Feb 1 2024, 5:55 PM

In T349303#9507053, @Jdlrobson wrote:

@ovasileva we might want to consider punting this to the next sprint since design is not ready and prioritizing something that is as it seems we don't want to rush the design work in T356339.

Design spec for new sizes is in the description now.

Jdlrobson removed ovasileva as the assignee of this task.Feb 2 2024, 7:04 PM

Jdlrobson moved this task from Blocked on Others to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

Jdlrobson claimed this task.Feb 7 2024, 9:28 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

Change 998580 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Drop X-Large font size control

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

gerritbot added a project: Patch-For-Review.Feb 7 2024, 10:45 PM

Change 998586 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Drop legacy font size code/classes

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

Change 998589 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Visual change: Change font size values

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

Jdlrobson moved this task from Doing to Design Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 7 2024, 11:23 PM

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bbf1259665/w

This is ready for design review.
https://patchdemo.wmflabs.org/wikis/bbf1259665/w/index.php?title=Dog&mobileaction=toggle_view_mobile

You can change font size using this page:
https://patchdemo.wmflabs.org/wikis/bbf1259665/w/index.php?title=Special:MobileOptions&returnto=Dog

Jdlrobson updated the task description. (Show Details)Feb 8 2024, 4:22 AM

Jdlrobson merged a task: T351756: Minerva font sizes should closely follow vector options for font sizes.

Jdlrobson added a subscriber: Mabualruz.

Looks great!

I want to tweak paragraph spacing around the h3/4 headers, but what's in there is correct, so it passes for now. I'll make a new ticket to address the spacing.

JScherer-WMF removed JScherer-WMF as the assignee of this task.Feb 9 2024, 2:47 AM

Jdlrobson moved this task from Ready for Signoff to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 9 2024, 4:56 AM

Change 998580 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Drop X-Large font size control

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

Change 998586 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Drop legacy font size code/classes

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.18; 2024-02-13).Feb 9 2024, 8:01 PM

Once https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/998589 is merged this can move to QA.

Jdlrobson assigned this task to bwang.Feb 9 2024, 8:58 PM

Change 998589 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Visual change: Change font size values

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

Maintenance_bot removed a project: Patch-For-Review.Feb 9 2024, 9:30 PM

Jdlrobson reassigned this task from bwang to Edtadros.Feb 9 2024, 10:08 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

Jdlrobson added a subscriber: bwang.

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On Special:MobileOptions there are 3 options for font size on Minerva
see below

✅ AC2: Options Should represent Default, small, and large
see below

❌ AC3 Options Names to match the ones in Vector
the default is Regular on mobile, but Standard on vector

Mobile Minerva	Vector Desktop

Change 1000251 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] i18n: Rename "Regular" font size to "Standard"

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

gerritbot added a project: Patch-For-Review.Feb 10 2024, 1:04 AM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 10 2024, 2:02 AM

Change 1000251 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] i18n: Rename "Regular" font size to "Standard"

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

Maintenance_bot removed a project: Patch-For-Review.Feb 12 2024, 3:31 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 12 2024, 3:33 PM

Please review QA on https://phabricator.wikimedia.org/T349303#9530872 and close out. AC3 is now addressed.

@Edtadros AC3 should now pass if you want to repeat the test.
Otherwise this can be QAed in production.

There has been some feedback on the Wikimedia Discord community that this particular change makes the text very hard to read.

Edit: Also see discussion on en:WP:VPT

Pcoombe subscribed.Feb 15 2024, 8:24 PM

Based on some initial tests, it seems like the problem here is that people who had previous intentionally set the font to "Regular" (renamed "Standard" now) are now getting a bigger font instead of the "Small" font (which is now the default font).

Created a new ticket. T357724

ovasileva added a subtask: T357724: [Regression] Users are getting the incorrect default mobile font size.Feb 16 2024, 12:56 PM

ovasileva added a parent task: T313828: [EPIC] Typography: improve typography and allow for variable typography settings .

Jdlrobson closed subtask T357724: [Regression] Users are getting the incorrect default mobile font size as Resolved.Feb 16 2024, 7:04 PM

JScherer-WMF mentioned this in T357770: Evaluate rationale for line height changes in Minerva.Feb 17 2024, 12:49 AM

XeCyranium closed subtask T357770: Evaluate rationale for line height changes in Minerva as Resolved.Feb 18 2024, 12:18 AM

XeCyranium reopened subtask T357770: Evaluate rationale for line height changes in Minerva as In Progress.Feb 18 2024, 12:20 AM

XeCyranium changed the status of subtask T357770: Evaluate rationale for line height changes in Minerva from In Progress to Open.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On Special:MobileOptions there are 3 options for font size on Minerva
see below

✅ AC2: Options Should represent Default, small, and large
see below

✅ AC3 Options Names to match the ones in Vector
the default is Regular on mobile, but Standard on vector

Mobile Minerva	Vector Desktop

Edtadros updated the task description. (Show Details)Feb 22 2024, 3:19 PM

Edtadros mentioned this in T356225: Verify 1.42.0-wmf.18 deployment.Feb 22 2024, 10:15 PM

ovasileva closed subtask T357770: Evaluate rationale for line height changes in Minerva as Resolved.Mar 1 2024, 12:00 PM

	F38816920: Screenshot 2023-10-19 at 10.03.04 AM.png
	Oct 19 2023, 2:05 PM

	F42043974: screenshot 547.png
	Feb 22 2024, 3:16 PM

	F42043973: screenshot 548.png
	Feb 22 2024, 3:16 PM

	F42043965: screenshot 546.png
	Feb 22 2024, 3:16 PM

	F41833237: screenshot 462.png
	Feb 10 2024, 12:26 AM

Implement initial CSS Custom properties for font-size in Minerva NeueClosed, ResolvedPublic3 Estimated Story PointsBUG REPORTActions

Description

QA steps

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Implement initial CSS Custom properties for font-size in Minerva Neue
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...