1481091 - Sidebar header text is too thin on macOS

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: firefox-sidebar-title-font-weight.png

This might be a matter of taste, but the sidebar header’s title since Photon has always struck me as a bit big, and more importantly too thin on macOS.

The current style computes to:

font-size: 16px;
font-weight: 100;

I’m not sure the font-weight:100 is intentional? It does not match the Photon guidelines:
https://design.firefox.com/photon/visuals/typography.html

(Not sure they should be applied to all UI bits, bit if they are this title might need to be `font-size: 17px; font-weight: 600` instead.)

What’s more, the very thin look contrasts poorly with the surrounding thick Photon icons on both sides of the text.

Attached: composite screenshot showing the current rendering (first), and increased font-weights. Subjectively, the sweet spot seems to be 300.

Note: on other operating systems, font-weight:100 may already be selecting a 400 or 300 font (if the system font used does not provide the lightest weights). So bumping the font-weight to 300 may not change the rendering on, say, Ubuntu or Windows.

Comment 1

[Stephen Horlander [:shorlander]]

Yeah, I agree the light weight is not working out, it should use normal weight.

Comment 2

[Dão Gottwald [:dao]]

Just need to remove this line:

https://searchfox.org/mozilla-central/rev/0f4d50ff5211e8dd85e119ef683d04b63062ed90/browser/themes/shared/sidebar.inc.css#10

Comment 3

[Guangyu Song]

Hi, I just compiled Firefox for the first time.
May I solve this issue?

Comment 4

[Dão Gottwald [:dao]]

(In reply to Guangyu Song from comment #3)
> Hi, I just compiled Firefox for the first time.
> May I solve this issue?

Sure! Let me know if you have questions.

Comment 5

[Guangyu Song]

Attachment: BUG 1481091 - Changed Bookmarks sidebar header text to normal to comply with Photon guidelines and match the style of subsequent headers

MozReview-Commit-ID: 7ibtu809KT0
File changed: src/browser/themes/shared/sidebar.inc.css

Comment 6

[Dão Gottwald [:dao]]

Comment on attachment 8999799 [details]
BUG 1481091 - Changed Bookmarks sidebar header text to normal to comply with Photon guidelines and match the style of subsequent headers

Dão Gottwald [::dao] has approved the revision.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d0054c7c0ed9
Changed Bookmarks sidebar header text to normal to comply with Photon guidelines and match the style of subsequent headers r=dao

Comment 8

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/d0054c7c0ed9

Comment 9

[Cristian Baica [:cbaica], Release Desktop QA]

The issue was reproduced using Fx 63.0a1 buildID: 20180805231147.
The issue was verified as fixed using Fx 63.0b6 buildID: 20180913141435 on Windows 10 x64, macOS 10.13.6 and Ubuntu 16.04 x64. The header title now has the correct line weight.