plex icon indicating copy to clipboard operation
plex copied to clipboard

Issue with font rendering quality 16px - IBS Plex Sans on Firefox

Open garygreen opened this issue 1 year ago • 5 comments

On Firefox: 102.0.1 (64-bit) / Windows Browser Scaling: 100% scale Font: IBM Plex Sans, weight 400

16px in Firefox

image

16px in Chrome

image

This issue was reported to Mozilla under this ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=1562857

They discovered that in the IBM Plex Sans file there is some "GASP" settings that apply at specific font sizes, in particular when the font hits 16px and below there is no anti-aliasing applied. However, it seems Chrome doesn't respect that setting, so always looks good.

If the font is changed to 16.1px in Firefox it looks crisp and just as good as Chrome:

16.1px in Firefox image

So the curious thing is.. if Chrome not respecting the IBM Plex Sans GASP settings makes it look crisp at 16px and below... shouldn't the font be updated to anti alias at lower ranges? It seems like a font configuration/optimization issue.

Possibly Related: https://github.com/IBM/plex/issues/402

garygreen avatar Jul 25 '22 21:07 garygreen

Thanks for the report.

Does this behaviour occur with the Plex Sans webfonts hosted on this repository? Or are the fonts from a different source? (And if so, can you supply a copy?)

BoldMonday avatar Jul 26 '22 07:07 BoldMonday

This is on Windows 10 using Google Fonts. It's actually an issue that can be tested right now on the Google Fonts page.

https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm#standard-styles

Notice when switching to 16px and below the font stops anti-aliasing, causing a substantial shift in style and blotchiness

Tested in Firefox

https://user-images.githubusercontent.com/1702638/181025378-6b6b0a2a-ebb5-45fa-8fdd-f9b773a5473f.mp4

garygreen avatar Jul 26 '22 14:07 garygreen

Thanks for the screen recording. Unfortunately the fonts hosted by Google are beyond our control. This is explained in the issue you referred to in the original post.

Please let me know if the problem persists when using the fonts hosted on this repository. Then we can take a deeper look into the issue.

BoldMonday avatar Jul 26 '22 16:07 BoldMonday

You mention in that original post:

It is no wonder that the fonts render differently than they're supposed to because Google stripped out all the hinting information that we painstakingly put in the original files.

Are you saying that Google fonts specifically stripped out the information? If so, that doesn't make sense why Chrome doesn't have an issue displaying the font, but Firefox does... because it's loading the exact same woff files in both browsers. presumably with the exact same hints removed?

Or are you saying that Google Chrome ignores the hints when rendering, but presumably Firefox respects them, so displays them differently? If so, that suggests there is an optimization issue with the font.

garygreen avatar Jul 26 '22 18:07 garygreen

I'll try using the fonts hosted in the repository

garygreen avatar Jul 26 '22 18:07 garygreen