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?
LCD Grid At 30X
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 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
-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.
The Font Industry
Browser Choice vs Font Rendering
IE9 An Early Look
Hardware accelerated graphics and text in the browser via Direct2D
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.