Evaluate the design of the revised Codex type scale
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	DTorsani-WMF
	Jul 3 2024, 12:24 AM

Description

Background

As a part of T363845 and the work around creating a revised and uniform Codex type scale, we want to verify that the changes to the type scale have been vetted with the Web team.

Goals

Create a uniform type scale that can be used in Vector and Minerva across the user-based font-size options in the Appearance settings for articles, unifying the 6 (Vector Small, Vector Standard, Vector Large, Minerva Small, Minerva Medium, Minerva Large) user-based font-size options into 4 (Small, Default/Standard/Medium, Large, X-Large).
Maintain little to no noticeable changes for the 14px and 16px font-size options.
Scale all headings, including the article title proportionally with the body, and equally across all 4 font-size options.

Questions

Are there any glaring concerns with the updates to the type scale?
Are there any nuanced places where typography scales with the Appearance settings that we might not be thinking about?
Is there any reason we wouldn't want to scale the headings in Minerva as we do in Vector (they do not currently scale in Minerva as seen in the audit below, but they do in Vector)?

Audit/Proposal

Vector

Minerva

Small

Standard

Large

Standard

Medium

Large

Current

New

Current

New

Current

New

Current

New

Current

New

Current

New

28.8/39.6 (collapsed 24/24)

26/36

28.8/39.6 (collapsed 24/24)

28/38

28.8/39.6 (collapsed 24/24)

32/42

27.2/37.4

28/38

27.2/37.4

30/40

27.2/37.4

32/42

21/28.875

22/32

24/33

24/34

30/41.25

28/38

24/33

24/34

24/33

26/36

24/33

28/38

16.8/26.88

18/28

19.2/30.72

20/30

24/38.4

24/34

19.2/26.4

20/30

19.2/26.4

22/32

19.2/26.4

24/34

14/22.4

14/22

16/25.6

16/26

20/32

20/30

16/22

16/26

16/22

18/28

16/22

20/30

14/22.4

14/22

16/25.6

16/26

20/32

20/30

16/22

16/26

16/22

18/28

16/22

20/30

14/22.4

14/22

16/25.6

16/26

20/32

20/30

16/22

16/26

16/22

18/28

16/22

20/30

body

14/22.4

14/22

16/25.6

16/26

20/30

16/26.4

16/26

18/28.8

18/28

20/30

small

12.6/19.8

12/20

14.4/23.04

14/22

18/27

18/28

14.4/23.76

14/22

14.4/23.04

16/26

14.4/21.6

18/28

To prototype this type scale in Vector, insert the following code into your vector-2022.css file:

.vector-feature-custom-font-size-clientpref-0 .vector-body {
    font-size: 14px;
    line-height: 22px;
}

.vector-feature-custom-font-size-clientpref-0 .mw-body h1, .vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading1, .vector-feature-custom-font-size-clientpref-0 .mw-body-content h1, .vector-feature-custom-font-size-clientpref-0 .mw-body-content .mw-heading1, .vector-feature-custom-font-size-clientpref-0 h1 {
    font-size: 26px;
    line-height: 36px;
}

.vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading2, .vector-feature-custom-font-size-clientpref-0 .mw-body h2, .vector-feature-custom-font-size-clientpref-0 h2 {
    font-size: 22px;
    line-height: 32px;
}

.vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading3, .vector-feature-custom-font-size-clientpref-0 .mw-body h3, .vector-feature-custom-font-size-clientpref-0 h3 {
    font-size: 18px;
    line-height: 28px;
}

.vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading4, .vector-feature-custom-font-size-clientpref-0 .mw-body h4, .vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading5, .vector-feature-custom-font-size-clientpref-0 .mw-body h5, .vector-feature-custom-font-size-clientpref-0 .mw-body .mw-heading6, .vector-feature-custom-font-size-clientpref-0 .mw-body h6, .vector-feature-custom-font-size-clientpref-0 h4, .vector-feature-custom-font-size-clientpref-0 h5, .vector-feature-custom-font-size-clientpref-0 h6 {
    font-size: 14px;
    line-height: 22px;
}

.vector-feature-custom-font-size-clientpref-0 #siteSub {
    font-size: 12px;
    line-height: 20px;
}

.vector-feature-custom-font-size-clientpref-0 .mw-parser-output .reflist {
    font-size: 12px;
    line-height: 20px;
}

.vector-feature-custom-font-size-clientpref-1 .vector-body {
    font-size: 16px;
    line-height: 26px;
}

.vector-feature-custom-font-size-clientpref-1 .mw-body h1, .vector-feature-custom-font-size-clientpref-1.mw-body .mw-heading1, .vector-feature-custom-font-size-clientpref-1.mw-body-content h1, .vector-feature-custom-font-size-clientpref-1.mw-body-content .mw-heading1, .vector-feature-custom-font-size-clientpref-1 h1 {
    font-size: 28px;
    line-height: 38px;
}

.vector-feature-custom-font-size-clientpref-1 .mw-body .mw-heading2, .vector-feature-custom-font-size-clientpref-1.mw-body h2, .vector-feature-custom-font-size-clientpref-1 h2 {
    font-size: 24px;
    line-height: 34px;
}

.vector-feature-custom-font-size-clientpref-1 .mw-body .mw-heading3, .vector-feature-custom-font-size-clientpref-1.mw-body h3, .vector-feature-custom-font-size-clientpref-1 h3 {
    font-size: 20px;
    line-height: 30px;
}

.vector-feature-custom-font-size-clientpref-1 .mw-body .mw-heading4, .vector-feature-custom-font-size-clientpref-1.mw-body h4, .vector-feature-custom-font-size-clientpref-1.mw-body .mw-heading5, .vector-feature-custom-font-size-clientpref-1.mw-body h5, .mw-body .mw-heading6, .vector-feature-custom-font-size-clientpref-1.mw-body h6, .vector-feature-custom-font-size-clientpref-1 h4, .vector-feature-custom-font-size-clientpref-1 h5, .vector-feature-custom-font-size-clientpref-1 h6 {
    font-size: 16px;
    line-height: 26px;
}

.vector-feature-custom-font-size-clientpref-1 #siteSub {
    font-size: 14px;
    line-height: 22px;
}

.vector-feature-custom-font-size-clientpref-1 .mw-parser-output .reflist {
    font-size: 14px;
    line-height: 22px;
}

.vector-feature-custom-font-size-clientpref-2 .vector-body {
    font-size: 20px;
    line-height: 30px;
}

.vector-feature-custom-font-size-clientpref-2 .mw-body h1, .vector-feature-custom-font-size-clientpref-2.mw-body .mw-heading1, .vector-feature-custom-font-size-clientpref-2.mw-body-content h1, .vector-feature-custom-font-size-clientpref-2.mw-body-content .mw-heading1, .vector-feature-custom-font-size-clientpref-2 h1 {
    font-size: 32px;
    line-height: 42px;
}

.vector-feature-custom-font-size-clientpref-2 .mw-body .mw-heading2, .vector-feature-custom-font-size-clientpref-2.mw-body h2, .vector-feature-custom-font-size-clientpref-2 h2 {
    font-size: 28px;
    line-height: 38px;
}

.vector-feature-custom-font-size-clientpref-2 .mw-body .mw-heading3, .vector-feature-custom-font-size-clientpref-2.mw-body h3, .vector-feature-custom-font-size-clientpref-2 h3 {
    font-size: 24px;
    line-height: 34px;
}

.vector-feature-custom-font-size-clientpref-2 .mw-body .mw-heading4, .vector-feature-custom-font-size-clientpref-2.mw-body h4, .vector-feature-custom-font-size-clientpref-2.mw-body .mw-heading5, .vector-feature-custom-font-size-clientpref-2.mw-body h5, .mw-body .mw-heading6, .vector-feature-custom-font-size-clientpref-2.mw-body h6, .vector-feature-custom-font-size-clientpref-2 h4, .vector-feature-custom-font-size-clientpref-2 h5, .vector-feature-custom-font-size-clientpref-2 h6 {
    font-size: 20px;
    line-height: 30px;
}

.vector-feature-custom-font-size-clientpref-2 #siteSub {
    font-size: 18px;
    line-height: 28px;
}

.vector-feature-custom-font-size-clientpref-2 .mw-parser-output .reflist {
    font-size: 18px;
    line-height: 28px;
}

To prototype this type scale in Minerva, insert the following code into your minerva.css file:

.mf-font-size-clientpref-small .mw-body p, .mf-font-size-clientpref-small .content p {
    font-size: 16px;
    line-height: 26px;
}

.mf-font-size-clientpref-small .mw-body h1, .mf-font-size-clientpref-small .mw-body .mw-heading1, .mf-font-size-clientpref-small .mw-body-content h1, .mf-font-size-clientpref-small .mw-body-content .mw-heading1, .mf-font-size-clientpref-small h1 {
    font-size: 28px;
    line-height: 38px;
}

.mf-font-size-clientpref-small .mw-body .mw-heading2, .mf-font-size-clientpref-small .mw-body h2, .mf-font-size-clientpref-small h2 {
    font-size: 24px;
    line-height: 34px;
}

.mf-font-size-clientpref-small .mw-body .mw-heading3, .mf-font-size-clientpref-small .mw-body h3, .mf-font-size-clientpref-small h3 {
    font-size: 20px;
    line-height: 30px;
}

.mf-font-size-clientpref-small .mw-body .mw-heading4, .mf-font-size-clientpref-small .mw-body h4, .mf-font-size-clientpref-small .mw-body .mw-heading5, .mf-font-size-clientpref-small .mw-body h5, .mf-font-size-clientpref-small .mw-body .mw-heading6, .mf-font-size-clientpref-small .mw-body h6, .mf-font-size-clientpref-small h4, .mf-font-size-clientpref-small h5, .mf-font-size-clientpref-small h6 {
    font-size: 16px;
    line-height: 26px;
}

.mf-font-size-clientpref-small #siteSub {
    font-size: 14px;
    line-height: 22px;
}

.mf-font-size-clientpref-small .mw-parser-output .reflist {
    font-size: 14px;
    line-height: 22px;
}

.mf-font-size-clientpref-regular .mw-body p, .mf-font-size-clientpref-regular .content p {
    font-size: 18px;
    line-height: 28px;
}

.mf-font-size-clientpref-regular .mw-body h1, .mf-font-size-clientpref-regular.mw-body .mw-heading1, .mf-font-size-clientpref-regular.mw-body-content h1, .mf-font-size-clientpref-regular.mw-body-content .mw-heading1, .mf-font-size-clientpref-regular h1 {
    font-size: 30px;
    line-height: 40px;
}

.mf-font-size-clientpref-regular .mw-body .mw-heading2, .mf-font-size-clientpref-regular.mw-body h2, .mf-font-size-clientpref-regular h2 {
    font-size: 26px;
    line-height: 36px;
}

.mf-font-size-clientpref-regular .mw-body .mw-heading3, .mf-font-size-clientpref-regular.mw-body h3, .mf-font-size-clientpref-regular h3 {
    font-size: 22px;
    line-height: 32px;
}

.mf-font-size-clientpref-regular .mw-body .mw-heading4, .mf-font-size-clientpref-regular.mw-body h4, .mf-font-size-clientpref-regular.mw-body .mw-heading5, .mf-font-size-clientpref-regular.mw-body h5, .mw-body .mw-heading6, .mf-font-size-clientpref-regular.mw-body h6, .mf-font-size-clientpref-regular h4, .mf-font-size-clientpref-regular h5, .mf-font-size-clientpref-regular h6 {
    font-size: 18px;
    line-height: 28px;
}

.mf-font-size-clientpref-regular #siteSub {
    font-size: 16px;
    line-height: 26px;
}

.mf-font-size-clientpref-regular .mw-parser-output .reflist {
    font-size: 16px;
    line-height: 26px;
}

.mf-font-size-clientpref-large .mw-body p, .mf-font-size-clientpref-large .content p {
    font-size: 20px;
    line-height: 30px;
}

.mf-font-size-clientpref-large .mw-body h1, .mf-font-size-clientpref-large.mw-body .mw-heading1, .mf-font-size-clientpref-large.mw-body-content h1, .mf-font-size-clientpref-large.mw-body-content .mw-heading1, .mf-font-size-clientpref-large h1 {
    font-size: 32px;
    line-height: 42px;
}

.mf-font-size-clientpref-large .mw-body .mw-heading2, .mf-font-size-clientpref-large.mw-body h2, .mf-font-size-clientpref-large h2 {
    font-size: 28px;
    line-height: 38px;
}

.mf-font-size-clientpref-large .mw-body .mw-heading3, .mf-font-size-clientpref-large.mw-body h3, .mf-font-size-clientpref-large h3 {
    font-size: 24px;
    line-height: 34px;
}

.mf-font-size-clientpref-large .mw-body .mw-heading4, .mf-font-size-clientpref-large.mw-body h4, .mf-font-size-clientpref-large.mw-body .mw-heading5, .mf-font-size-clientpref-large.mw-body h5, .mw-body .mw-heading6, .mf-font-size-clientpref-large.mw-body h6, .mf-font-size-clientpref-large h4, .mf-font-size-clientpref-large h5, .mf-font-size-clientpref-large h6 {
    font-size: 20px;
    line-height: 30px;
}

.mf-font-size-clientpref-large #siteSub {
    font-size: 18px;
    line-height: 28px;
}

.mf-font-size-clientpref-large .mw-parser-output .reflist {
    font-size: 18px;
    line-height: 28px;
}

See this patch for how DST is currently thinking this will be done technically.

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		• Sarai-WMDE	T322383 TypeaheadSearch line-height, thumbnail size don't match Figma spec or each other
Open		None	T322384 Increase MenuItem / TypeaheadSearch line-height
Stalled		None	T372653 Font size setting should apply consistently across mobile and desktop
Open	BUG REPORT	None	T387983 Select dropdown for the "Reason" field in Codex Special:Block has text not in the center of the element
Resolved		DTorsani-WMF	T363845 [EPIC] Typography scale and font sizing
Resolved		Jdrewniak	T369125 Evaluate the design of the revised Codex type scale

Event Timeline

DTorsani-WMF created this task.Jul 3 2024, 12:24 AM

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Roadmap). · View Herald TranscriptJul 3 2024, 12:24 AM

DTorsani-WMF edited projects, added Design-System-Team (DST-Sprint-26 (2024-06-24 to 2024-07-05)); removed Design-System-Team.Jul 3 2024, 12:25 AM

DTorsani-WMF edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-26 (2024-06-24 to 2024-07-05)).Jul 3 2024, 4:58 PM

CCiufo-WMF removed a project: Epic.Jul 3 2024, 9:49 PM

CCiufo-WMF moved this task from Inbox to DST-Sprint-26 (2024-06-24 to 2024-07-05) on the Design-System-Team board.Jul 3 2024, 10:00 PM

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-26 (2024-06-24 to 2024-07-05)); removed Design-System-Team.

DTorsani-WMF moved this task from DST-Sprint-26 (2024-06-24 to 2024-07-05) to DST-Sprint-27 (2024-07-08 to 2024-07-19) on the Design-System-Team board.Jul 10 2024, 1:27 PM

DTorsani-WMF edited projects, added Design-System-Team (DST-Sprint-27 (2024-07-08 to 2024-07-19)); removed Design-System-Team (DST-Sprint-26 (2024-06-24 to 2024-07-05)).

CCiufo-WMF triaged this task as Medium priority.Jul 11 2024, 2:58 PM

DTorsani-WMF reassigned this task from DTorsani-WMF to Jdrewniak.Jul 16 2024, 5:09 PM

DTorsani-WMF moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-27 (2024-07-08 to 2024-07-19)) board.Jul 16 2024, 6:06 PM

DTorsani-WMF updated the task description. (Show Details)Jul 18 2024, 3:49 PM

CCiufo-WMF moved this task from DST-Sprint-27 (2024-07-08 to 2024-07-19) to Following on the Design-System-Team board.Jul 22 2024, 5:02 PM

CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-27 (2024-07-08 to 2024-07-19)).

The Web and DST teams agreed with the general approach proposed in this task, for scaling article content only. The question of scaling the rest of the interface is captured in T370549. Further investigation is needed to finalize the PoC in Codex and figure out how it can be integrated into the skins. @Jdrewniak will lead independent spikes for integrating the proposal into Vector and Minerva.

Jdrewniak mentioned this in T375934: [Spike][Vector] Scope Codex typographic scale adoption for Vector 2022 skin.Sep 27 2024, 9:34 PM

I just created the two spikes mentioned above
https://phabricator.wikimedia.org/T375934 - [Spike][Vector] Scope Codex typographic scale adoption for Vector 2022 skin
https://phabricator.wikimedia.org/T375940 - [Spike][Minerva] Scope Codex typographic scale adoption for MinervaNeue skin