What are the differences between WOFF and WOFF2 and any hinting advice

Eryk Kosinski

WOFF2 File. Left with autohint and on right with no hint.




WOFF File. Left with autohint and right with no hint.

WOFF2 has some glyphs taller than others, but WOFF does not and all is aligned properly across weights. On the other hand WOFF2 seem to be stronger and more clean in appeal across weights than lighter WOFF.

What should i do to achieve the appeal of WOFF2, but alignment of WOFF. 

Im a total newbie in hinting. I use Fontlab7 and site I used to test web fonts was webfonttest site.

Georg Seifert

WOFF is only a compression format. The font inside is not changed at all. Somehow you put different font into each container. 

How did you make them?

Eryk Kosinski

Georg Seifert said:

WOFF is only a compression format. The font inside is not changed at all. Somehow you put different font into each container. 

How did you make them?

I used exporting font as WOFF and WOFF2 in FontLab7 with 2 of exports being customised to not do hinting at all and 2 to do so as it is in default export settings. 

John Hudson

Compare all the export option settings for the two webfont formats carefully. FontLab 7 has some inherited poor assumptions in the default settings for these, such that you can get WOFF2 exported as TTF and WOFF as CFF, i.e. not only with different hinting models but also different outline formats.

Personally, I recommend not using font tools to export web font formats, but instead build the fonts and then wrap them as WOFF2 and, if needed, WOFF using external tools. That way, you are sure that what is going into the webfont wrappers is exactly compatible with the non-webfont versions.

Mike Duggan

If you are looking for general advice on whether to add hinting of not, you should consider that auto hinting is just that, never perfect and always needs adjustments. In the first example you show, the left and right looks the same, both have bad problems with alignment at x-height, a showstopper.... In the second example the hinted version on the left looks sharper, but still very unrefined, descenders look too low, and the y-stems look to be using full pixels, which makes the e and a look pinched. The right example in the second image, does look unhinted. Perhaps take much closer look, and if you only intend to use auto hinting and no further edits to the hints, ask if its an improvement or not? Hint once and well is usually my advice or don't hint at all. There are other methods also of not rounding the stems to full pixels which is an option in TTF Autohint and usually gives the best results for modern rendering using DirectWrite in most all browsers.