Font Hinting Explained By A Font Design Master

Jan 10, 2010

The term “hinting” – as it relates to @font-face font-linking – is getting thrown around quite a bit lately.

But what is “font hinting”, exactly?

30X Magnification of an LCD Screen
LCD Grid At 30X

Wikipedia says:

Font hinting is the use of instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, hinting is critical for producing clear, legible text for human readers.

OK, but what does that mean? Well, as you can see from the illustration at right, a typical LCD flat-panel computer screen uses pixels made up of three RGB sub-pixel stripes. Font hinting is about using this grid to display letter forms that look right to the human eye.

with the objective being to get it looking right to the human eye, the outline must be fitted to that same grid of colored luminescent stripes.

For example, here is the outline of a lower case “m” followed by examples of what it would look like before hinting is applied and after hinting is applied.

The letter m grid-fitted to an LCD screen

The rough “grid-fitting” shown in Fig 2 requires many small modifications to achieve the smooth yet well-defined rendering of the letter shown in Fig 3.

TTF versus OTF CFF: The Font Wars 2.0

When I first began experimenting with @font-face, I quickly learned that there were differences in general between fonts formatted using Microsoft’s TrueType as opposed to Adobe’s OpenType Compact Font Format (CFF). CFF fonts that looked fine in a PDF specimen sheet, and fine when rendered onscreen with Flash or Cufón, were displaying strangely when linked directly using @font-face – with the rendering of text at smaller “body” sizes almost always unacceptable. And then I was informed, accurately as it turned out, that CFF fonts were less costly to produce than TTFs. And then I noticed that folks from Adobe were unmistakably miffed that CFF fonts rendered so erratically in Windows. Totally confused, I turned to font designer John Hudson of Tiro Typeworks, a specialist in custom fonts, for answers. Thankfully, he took pity and wrote up a great explanation. What follows is an expanded and revised version of John’s original response:

John Hudson On TT Versus CFF Hinting

The principle functional difference between the CFF (PostScript) and TrueType flavours of OpenType is the hinting model. PostScript font formats all originated as print media formats, originally with separate bitmap fonts for screen, and CFF OpenType fonts inherit the outline types and hinting models of earlier PS formats.

The PS hinting model that was originally designed to improve rendering in low res print environments has been adapted to screen rendering, but never with the same level of control as inherent in the TT hinting model, which had been designed from the outset with low res rasterisation in mind. This is why, for most of the past 15 years, TrueType has totally dominated the market for screen typography. And I expect it will continue to do so for text sizes.

On Windows, CFF rasterisation outside of WPF/DirectWrite (which uses ClearType ren­der­ing for both TTF and CFF) is often ver­y bad, and I’m not per­son­al­ly convinced it’s very much better on the Mac from a readability per­spective: it *looks* better, but it’s also fuzz­y as heck and with in­consistent stroke density, which every read­a­bil­i­ty study I am aware of says are bad things.

The advantages of CFF are that a) the cubic bezier outline for­mat that is native to PS is also the development format used by al­most all type designers, and b) the PS hinting model is much simpler than the TT hinting model and can be largely automated. This is what pro­duces the cost benefit of CFF: it is quicker to make, requires less spe­cial­ised technical knowledge, and avoids lossy outline conversion to quadratic beziers and attendant design distortion.

Depending on the size of the glyph set, I can sometimes offer customers savings of tens of thousands of dollars if they are able to opt for CFF instead of TTF. As it happens, most of my customers opt for TTF precisely because they are interested in the best possible screen dis­play. But I have some customers who are coming out of a print me­di­a background, e.g. as book publishers, who are only now be­gin­ning to transition to some electronic media publishing, and who are trying to figure out whether they will be able to use their CFF fonts on the web.

A recent announcement by Microsoft that Internet Explorer 9 will use DirectWrite text layout and rendering is good news, and def­i­nite­ly a step in the right direction. Apparently Mozilla are also in­ves­ti­gat­ing taking this approach, which could result in a con­sider­able im­prove­ment in CFF font rendering on Windows in the two browsers with the largest market share.

-John Hudson is the co-founder, along with Ross Mills, of Tiro Typeworks, specialists in custom fonts for corporate clients. He is the designer of the “ClearType” font Constantia and, more recently, of the somewhat experimental Gabriola, a font that utilizes some of the more advanced features of OpenType. Both fonts ship with Windows.

[John Hudson is the co-founder, along with Ross Mills, of Tiro Typeworks, a firm specializing in custom fonts for corporate clients. He is the designer of the “ClearType” font Constantia and, more recently, of the somewhat experimental Gabriola, a font that takes advantage of some of the more advanced features of OpenType. Both ship with Windows.]
ny times
The Font Industry

Browser Choice vs Font Rendering
IE9 An Early Look
Hardware accelerated graphics and text in the browser via Direct2D
minute 48
Typophiles have long ignored this fact, because in the environments they’ve cared about, Type 1 and OpenType CFF fonts render perfectly well on screen:


Just about any application on the Mac OS. Adobe Acrobat, InDesign and Illustrator, on any platform.
Font Smoothing, Anti-aliasing, and Sub-pixel Rendering


Along with co-founder Ross Mills, John mostly does custom work for corporate clients. Among many accomplishments, he is the designer of the ClearType font Constantia and, more recently, the somewhat experimental

screen shot of safari with clunk body text but smooth and beautiful headings.

Sharing Options:

Leave a Comment

Previous post:

Next post: