Bold text not rendering for some fonts at font-weight: 600 e.g. 'Segoe UI'

[belzecue]

Description

I noticed this in my hosted 1.18.5 instance: bold wiki text was not showing as bold in latest Chrome browser. I went straight to try.gitea.io and reproduced the issue there on the current dev instance. Curiously, this issue does not present with Firefox, which renders the bold as expected, so it seems Chrome is rendering the same CSS differently [EDIT: more likely different fonts, as the Chrome instance was on Linux and the Firefox test was on a windows 10 box].

Video showing my experience:

desktop-2023-04-24_22.36.53.mp4

There seems to be two CSS definitions for STRONG that are related to this issue. When I disable one of them, as shown in the video, bold returns.

Gitea Version

try.gitea.io

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

1.20.0+dev-559-g75c62054a

Operating System

Linux (Debian)

How are you running Gitea?

try.gitea.io

Database

None

[wxiaoguang]

font-weight: 600 works for me in my Chrome on macOS.

I guess it's related to your desktop environment or your font library?

[wxiaoguang]

Actually, this (below) font is also "font-weight: 600". Could you try to manually set the font-weight to other values to try? eg: 900, bold, etc.

Screenshot:

[belzecue]

Doublechecking my Chrome bold display by testing at w3schools.com:

Can't repro missing bold on any other app or site, so far.

[wxiaoguang]

I guess it's related to font-weight value.

I can see that: font-weight: bolder works for you, but 600 not.

So could you help to confirm whether other values work? 900, bold (not bolder).

[belzecue]

Yes, setting it to 900 restores the bolding...

desktop-2023-04-24_23.04.01.mp4

[wxiaoguang]

Well, then it's still related to your font library

Your font doesn't render font-weight: 600 as bold , which is lighter than 900 / "bolder" 😭

What's the minimal value it could render as bold?

(ps: do you know your font's name?)

[wxiaoguang]

MDN has a page for bolding testing (the values in "Try it" could be changed)

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

[belzecue]

What's the minimal value it could render as bold?

601 !! LOL. Crazy. That does not seem right.

ps: do you know your font's name?

"Segoe UI" according to the CSS "computed" value in Chrome's inspector.

[wxiaoguang]

Well, maybe 601 is not wrong .... according to MDN

The "bold" starts from 700 ....

[wxiaoguang]

Maybe we need this PR: Use font-weight: bold instead of 600 #24307

[belzecue]

OK, looks to be just this font. For some reason it bucks the standards and only renders bold at 601 and higher.

I tested at https://developer.mozilla.org/en-US/docs/Web/CSS/font-family by modifying the last font to be 'segoe-ui' to display my font in the list, then I added 'font-weight:600' to all the displayed fonts, and only 'segoe-ui' failed to render in bold.

desktop-2023-04-24_23.19.02.mp4

[belzecue]

Maybe we need this PR: Use font-weight: bold instead of 600

Using font-weight:bold does seem safer and less prone to this kind of font edge case, and decouples from the actual underlying font weight. Good example here: https://www.quirksmode.org/css/text/fontweight.html

[silverwind]

700 seems to excessivly bold to me when semi-bold can be rendered. Show a screenshot of this please:

https://codepen.io/silverwind/pen/jOeBmvj

Here is MacOS:

[belzecue]

In Segoe UI, doesn't kick in until 700 (in this test; 601 otherwise).

[silverwind]

Hmm, seems your OS doesn't offer much in terms of bold variation. Such problems are usually Linux-exclusive.

[wxiaoguang]

Then font-weight: 610 seems a reasonable value for most users.

[silverwind]

@belzecue show screenshot of this one please: https://codepen.io/silverwind/pen/jOeBmvj

[belzecue]

Working. Although, as you observed, on this device it renders a uniform weight from 601 all the way up. No graduation. Perhaps to do with the display/desktop manager on my Linux installation.

[silverwind]

Yeah I guess your bold kicks in at > 600, we will use 610.

[silverwind]

Actually we'll go with 601, as you had already indicated that this works for you above.

[belzecue]

Chrome/Chromium has had problems with Segoe-UI before: https://bugs.chromium.org/p/chromium/issues/detail?id=791305&q=component%3ABlink%3EFonts%20bold&can=2

[silverwind]

I think what you are lacking is a font that supports more fine-grained boldening, likely called variable font. If there's a good one available, it could be considered for our font stack.