Page MenuHomePhabricator

[Visual change/refactor] Change 13px font-size in Vector toolbar to 14px
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Assigned To
Authored By
Jdrewniak
Sep 11 2023, 4:20 PM
Referenced Files
F40631343: screenshot 177.png
Oct 27 2023, 5:22 PM
F40631296: screenshot 107.mov.gif
Oct 27 2023, 5:22 PM
F40630010: screenshot 106.mov.gif
Oct 27 2023, 5:22 PM
F40629923: screenshot 105.mov.gif
Oct 27 2023, 5:22 PM
F40628645: screenshot 104.mov.gif
Oct 27 2023, 5:22 PM
F40628487: screenshot 176.png
Oct 27 2023, 5:22 PM
F40628369: screenshot 175.png
Oct 27 2023, 5:22 PM
F40628010: screenshot 174.png
Oct 27 2023, 5:22 PM
Tokens
"Dislike" token, awarded by AlbanGeller."Dislike" token, awarded by Guycn2.

Description

Based on the investigation in T344515, we've uncovered that there's some unnecessary font-sizes in Vector that can be standardized.
Among them the 13px font-size in the toolbar area.

Screenshot 2023-09-11 at 12.13.27 PM.png (967×1 px, 533 KB)

This task focuses on changing the toolbar area font-size from 13px to 14px.

Technical notes

  • This font-size is set via the @font-size-tabs variable, which is defined as @font-size-tabs: unit( 13 / @font-size-browser, em );
  • This variable is used in mixins that are used in legacy Vector.
  • This variable is also used in .mixin-vector-arrowed-dropdown-toggle and in other places such as the watchstar width & height in legacy Vector.

Due to this interdependence, this task should be undertaken after the variables in legacy and modern Vector have been separated.

AC

  • The font-size of the text in the toolbar is 14px.
  • Text in the dropdowns (e.g. Tools menu) in the toolbar is 14px
  • When the Tools menu is unpinned (in the left sidebar) the text size is still 14px
  • The text in the language variants dropdown is 14px

Event Timeline

ovasileva set the point value for this task to 3.Sep 14 2023, 5:45 PM
Jdlrobson renamed this task from [refactor] Clean up irregular (small) font-sizes in Vector to [Visual change/refactor] Clean up irregular (small) font-sizes in Vector.Sep 14 2023, 5:45 PM

After speaking with @JScherer-WMF about these changes, we came to the conclusion that many of the changes proposed in this ticket overlap with work that involves introducing a typographic scale in Vector (e.g. https://phabricator.wikimedia.org/T313828#8179161) and we want to approach that work more gradually after changing the body-text font-size in Vector. To that end, we should descope this task to focus on just elements that have undue typographic complexity and don't affect the body area, which really just boils down to fixing the 13px font-size in the toolbar area.

That work itself is actually related to T346363: Investigate feasibility of incorporating Zebra refactors into default Vector styles because the refactors in the Zebra design actually addressed this issue.

So in summary, I'm going to descope this task and mark it as a subtask of that Zebra spike.

That work itself is actually related to T346363: Investigate feasibility of incorporating Zebra refactors into default Vector styles because the refactors in the Zebra design actually addressed this issue.

My mistake, this issue was actually not addressed in Zebra, so it can be tackled independently.

Jdrewniak renamed this task from [Visual change/refactor] Clean up irregular (small) font-sizes in Vector to [Visual change/refactor] Change 13px font-size in Vector toolbar to 14px.Sep 18 2023, 3:32 PM
Jdrewniak updated the task description. (Show Details)

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

[mediawiki/skins/Vector@master] Normalize small font sizes in Vector 2022

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

There are pixel implications for this change - a few options available:

  1. mark as valid in pixel (likely not possible)
  2. include in previous release (cherry-pick to previous deploy branch)
  3. delay merging this patch

We've decided to go forward with option 2 if possible, though may need to go with 3

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

[mediawiki/skins/Vector@wmf/1.42.0-wmf.2] [Visual change] Normalize small font sizes in Vector 2022

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

Change 966897 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Visual change] Normalize small font sizes in Vector 2022

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

Re: User-notice/Tech News - What wording would you suggest as the content, and when should it be included (i.e. both which week, and which section of the page)? That information is always needed. Thanks!
I've read the Task description and comments, and from a glance it looks like it's already live, so I think the entry would be located in the Recent Changes section of this upcoming edition, and worded something like this, but you may have better ideas (and perhaps extra links?), or clarifications (is it just 1 or 2 skins?):

Recent changes

  • In the Vector 2022 skin, the default font-size of all content in the Tools menu has been increased slightly to match the font-size used in page content. (1)
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The font-size of the text in the toolbar is 14px.

screenshot 171.png (398×1 px, 99 KB)
screenshot 172.png (398×1 px, 107 KB)
screenshot 173.png (398×1 px, 108 KB)
screenshot 174.png (398×1 px, 108 KB)
screenshot 175.png (398×1 px, 106 KB)
screenshot 176.png (1×1 px, 422 KB)

✅ AC2: Text in the dropdowns (e.g. Tools menu) in the toolbar is 14px

screenshot 104.mov.gif (840×474 px, 936 KB)
screenshot 105.mov.gif (840×474 px, 1 MB)

✅ AC3: When the Tools menu is unpinned (in the left sidebar) the text size is still 14px

screenshot 106.mov.gif (840×474 px, 910 KB)

❓ AC4: The text in the language variants dropdown is 14px
@Jdrewniak, the "Search" looks like a calculated font that is 16.002px, otherwise the rest of the fonts are 14px. Is "search" out of scope?

screenshot 107.mov.gif (840×606 px, 1 MB)

screenshot 177.png (877×567 px, 118 KB)

@Quiddity - maybe something like:
In the Vector 2022 skin, the default font-size of a number of navigational elements (tagline, tools menu, navigational links, and more) has been increased slightly to match the font size used in page content. (1)

Change 968314 abandoned by Jdlrobson:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.2] [Visual change] Normalize small font sizes in Vector 2022

Reason:

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

"Search" looks like a calculated font that is 16.002px, otherwise the rest of the fonts are 14px. Is "search" out of scope?

Thanks for noting the ULS font-size @Edtadros, it looks like that comes from OOUI, when trying to achieve a 16px font-size from a relative 14px base font size
https://gerrit.wikimedia.org/g/oojs/ui/+/dc8c5c61f9627b7f0188d206155c305c760d27a3/demos/styles/demo.css
16/14=1.1428571429, rounded to 1.143em, resulting in 16.0002px (except for IE, which would have rounded that to 16px).

Given that it's a legacy value, I don't think it's worth fixing at this point, so I think that's fine.

Mabualruz updated the task description. (Show Details)

I checked the font size on logged in user seems all the changes took place as described

I'm sorry to be "that guy", but I'm not a big fan of this change. Having these elements (especially everything in #contentSub) a smaller font-size made it more immediately apparent that these elements are not part of the page content and are something else. Now everything sort of just blends together visually. Any chance of restoring the 13px size?

I'm sorry to be "that guy", but I'm not a big fan of this change. Having these elements (especially everything in #contentSub) a smaller font-size made it more immediately apparent that these elements are not part of the page content and are something else. Now everything sort of just blends together visually. Any chance of restoring the 13px size?

Agreed. I am using custom CSS to restore reasonable semantic size and sensible spacing to the two sidebars. If you are using Vector 2022, you will need to adjust your personal CSS. Feel free to contact me on my talk page on en.WP for help. My custom CSS for Vector 2022 is at https://en.wikipedia.org/wiki/User:Jonesey95/common.css

I agree with the two comments above me. This change makes it more difficult to distinguish between the main content of the page and the elements surrounding it.

Plus, some of the Recent Changes and Watchlist filters (such as the namespaces dropdown) now look way too large compared to the rest of the page.

The previous font sizes were more user-friendly, IMHO.

Was it intentional that this change also applied to other text of lesser importance (and therefore semantically smaller in the design until this change) such as the text output by the short description gadget?

Specifically, I'm seeing problems with the .mw-page-description and .ext-discussiontools-init-pageframe-latestcomment CSS classes. There may be more text that has accidentally been enlarged and that should still be semantically smaller than body text.

I agree with the comments above, I much prefer the original sizing, it isn't as distracting on the page, especially in cases such as the redirect message. Another thing this changes is the font size of diffs, and this slight change makes it just a bit more difficult to navigate.

I opened a task T350833 in order to address the concerns mentioned above.