Beta: Broken-looking 'g' and 't' characters in font

[patrickhlauke]

Not sure if it's due to some slightly broken hinting or similar, but the lowercase 'g' looks rather odd on the design system site at least on Windows (but correct on macOS).

Chrome/Windows

Firefox/Windows

Note that once you zoom in, the look of the 'g' sorts itself out, which is why I'm thinking it's some bad hinting.

EDIT: just noticed similar issue with the lowercase 't' as well

[patrickhlauke]

Issue is still present in the latest beta https://beta.w3.org/ (note the lowercase g in "Way to get involved", and the lowercase t in "Learn more about Web standards")

[NicolaSaunders]

@vivienlacourba I believe you're right, that this issue and #290 are related.

I am definitely not an expert when it comes to the intricacies of fonts - I had to search for what hinting meant!

Please @patrickhlauke correct me if I am wrong with any of the following:

• it seems the advice is to use hinted fonts on Chrome OS, Windows, and Linux, and unhinted fonts on Android and Mac OS X
• I guess the self-hosted WOFF/WOFF2 files don't provide the hinting that would be helpful
• we should download the TTF versions of the Noto fonts that we wish to use (for each different weight) and add these to the WOFF/WOFF2 files at /assets-src/fonts/notosans/
• then we should update each @font-face pattern at /assets-src/styles/sass/00-settings/_fonts.scss with a reference to the TTF file, for example:

@font-face {

  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/notosans/notosans-regular.woff2') format('woff2'),
  url('../fonts/notosans/notosans-regular.woff') format('woff'),
  url('../fonts/notosans/notosans-regular.ttf') format('truetype');

}

[patrickhlauke]

Please @patrickhlauke correct me if I am wrong with any of the following:

@NicolaSaunders I'll admit that I don't know the exact cause, nor solution, to this. just a hunch on my part that the weirdness is somehow related to some of the underlying metrics inside whichever font has been used :D

[NicolaSaunders]

Thanks! I think we should give this a go, and if it doesn't resolve it then we can raise it as an issue (and consider bumping up the font size in buttons).

[vivienlacourba]

@NicolaSaunders @patrickhlauke before we implement this change let me ping our Web Fonts expert @svgeesus to ask for his feedback on this issue.

[svgeesus]

What tool was used to create the woff versions of the original fonts?

[svgeesus]

I guess the self-hosted WOFF/WOFF2 files don't provide the hinting that would be helpful

That seems likely. But woff can contain the hinting information.

then we should update each @font-face pattern at /assets-src/styles/sass/00-settings/_fonts.scss with a reference to the TTF file

No, just recreate the woff fonts with hinting.

[NicolaSaunders]

Thanks @svgeesus

I believe the tool used to create the woff versions was the Google Webfonts Helper

Can I please check, to recreate the woff fonts in the best way, should we download the latest version of Noto Sans and run the hinted (TTF) files through a tool such as the Font Squirrel webfont generator?

[svgeesus]

Sure, but pay attention to the settings. Font Squirrel will recalculate hinting by default - I suggest to first select the option to preserve original hinting, check if the problem is resolved by that. Also keep all OpenType features because this problem might be caused by dropping them.

[NicolaSaunders]

I have regenerated the font files in the branch hotfix/update-webfont.

[deniak]

@patrickhlauke I just deployed @NicolaSaunders's fix. Can you check if that fixes the issue?
I only have an old windows 7 PC and I cannot reproduce the error with the latest chrome.

[patrickhlauke]

@deniak deployed on beta.w3.org you mean? if so sure, I can have a quick check in a minute

[deniak]

@deniak deployed on beta.w3.org you mean? if so sure, I can have a quick check in a minute

Yes, the new fonts have been deployed

[patrickhlauke]

Looking at the beta site just now, I still see the same as before

Looking closer at the t, I think it's actually correct/meant to look the way it does at the moment. Making the text larger, I see the shape of the t is meant to have that little spike/curve for its top-left horizontal bar thingy...

So this is really just the g that, at small sizes, looks odd/broken in Chrome at default size. so not sure how to go forward here, it may just be a problem/bug/issue with either Chrome's font rendering, in combination with my system's font smoothing/antialiasing, and the fact I'm not on a high-dpi screen perhaps?

Incidentally, I'd be interested to hear if anybody else is seeing the weirdly squished g on their system in Chrome? am I the outlier here?

[deniak]

@patrickhlauke do you have the same issue with other browsers?

[deniak]

This is how it appears with chrome 114 on mac:

[patrickhlauke]

@deniak sorry, should have added: it does look correct now in Firefox/Windows

So it's just a Chrome/Windows issue for me at the moment (or, to be more accurate, Chromium ... I see the same broken g in Edge/Windows too)

[patrickhlauke]

This is how it appears with chrome 114 on mac:

Yes, as mentioned in the OP, I see it correctly on Chrome/macOS, so this seems a Chrome/Windows-specific quirk

[deniak]

Thanks for the details, I'll try to get my hands on a more recent windows machine to try to reproduce the issue.

[NicolaSaunders]

I believe the WAI site uses the same Noto Sans font. Just out of curiosity @patrickhlauke would you mind having a look to see how the font display compares there?

[patrickhlauke]

checking the WAI site (and modifying one of their buttons to include the letter g), I don't see the problem (though it's obviously not necessarily a like-for-like comparison, as there may be other font metrics/styles at play, since I only see the broken g on the beta site at the default size, but it normalises as soon as I start making the text bigger/zoom)

(also note on the WAI site that the lowercase a doesn't look so squished at the top, there's clear separation between the "round part" of the letter and ... whatever you call the arch at the top of the a)

[NicolaSaunders]

Thanks. That's interesting - I think we should compare the styles/metrics across these two sites to see if this can be resolved with CSS.

[patrickhlauke]

Additional data point: just checked on my Surface 3 (which does have a high-dpi display), and the g looks correct there in Chrome. So this may be down to low-dpi displays / Chrome font rendering/smoothing on that particular variant/cut of Noto

[patrickhlauke]

Happy to report that when I look at the (now launched) site https://www.w3.org/ the g looks correct/not broken in Chrome. so whatever last minute change you may have done here, it worked.