Hinting tools

Kosal Sen

I just saw noticed the release of Source Serif Pro and wondered about how foundries make things look good on screen at text sizes. I assume you can only get this quality with hand-tuned Truetype hinting. I'm only used to working in Glyphs, which does PS autohints.

If I'm careful about my zones and metrics in Glyphs, what would be a good workflow to get manually-tuned webfonts?
Do I export a UFO and hint in some other standalone hinting program? Or do I generate OTFs, convert it through font squirrel, and use something to fine-tune the output? Perhaps Glyphs is just not the tool to start in for this kind of work?

A little confused on the process.

Georg Seifert

Glyphs is a very good start for a webfont workflow.
Most people I know export a .ttf and manually add TT-instructions in FontLab, VTT or use ttfAutohint.
Glyphs 2 does support webfont export directly (woff, woff2 and eot) and build in ttfAutohint. And I’m working on manual TT-intructions.

There Jeremy Horus is working on a TT hinting tool for Robofont:

https://twitter.com/JeremieHornus/status/528446305081643008

Jackson Showalter-Cavanaugh

Generally speaking, TrueType hinting is done after you've finished making your font. Robofont, Glyphs, Fontlab, whatever, it doesn't really matter.

If you're interested in learning how to TrueType hint, this might be the most useful place to start: http://luc.devroye.org/tt_hinting_tutorial.pdf

Kosal Sen

Awesome, thanks for the resources, everyone. Frode, I'm not sure what tool you're asking about. Isn't hinting part of the process regardless of what tools allow/disallow it?

Georg Seifert

Frode, you mixed the quadratic and cubic.
And I'm working on that. And I even try to make the hinting work on (cubic) multiple master files.

Jason Campbell

since Glyphs doesn't work on Windows, how do you show rasterization in your hint tool? I assume you use Freetype? But to assume Freetype=Windows Cleartype isn't really realistic. The advantage to Fontlab is that if you use it in Windows, you get the native rasterizer. Likewise with VTT, which bundles the rasterizer.
Just wonderin'.

attar

And I even try to make the hinting work on (cubic) multiple master files.

Exciting perspective, Georg. I'd love to see this happen.

Martin Silvertant

What's your experience with ttfAutohint? I've used it on two typefaces for a client and I'm very happy with the results myself. Some letters could use some minor adjustments, but most of the work seems to be done.

Thomas Phinney

ttfa is the best autohinter out there that I've seen.

Thomas Phinney

It's just a little better than FontLab's in results, but it also produces very compact hinting code, making for much smaller fonts.

Martin Silvertant

I've been wondering though, to which extent is that relevant? Obviously I would want my fonts to be as small as possible, but are there things you would sacrifice in order to make fonts smaller? The darkest weight of the typeface I hinted became 187kb. Would that be too much for certain applications? Which OpenType features if any can be thrown out for web fonts? I notice more and more support for OpenType features, so I'm wondering if we wouldn't be re-implementing many features later which currently we're throwing out to save space.

I'm wholly ignorant on this topic as I only just got involved with hinting and web fonts.

Georg Seifert

The size of the font files in relevant for webfonts.

Martin Silvertant

Yes, but to which extent? Bandwidth is always increasing and most fonts are smaller than pictures. Obviously web designers also try to keep the file size of their pictures as small as possible, but the necessity of it has probably decreased somewhat over the years. One area where I think fonts should definitely be kept as small as possible is within the context of cellphone use. So I guess that means the entire web, still. But Internet for mobile phones is also increasing in speed and efficiency while the prices keep decreasing.

I'm not trying to make a point for the idea that we no longer need to limit file sizes considering technology keeps advancing, but I wonder where we're at now. Like, what kind of things can you currently leave out of web fonts to save space? Will we be leaving the same things out in 5 or 10 years from now or will we start to re-implement a lot of features? What size do you feel is the current limit for practical web fonts and what's a common file size?

PabloImpallari

Every single kb matters

Martin Silvertant

If that is really the case, isn't there a lot a type designer will sacrifice in order to keep the file size small? Why would you even include ligatures?

attar

187Kb isn't too bad, maybe subsetting the font would help. I wouldn't remove stuff like ligatures, but it has to be enabled manually via CSS using font-feature-settings (enabled by default in Safari or if you use legacy table it is recognized natively).

Speking of which I was wondering, can one generate high_level hinting e.g. in FontLab with ttfautohint? That would be great for the fine tuning process.

Martin Silvertant

What does subsetting mean?

I suppose the standard ligatures should be kept, but mostly I added what I call automatic ligatures, where I design an alternate letter (like an /f with a shorter terminal) that is activated when placed in front of certain other letters. For this typeface I discarded the connected ligatures I did before as the disconnected ligatures are less obtrusive. Do you know if such functions can also be activated on the web? I did put it in the standard ligatures feature. If it doesn't work I can drop a few letters already. And what about numeral sets like tabular and oldstyle?

I'm not sure what you mean by high_level hinting in FontLab and I don't know if you can use it within FontLab. Once I've finished a typeface I save the fonts as both otf and ttf and just let ttfautohint do its work on the ttf fonts. I think it adds about 30kb to the file size but the difference is quite dramatic, particularly at smaller pt sizes.

attar

> What does subsetting mean?

Restricting the font to a particular subset of glyphs, pyftsubset does that.

> Do you know if such functions can also be activated on the web?

Via font-feature-settings, yes. Still have to use prefixed versions for all the browsers out there.

> I'm not sure what you mean by high_level hinting

Visual hinting as in Microsoft VTT, with arrows linking stems.

Just found the answer to my question: "Note that FLS can­not con­vert (decom­pile) the low-​​level TT hint­ing into the high-​​level TT hinting."

attar

(Did the maker of this website find out about Markdown at some point?)

Martin Silvertant

Visual hinting as in Microsoft VTT, with arrows linking stems.

How does this work? I tried to find videos but there don't seem to be any. Recently I watched a video presentation by Bruno Maag where he explains some things about hinting and rendering among other things, and I noticed these weird ropes hanging on the letters. I had no idea what they were and I assumed they had some clarifying purpose for the company and had nothing to do with the video. Now I see the illustrations on the Microsoft VTT pages I realize it's a hinting technique. So what do the ropes do?

Jason Campbell

VTT is a tool for manually hinting fonts, it's in a way similar to the Manual hinting interface in Fontlab. The difference is it's more powerful, but it also has a steeper learning curve. You can still get better results from a font manually hinted in VTT (if done by an experienced hinter) than any autohinter can give you. But whether the difference is worth the time (and therefore expense), I'll leave up to you.

What exactly the graphics do is probably the subject of another thread, or maybe even a session at Crafting Type.

attar

> So what do the ropes do?

They link stems, vertical or horizontal. Basically you can create stem classes with a certain width associated (can be assigned across glyphs) so that they all render with the same stem width. There is also an interpolation command that specifies a point must be on the middle of two others.

The most comprehensive paper I've found on the subject is [this one](http://luc.devroye.org/tt_hinting_tutorial.pdf), starting from page three it explains the different instructions.

Martin Silvertant

A while ago I read an article by Peter Biľak on hinting and rendering, which made me realize manual hinting is probably not for me. Not now, anyway. Perhaps later if I will focus more on web fonts.