Unexpected grayscale smoothing on Chrome/Windows

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?

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

Uh, didn’t know that, thank you!

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

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.

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.