ULS FileterInput - 16.002px

Convert font sizes and applicable sizes to rem's instead of em's.

Note that the weaker task of converting sizes from px is not solved yet, for which reason users who have set a default font size to a value other than the default 16px (more than 3%, according to some research), often see proportions distorted, see T313225: [EPIC] Various parts of MediaWiki don't respect default browser font size.

@bmartinezcalvo @Sarai-WMDE can you add a comment here with the typographic scale you're working on (noting that it's still in progress), and include the mapping between the heading sizes you've defined and the corresponding ones in Wikitext/Visual editor? I will then follow up with a prototype that uses those sizes.

In T313828#8178844, @alexhollender_WMF wrote:

@bmartinezcalvo @Sarai-WMDE can you add a comment here with the typographic scale you're working on (noting that it's still in progress), and include the mapping between the heading sizes you've defined and the corresponding ones in Wikitext/Visual editor? I will then follow up with a prototype that uses those sizes.

Of course! The last version (v9) of the WIP typographic scale that we're defining as part of Codex is available in this Figma file. The scale is currently a work in progress and shouldn't be considered a prescription, just a proposal open to adjustments. The heading sizing is strongly based off of the Style guide styles.

Here's a table mapping of the current Wikitext/Visual editor styles and their potential equivalent style(s):

Notes:

• We tried to use system sizing values as much as possible (this is easier to do with font sizes in theory, but harder to achieve with line heights unless we use rem – which we're considering).
• Font sizes are in em to allow for proper skin resizing, but they assume a 16px base, which will be incorrect in many contexts. We might need to use CSS functions – such as calc() or max() – to achieve the desired sizes. (I'm not sure if opting for rem would be an option in this case.)
• The aim is consolidating text styles as much as possible: on the one hand, trying to unifying styles instead of reflecting the current diversity found in production + on the other hand, creating a single scale that can be applied to define content hierarchy on both desktop and mobile.
• The scale fits the distinction between body (paragraph style, with increased line-height for enhanced legibility) and UI text (component text, convenient to keep elements sized properly)
• The "Small text" style represents the smallest allowed text style in production, based on accessibility recommendations (Related task: T312245)
• Superscript and Subscript styles haven't been defined as part of the Codex typographic styles yet

@Sarai-WMDE thanks so much for providing the specifications. I've created a prototype that allows us to see the proposed typographic scale for h1, h2, h3, h4, h5, and p elements. It does not yet include the changes for other elements (e.g. "computer code" or "small", listed in the table in the comment above).

Link to prototype: https://di-typography-update.web.app/Typography

• use the options panel in the bottom right to switch between the two
• other languages are available by editing the URL, eg https://di-typography-update.web.app/Типографика?ru

Questions:

• the line-height update on the h1 might not be having the desired effect — should it be getting more space between the h1 and the border beneath?
• in both the current and proposed systems the h2s (serif) and h3s (sans) are quite similar in size. I wonder if the h2s should feel slightly larger than the h3s?

cc @Volker_E @bmartinezcalvo

@alexhollender_WMF thank you for creating this prototype to test our fonts in the article, this is great!

Some feedback about the Proposed prototype:

1. H1 seems too big to me (at least with this combination of text sizes and paddings, maybe if the paddings are increased too it would be ok)
2. The subtitle From Wikipedia, the free encyclopedia should be 12/19.2 instead according to our new Typography scale
3. H3 Bold: I think with 18px Heading S would be enough since the title is already highlighted with Bold, so following the same proportional sizes 14-16px of the current article, I would use 16px for body text and 18px for h3. Also h3 with 20px seems a bit big to me.
4. If we are increasing the size of the article text maybe we should also increase the spacing between the elements in the article (e.g. Header-Title, Title-Toolbar,...) since now that the article text it's bigger some parts of the article seem bunched up. Some screenshots of places where I detect the space between elements is not enough:

Padding in the info boxes	Separation between images and text in the article

Thanks so much, Alex!! The prototype is extremely useful! My take on the shared feedback:

• Regarding h1:
  • Size: I was expecting for it to feel too big, indeed. The sweet spot might be at 28px, which would also be closer to Minerva
  • The main heading needs more space. I think the cause is that its wrapper (the div with the class header article-header) has a 40px height applied to it. We maybe could adjust that?

• H3: We could jump one style and use Heading S (18px), yes.

• Regarding spacing:
  • Agreed. It looks like we need to increase the global vertical spacing of the article together with the font, otherwise it really feels too dense and this even affects hierarchy. I quickly tried and changing the margin of the selector .mw-body-content p to 1em seems to do the trick overall, although we might need to apply specific bottom margins to the headings to maintains spacing when they're placed before anything that's not a <p>.
  • Thumbs and info boxes' paddings: these will also need to be adjusted. I hope we can use relative units too

@Sarai-WMDE @bmartinezcalvo thanks for the notes. I've updated the prototype (https://di-typography-update.web.app/Typography) with the following changes:

• Decrease h1 from 32px to 28px
  • Note: this means the h1 size is decreasing — it is currently 28.8px in production
• Remove height: 40px from h1 (though this doesn't have an effect, unless we increase the line height beyond 40px)
• Decrease From Wikipedia... tagline from 12.8px to 12px
• Decrease h3 from 20px to 18px
• Increase spacing between all p elements from 0.5em to 1em
• Increase the max-width on the content container from 960px to 1050px
  • Note: ultimately this will be controlled by the grid, and will be a controlled by the max-width of the main outer container

(Reminder to hard-refresh in order to see the changes)

That all looks pretty fine to me, all other points I see favorable.

Two things to consider:

• I don't think that reducing From Wikipedia... tagline goes well with our community nor does it look harmonious to me.
• The paragraph change is not in the prototype for me. 1em looks really good to me when updating myself via DOM Inspector.

Sorry, I'm a little confused. The main text in the table above (T313828#8179161) is 14 pixels, but in the prototype it is 16 pixels, where is the truth?

Hey @Iniquity. The table tried to list some of the main styles in production and provide their closer equivalent in the new typographic scale. All in order to validate the convenience of the new styles. I think that the body font size in the latest version of prototype is just an exploration of another initiative (the possibility of increasing the article body font size from 14px to 16px). This would be enabled by the system's styles if desired, but the final informed decision will need to be made by the Web team.

Resolving! Will track subtasks separately.