Page MenuHomePhabricator

Implement new default typography options
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

We are now ready to add the new default which will be selectable from the settings menu

Acceptance Criteria

  • Implement new defaults as defined in T346064: Generate design options for new default:
  • The default is compact
  • Reduce the number of font sizes from 4 to 3.
  • Change the labels to Compact, Standard, Open (currently Small, Standard, Large, X-Large)

implementation notes

  • The compact mode is identical to the current Vector 2022 experience except the paragraph margins. that should be done in a separate patchset as part of T351754. No others changes should be made to compact mode.

Specification

Paragraph margins should be equal to font-size.

Compact
Preserve current default as a new "compact" option with new paragraph margins:
Font-size: 14px
Line-height: 22px
Paragraph margins: 14 (this will be done in T351693)

Standard
New default
Font-size: 16px
Line-height: 24px
Paragraph margins: 16

Open
Large-text reading format intended as an accessibility affordance
Font-size: 20px
Line-height: 26px
Paragraph margins: 20

QA Results - Beta

ACStatusDetails
1T351693#9364284
2T351693#9364284
3T351693#9376181

QA Results - Prod

ACStatusDetails
1T351693#9381748
2T351693#9381748
3T351693#9381748

Event Timeline

ovasileva set the point value for this task to 2.Nov 21 2023, 5:50 PM
Jdrewniak updated the task description. (Show Details)

Change 977114 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Implement new font-sizes for custom front-size preference

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

Change 977114 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Implement new font-sizes for custom front-size preference

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Compact
Preserve current default as a new "compact" option with new paragraph margins:
Font-size: 14px
Line-height: 22px
Paragraph margins: 14 (this will be done in T351693)

screenshot 293.png (1×984 px, 300 KB)

✅ AC2: Standard
New default
Font-size: 16px
Line-height: 24px
Paragraph margins: 16

screenshot 294.png (1×985 px, 293 KB)

❌ AC3: Open
Large-text reading format intended as an accessibility affordance
Font-size: 20px
Line-height: 26px
Paragraph margins: 20

screenshot 295.png (1×984 px, 256 KB)

@Jdrewniak Will update the line height in

❌ AC3: Open Large-text reading format intended as an accessibility affordance

We will backport today.

Change 979140 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Increase "large" font-size option for client-preferences

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

Change 979140 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Increase "large" font-size option for client-preferences

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

Change 979084 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Increase "large" font-size option for client-preferences

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

Change 979084 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Increase "large" font-size option for client-preferences

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

Mentioned in SAL (#wikimedia-operations) [2023-11-30T21:45:10Z] <dancy@deploy2002> Started scap: Backport for [[gerrit:979084|Increase "large" font-size option for client-preferences (T351693)]]

Mentioned in SAL (#wikimedia-operations) [2023-11-30T21:46:26Z] <dancy@deploy2002> jdrewniak and dancy: Backport for [[gerrit:979084|Increase "large" font-size option for client-preferences (T351693)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-11-30T21:55:12Z] <dancy@deploy2002> Finished scap: Backport for [[gerrit:979084|Increase "large" font-size option for client-preferences (T351693)]] (duration: 10m 01s)

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC3: Open
Large-text reading format intended as an accessibility affordance
Font-size: 20px
Line-height: 26px
Paragraph margins: 20

screenshot 311.png (1×1 px, 326 KB)

All sizes are now correct, resolving.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Compact
Preserve current default as a new "compact" option with new paragraph margins:
Font-size: 14px
Line-height: 22px
Paragraph margins: 14 (this will be done in T351693)

screenshot 331.png (1×1 px, 396 KB)

✅ AC2: Standard
New default
Font-size: 16px
Line-height: 24px
Paragraph margins: 16

screenshot 332.png (1×1 px, 384 KB)

✅ AC3: Open
Large-text reading format intended as an accessibility affordance
Font-size: 20px
Line-height: 26px
Paragraph margins: 20

screenshot 333.png (1×1 px, 432 KB)