##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, Standard, Medium, 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**
| **h1** | 28.8/39.6 (collapsed 24/24) | 26/38 | 28.8/39.6 (collapsed 24/24) | 28/40 | 28.8/39.6 (collapsed 24/24) | 32/44 | 27.2/37.4 | 28/40 | 27.2/37.4 | 30/42 | 27.2/37.4 | 32/44
| **h2** | 21/28.875 | 22/34 | 24/33 | 24/36 | 30/41.25 | 28/40 | 24/33 | 24/36 | 24/33 | 26/38 | 24/33 | 28/40
| **h3** | 16.8/26.88 | 18/28 | 19.2/30.72 | 20/30 | 24/38.4 | 24/36 | 19.2/26.4 | 20/30 | 19.2/26.4 | 22/34 | 19.2/26.4 | 24/36
| **h4** | 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
| **h5** | 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
| **h6** | 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 | 20/30 | 16/26.4 | 16/26 | 18/28.8 | 18/28 | 20/30 | 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: 38px;
}
.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: 34px;
}
.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: 40px;
}
.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: 36px;
}
.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: 44px;
}
.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: 40px;
}
.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: 36px;
}
.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: 40px;
}
.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: 36px;
}
.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: 42px;
}
.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: 38px;
}
.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: 34px;
}
.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: 44px;
}
.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: 40px;
}
.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: 36px;
}
.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;
}
```
[[ https://gerrit.wikimedia.org/r/c/design/codex/+/1042373 | See this patch ]] for how DST is currently thinking this will be done technically.