Unexpected grayscale smoothing on Chrome/Windows

romanshamin · June 30, 2021, 1:13pm

Hey! I’m on a hinting stage with my font, and I’m testing it under Windows 10 Pro. I set up auto hinting, didn’t touch manual TrueType instructing.

I exported the font as ttf with TrueType Outline Flavour. Then, I made a test webpage on Codepen.io and included the ttf as @font-face. Finally, I asked my friend with Windows to make a screenshot.

I think it looks great. Autohinting’s work is truly magical.

I do not understand why the fonts from Codepen UI use ClearType smoothing, whereas my font uses grayscale. I googled a lot but still have no answer.

Is it my font’s issue or Chrome’s one?

mekkablue · June 30, 2021, 2:31pm

There is no way you can influence what the rasterizer is going to choose.

romanshamin · June 30, 2021, 2:52pm

Uh, didn’t know that, thank you!

In this case, I assume there’s nothing more I can do for hinting.

mekkablue · June 30, 2021, 9:40pm

Thinking of it, there may be one thing: the GASP setting, available as a custom parameter. Perhaps the rasterizer reacts to it.

Other than that… you can specify different hinting for different intents, but that should not predetermine the rendering intent.

romanshamin · July 1, 2021, 11:25am

Some news. When we started looking through different browsers, we discovered that Chrome uses its own renderer and as far as I know it’s always grayscale. MS Edge makes a mess:
image (6)

And, finally, in Firefox the renderer prefers ClearType. Bingo!

I believe that means everything is correct on a font side.