Closed Bug 1481091 Opened 2 years ago Closed 2 years ago

Sidebar header text is too thin on macOS

Categories

(Firefox :: Theme, defect, P3)

defect

Tracking

()

VERIFIED FIXED
Firefox 63
Tracking Status
firefox63 --- verified

People

(Reporter: fvsch, Assigned: guangysong, Mentored)

References

Details

(Keywords: good-first-bug, Whiteboard: [lang=css])

Attachments

(2 files)

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.
Blocks: 1367242
Flags: needinfo?(shorlander)
Keywords: uiwanted
Priority: -- → P5
Yeah, I agree the light weight is not working out, it should use normal weight.
Flags: needinfo?(shorlander)
Priority: P5 → P3
Hi, I just compiled Firefox for the first time.
May I solve this issue?
(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.
MozReview-Commit-ID: 7ibtu809KT0
File changed: src/browser/themes/shared/sidebar.inc.css
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.
Attachment #8999799 - Flags: review+
Pushed by dgottwald@mozilla.com:
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
Assignee: nobody → guangysong
https://hg.mozilla.org/mozilla-central/rev/d0054c7c0ed9
Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Flags: qe-verify+
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.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.