IBM Plex Sans: Issues with below 16px rendering

[danilo-leal]

Hello all!

I work for MUI and we have been revamping the whole company branding. As a body/common text typeface, we have chosen to use IBM Plex Sans but, recently, some of our contributors have reported issues with the rendering of the typeface.

Initially, it was happening in a lot of instances of the typeface. However, we ended up discovering that Next.js font optimization was messing with it... We turned it off and it apparently resolved for some of the contributors. But it seems like there are still issues with the rendering below 16px.

Before considering and doubling down on using another typeface, is this a known problem to you? Do you have any guidance as to how to deal with it? Please check this deploy preview for reference.

Cheers.

[twardoch]

Danilo,

1. Please state in which environments these "rendering issues" are visible (what hardware, OS, browsers etc.).

2. Please describe the nature of the "issues" more specifically.

3. Please include screenshots that illustrate the problem.

EDIT: I see that some screenshots and details are in the linked issue, but I guess it's always helpful to include this kind of info in where you're reporting.

[twardoch]

Also: which format of the fonts are you using? Static? Variable? OTF? TTF? Which version? Sourced from where?

[twardoch]

Note that AFAIK, variable fonts are not hinted so they'll render poorly. That's currently "by design".

Only the static fonts are hinted, esp. the TTF-based variants. They should look much better than the variable fonts.

[danilo-leal]

Sure, you're right, sorry for not having it done before. All of the reports we've received were in Windows, both in Edge and Chrome. It seems that macOS is not a problem. The issue is that the font seems to not render clearly, it apparently gets a little blurry/pixelated.

We're getting the font embedded from Google Fonts. Here's the document file.

For more screenshots and further investigation, I'm taking the liberty of tagging @samuelcolburn, one of our contributors who reported the issue, and @michaldudak, one of our Core maintainers to help with any more technical deep dive.

[twardoch]

I recommend that you compare the WOFF2s published in this repo with what Google Fonts serves. Google Fonts does not publish the fonts exactly as they're produced, they customize them to some extent. So those may be an issue with the Plex fonts published by the Plex team, or it may be an issue with GF.

[BoldMonday]

@danilo-leal I had a quick look at the Plex Sans woff2 font files that Google is serving you.

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. Plex fonts have been optimised to render well in sizes of 12 ppem and higher but then the fonts need to contain hinting information in the fpgm, prep and cvt tables.

I suggest to file an issue at Googlefonts, and/or use the appropriate font files from this repo.

Listing table info for "zYX9KVElMYYaJe8bpLHnCwDKjSL9AIFsdP3pBms.woff2":
    tag     checksum    length    offset
    ----  ----------  --------  --------
    GDEF  0x03B2036F        58         0
    GPOS  0x51F5220D     13870        58
    GSUB  0x3E912C52       492     13928
    OS/2  0x69D12288        96     14420
    cmap  0x3E4A624A       566     14516
    gasp  0x00180021        16     15082
    glyf  0x5EF4E82B     12797     15098
    head  0x75241533        54     27895
    hhea  0x07EC0409        36     27949
    hmtx  0x09C93551       992     27985
    loca  0x00000000         0     27895
    maxp  0x031302BC        32     28977
    name  0x1FFB3B8F       410     29009
    post  0x96CD23B9       831     29419

Listing table info for "zYX9KVElMYYaJe8bpLHnCwDKjWr7AIFsdP3pBms.woff2":
    tag     checksum    length    offset
    ----  ----------  --------  --------
    GDEF  0x03B2036F        58         0
    GPOS  0x2D9BF6D5     13678        58
    GSUB  0x3E912C52       492     13736
    OS/2  0x6A9C2494        96     14228
    cmap  0x3E4A624A       566     14324
    gasp  0x00180021        16     14890
    glyf  0xFC473B9C     12711     14906
    head  0x4212C609        54     27617
    hhea  0x08050419        36     27671
    hmtx  0x152D2E0F       992     27707
    loca  0x00000000         0     27617
    maxp  0x031302B0        32     28699
    name  0x20703BA1       418     28731
    post  0x96DE23D0       831     29149

Listing table info for "zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2":
    tag     checksum    length    offset
    ----  ----------  --------  --------
    GDEF  0x03B2036F        58         0
    GPOS  0x2DF0FA5E     13576        58
    GSUB  0x3E912C52       492     13634
    OS/2  0x696A2167        96     14126
    cmap  0x3E4A624A       566     14222
    gasp  0x00180021        16     14788
    glyf  0x9A280B6E     12836     14804
    head  0xE15DA6BB        54     27640
    hhea  0x07D903FC        36     27694
    hmtx  0x00BB3AA4       992     27730
    loca  0x00000000         0     27640
    maxp  0x031302F4        32     28722
    name  0x235C3E5F       442     28754
    post  0x96C123A8       831     29196

[BoldMonday]

Note that AFAIK, variable fonts are not hinted so they'll render poorly. That's currently "by design".

Only the static fonts are hinted, esp. the TTF-based variants. They should look much better than the variable fonts.

@twardoch That is not correct. The variable fonts contain variable TrueType hinting made in VTT. They also render well.

[danilo-leal]

Hey! Thanks for helping us out. We have just added the typeface locally as you suggested so it is of its best quality. Feel free to close this issue if you'd like. If any contributor comes back with issues, we'll let you know :) Thanks again!