1703557 - Relative weights on text with a @font rule not different enough between `400` and `bold`

Status: NEW

(Core :: Graphics: Text, defect)

Description

[Paul Adenot (:padenot)]

Website is https://mixtapeclub.net/, I think the only relevant style bits is that a @font is used, and then the font-weight of regular text is 400 and bold text is bold.

I find Chrome a lot more legible, but I don't know what's expected, or if anything is expected.

The screenshots have been captured on macOS, but I also repro on Linux (between Chrome and Firefox).

Comment 1

[Paul Adenot (:padenot)]

Attachment: firefox.png

Comment 2

[Paul Adenot (:padenot)]

Attachment: chrome.png

Comment 3

[Paul Adenot (:padenot)]

Attachment: safari.png

Comment 4

[Jonathan Kew [:jfkthame]]

(In reply to Paul Adenot (:padenot) from comment #0)

Website is https://mixtapeclub.net/, I think the only relevant style bits is that a @font is used, and then the font-weight of regular text is 400 and bold text is bold.

I find Chrome a lot more legible, but I don't know what's expected, or if anything is expected.

The screenshots have been captured on macOS, but I also repro on Linux (between Chrome and Firefox).

Looks like Firefox and Safari are pretty similar here, while Chrome is distinctly different.

The issue is that the site is using a webfont "HELVETICA LT MEDIUM" which they provide as just a single weight:

@font-face{font-family:'HELVETICA LT MEDIUM';src:url('https://static1.squarespace.com/static/5ff9e650a24aef1e5b9101e1/t/5ffc2b5e5b771d702dec9c77/1610361694902/Helvetica+LT+Condensed+Medium.ttf')}

but then they use this with <strong> elements that have font-weight: bold. As no actual bold face has been provided, the browser applies a "fake bold" effect, the implementation of which varies quite a bit between browsers and platforms.

(The site does actually have a bold version of the font, but they deploy it as a separate font-family name, so as far as the browser is concerned there's no connection between the "medium" and "black" faces, so it doesn't get used for font-weight: bold.)

So basically, it's poor authoring, resulting in the use of synthetic-bold effects, which is never typographically a good choice. And there's no particular standard for how it is implemented.