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
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 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 rendering for both TTF and CFF) is often very bad, and I’m not personally convinced it’s very much better on the Mac from a readability perspective: it *looks* better, but it’s also fuzzy as heck and with inconsistent stroke density, which every readability study I am aware of says are bad things.
The advantages of CFF are that a) the cubic bezier outline format that is native to PS is also the development format used by almost 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 produces the cost benefit of CFF: it is quicker to make, requires less specialised 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 display. But I have some customers who are coming out of a print media background, e.g. as book publishers, who are only now beginning 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 definitely a step in the right direction. Apparently Mozilla are also investigating taking this approach, which could result in a considerable improvement 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.
fLEX APP
ny times
Cleartype
The Font Industry
Sub-Pixel
Postscript
Browser Choice vs Font Rendering
IE9 An Early Look
http://channel9.msdn.com/posts/Charles/IE-9-Surfing-on-the-GPU-with-D2D/
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:
Boing-Boing-Redesign-Uncovers-Web-Font-Ignorance
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.
{ 4 trackbacks }