Closed Bug 1463685 Opened 2 years ago Closed 2 years ago

Investigate increasing the panel header font-weight

Categories

(Firefox :: Theme, enhancement, P3)

enhancement

Tracking

()

RESOLVED FIXED
Firefox 62
Tracking Status
firefox62 --- fixed

People

(Reporter: dao, Assigned: dao)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

(In reply to Marco Bonardo [::mak] from bug 1459885 comment 15)
> ::: browser/themes/shared/customizableui/panelUI.inc.css:1506
> (Diff revision 4)
> >  }
> >  
> >  .panel-header > label {
> >    flex: auto;
> >    font-size: 13px;
> >    font-weight: 500;
> 
> Ok, it is not bold at all for me yet, it starts looking bold at font-weight:
> 501. And at that point all the title labels in the Library panel look much
> better.
> Indeed I never understood why those labels were looking so poorly...
> 
> Could we evaluate bumping this up to 550?
Priority: -- → P3
So, it looks like Segoe UI has a semi bold, but it's not visible in these panels, it pretty much looks like normal, and that's strange.
Let me add a sshot.
Attached image Screenshot.png
The same problem exists in CustomizeMode.inc.css
Segoe UI Semibold has font-weight:600. Weights in the range 400-500 will preferably map to the Regular face rather than a bolder one (this is specified in some detail in CSS Fonts).

So the Segoe UI family has no face that corresponds exactly to weight 500, so a request for 500 will map to the Regular (400) weight. A requested weight greater than 500 will map to the next-higher available weight, so 501 will map to Semibold.

Anyhow, in short: if you want the Semibold face, font-weight:600 is the appropriate value to use.

(Using font-family:Segoe UI Semibold also works, but is not the preferred approach; the semibold face is really the 600 weight of the Segoe UI family, and referring to it as a separate family name is a hack for backward compatibility with limitations of the Windows GDI font model.)
Flags: needinfo?(jfkthame)
Edge agrees with you, Chrome doesn't: https://codepen.io/anon/pen/KRYLbN (it considers semi bold anything in [450, 649])
IE only considers semibold 600 and bold 700.

Anyway, it looks like on Windows the right value for semi bold is 600, so we should probably update those styles.
Interesting; sounds like Chrome is deviating from the spec[1], which says that:

# If the desired weight is inclusively between 400 and 500, weights greater than or equal to 
# the target weight are checked in ascending order until 500 is hit and checked, followed by
# weights less than the target weight in descending order, followed by weights greater than 500,
# until a match is found.

which means that with weights 400 and 600 available, a request for 450 should search up to 500, but then (not having found anything) it should search lighter weights before continuing beyond 500 to bolder ones.

With the advent of variable fonts, we're hoping to add a bunch more font style-matching tests to WPT, which should shine a spotlight on issues like this.


[1] see https://drafts.csswg.org/css-fonts-4/#ref-for-propdef-font-weight%E2%91%A0%E2%91%A0
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED
Comment on attachment 8980232 [details]
Bug 1463685 - Change font-weight:500 to 600 to get a semibold font on Windows.

https://reviewboard.mozilla.org/r/246380/#review252500

What about the same issue in browser/themes/shared/customizableui/customizeMode.inc.css ?
Some headers there are inconsistent with this change, especially customization-lwtheme-menu-header and customization-lwtheme-menu-recommended
Attachment #8980232 - Flags: review?(mak77) → review+
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/916908593f73
Change font-weight:500 to 600 to get a semibold font on Windows. r=mak
https://hg.mozilla.org/mozilla-central/rev/916908593f73
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 62
You need to log in before you can comment on or make changes to this bug.