1715946 - Consider replacing potentially hard to read `font-weight: lighter` with `font-weight: 300`

Status: REOPENED

(Toolkit :: Themes, defect, P3)

Description

[Vladislav]

+++ This bug was initially created as a clone of Bug #1715945 +++

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. Set custom font in OS, Firefox inherits it
2. Trigger "Server Not Found" error (open any non-existent domain, as for example)

Actual results:

Error title "Hmm. We’re having trouble finding that site." font is unreadable, because it's weight is overwritten in CSS ("font-weight: lighter").

Heading font-weight is overwritten because of aestethic feelings of designer.
Form over function.

Expected results:

Error title is rendered with readable font (css "font-weight: 700").
Heading font-weight is NOT overwritten because of aestethic feelings of designer. Function over form.

Comment 1

[Vladislav]

Attachment: given.png

Comment 2

[Vladislav]

Attachment: expected.png

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 5

[Jonathan Kew [:jfkthame]]

This is not a Core bug, it's about the design/styling of the error page content. I'm not sure exactly who owns that - moving to Firefox:General as a starting point for further triage.

Comment 6

[Andrei Purice]

Hey Vladislav,
Can you test the issue while in Safe Mode? You can find helpful info here : https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode .
Also a fresh new profile could help. You can find more about creating a new profile here : https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems#w_6-create-a-new-firefox-profile .
If possible, you can test this issue on the nightly build as well. Download the build from : https://www.mozilla.org/en-US/firefox/nightly/all/ .

Comment 7

[Vladislav]

Attachment: ff89_safemode.png

can reproduce issue in safe mode.
i won't test in nightly

Comment 8

[Andrei Purice]

Setting a component for this issue in order to get the dev team involved.
If you feel it's an incorrect one please feel free to change it to a more appropriate one.

Comment 9

[Punam Dahiya [:pdahiya]]

Moving to Security component to help triage Thanks

Comment 10

[Jonathan Kew [:jfkthame]]

This isn't a Security issue, it's about the styling (theme) of the error page. Moving to Toolkit:Themes.

I see there are several places in Toolkit (and Browser) CSS where font-weight: lighter; is used on titles/headings. This is no doubt intended to make them less "dominating" than the default Bold styling that those HTML elements would use. With default system fonts on macOS and Windows, it results in a lighter but still quite readable font, but on Linux this is less predictable. The Ubuntu system font, for example, has a Light face that works OK, but if a user's theme defaults to Lato instead (as I suspect is the reporter's case), font-weight: lighter (which resolves to weight 100) will use the "Hairline" face, which is the problem here -- it's extremely thin and not very readable.

A safer choice might be to use font-weight: 300 or even 200 in place of lighter, so that when the font family in use has a very wide range of weights, we don't go to quite such an extreme of lightness. (If there's only one lighter-than-normal face present, it won't make any difference; any less-than-400 value will resolve to the same light face. But if there are many degrees of lightness, we may not really want to pick the very thinnest here.)

Comment 11

[Vladislav]

(In reply to Jonathan Kew (:jfkthame) from comment #10)

if a user's theme defaults to Lato instead (as I suspect is the reporter's case)

It is Fira Sans.

This is no doubt intended to make them less "dominating" than the default Bold styling that those HTML elements would use

Heading is expected to be "dominating" and bold.

Comment 12

[Alex Cornestean]

Hello,

I reproduced the issue on the latest Nightly (91.0a1/20210706214242), Beta (90.0/20210705185941) and Release (89.0.2/20210622155641) under Ubuntu 16.0 LTS.

I did not manage to change fonts on Windows 10 though so cannot provide results from that platform.

Initially, using GNOME Tweak Tool I changed the fonts to arbitrary ones but there were no issues with the error title. However, changing the fonts to variations of Lato as Comment 10 suggested did the trick and I reproduced the issue. For further details, see the attached screenshot.

Comment 13

[Alex Cornestean]

Attachment: Screenshot from 2021-07-07 14-01-16.png

Comment 14

[Adolfo Jayme]

As of this writing, Nightly no longer specifies ludicrously thin weights. This issue can be closed, but it’d be great if someone could identify the commit that solved the issue.

Comment 15

[Jonathan Kew [:jfkthame]]

It looks like this was changed by bug 1737043, where a .title-text { font-weight: 300 } property was added to aboutNetError.css, overriding the font-weight: lighter inherited from common-shared.css.

However, I see that there are still a number of occurrences of html|h1 { font-weight: lighter } in the toolkit CSS, so I am a bit concerned that although the specific case of the NetError page has been fixed, there may still be other places where the same issue would arise.

Comment 16

[Sam Foster [:sfoster] (he/him)]

(In reply to Jonathan Kew [:jfkthame] from comment #15)

It looks like this was changed by bug 1737043, where a .title-text { font-weight: 300 } property was added to aboutNetError.css, overriding the font-weight: lighter inherited from common-shared.css.

However, I see that there are still a number of occurrences of html|h1 { font-weight: lighter } in the toolkit CSS

:jfkthame is this gecko not correctly rendering the lighter font-weight? We can make the changes to 300 but this seems like a band-aid for a legitimate issue?

Comment 17

[Jonathan Kew [:jfkthame]]

No, AFAICS gecko is doing the correct thing with lighter, given the available weights in the Lato family.

Checking https://fonts.google.com/specimen/Lato?query=lato shows a "Light" face with weight=300, which I think would look reasonable here (if you don't want the default bold headings); but according to the CSS spec, lighter resolves to weight=100 (when the base weight in the context is 400), and that means we get the "Thin" (weight=100) face, which is extremely light.

Unless you really want a potentially very light face (depending on the font family being used), requesting 300 rather than lighter is the safer option.

Comment 18

[Sam Foster [:sfoster] (he/him)]

Ok so it looks like this particular bug can be resolved, but we might want to open new bugs to evaluate the other instances of font-weight: lighter case by case to see if those should be switched to a value of 300.

Comment 19

[Dão Gottwald [:dao]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #18)

Ok so it looks like this particular bug can be resolved, but we might want to open new bugs to evaluate the other instances of font-weight: lighter case by case to see if those should be switched to a value of 300.

Let's just morph this bug to cover that.

Comment 20

[Anna Yeddi [:ayeddi]]

Attachment: Fx-124.0a1.png

It looks like the issue was resolved with the bug Jules listed above.