Vertical jumping letters on webfont

Glyphs
1

Hey,

i was creating a font in glyphs and converted it to a webfont to use it in my current project.
this project is using node webkit and will run on windows. I know that font rendering in e.g. Chrome on Windows is still a big issue but what i am experiencing with this self made font especially in very small sizes is even worse than the usual font rendering:
As you can see in the attached screenshot, the glyphs are jumping vertically. This happens especially on the small sizes of the bold version of my font. Bigger sizes (from 18px upwards) seems to render way better.

To be honest i dont really get the settings side of the font so i just adapted the numbers which worked for the other font weights (my regular and light version render pretty good actually). I will attach a screen of the settings also.

Any idea how i can solve this. Thanks a lot!

cheers
Sean

2

You need to set up the hinting properly. That is a hinting issue, at least it looks like that.

3

Try doubling the size of your alignment zones. I’ve noticed that Directwrite doesn’t always suppress overshoots correctly when points are within a few units of the relevant upper or lower boundary, and increasing the zone size fixes this.

4

As what format did you export? TrueType or OpenType? With or without autohinting?

5

What format? What browser? What kind of hinting (manual, automatic) are you applying?

How did you convert? Perhaps try the built-in webfont export. Please understand that if you are using a conversion service on the web, we cannot help you. Many services override the source font’s settings.

It is not rocket science. Read the autohinting tutorial on this website, please. Make sure all settings are interpolatable (e.g., same number of zones and stems).

I wonder why the x-height zone is so large, though. I would first try to only increase them by one unit. The BlueFuzzer script in my GitHub scripts does that.

Also, check your path directions.

6

thank you very much for your help guys.
just changing the cap height to size 16 or higher worked for me. Definitely less jumpy now. I experimented a lot with different values and ended up following the steps in the tutorial: https://www.glyphsapp.com/tutorials/hinting-postscript-autohinting
there was no difference to the previous font version where just changed the the cap height size but i think this is still more clean now.

I still experience some visual bugs in the font sizes between 15px and 18px where the font looks like it has not enough weight and is way too close to the regular version. as long as i avoid those font sizes (e.g. using 14px) it looks good now. Still this bug only appears in the horrorful render engine of Webkit browsers on Windows.

thanks again for your help guys. this bug caused me a lot of headache and i am happy to see it sort of working now. I will again try to improve it for the next project but for the current one it should to the job.

cheers
sean

edit: ah and by the way, there is a built-in webfont export? i couldnt find it. i was now exporting as otf and then using FontPrep to generate the webfont kit like recommended in one of the tutorials here. (cool app!)

7

Which tutorial? I think FontPrep produces files that are too large.

In Glyphs 2.