This is our fifth post in an ongoing series about type rendering on the web. Read the first, second, third, fourth, sixth, and final posts.

Whether a typeface has been designed or adapted for screen use significantly influences how it will look on the web. Of equal significance to type rendering are fonts’ technical composure: a typeface’s outline and hinting instructions (or lack thereof) can affect screen rendering. In this post we’ll talk about font outlines, as well as how file formats and browser compatibility affect the rendered text we see on websites. Then in our next post we’ll look at hinting.

Font files contain a typeface’s vector outlines in one of two flavors: PostScript (PS) or TrueType (TT). Miguel Sousa from Adobe recently explained in detail the benefits of PS-based outlines over TT-based outlines. At the most basic level, the difference between these two outline formats is a matter of mathematics (cubic vs. quadratic Bézier curves). But a font’s existence as one kind of outline or another can affect its file format, and not all web browsers support all file formats. Buckle up, the next few paragraphs are going to be turbulent.

No single font file format works in all web browsers (yet), so Typekit serves the most appropriate format to each browser: the emerging W3C standard WOFF (Web Open Font Format) wherever possible, Embedded OpenType (EOT) to Internet Explorer (it’s the only format IE8 and earlier will accept), and either raw OpenType (OTF) or raw TrueType (TTF) everywhere else.^1 2

On top of that, not all font file formats support both kinds of font outline. OTF files and WOFF files can contain either TT or PS outlines; TTF files can only contain TT outlines; and for EOT files it depends on which version of Internet Explorer is being used. We can sometimes circumvent these restrictions or achieve better results by converting from one kind of font outline to the other.

TT outlines are made of quadratic curves and PS outlines are made of cubic curves, so it’s mathematically possible to convert TT to PS without any data loss. However, most type designers prefer to draw PS curves, so most of the conversion we do is PS to TT. This is a lossy process and increases file size; unfortunately, it’s something we must address because IE8 and earlier will only accept EOT files, and because EOT files in IE6 and 7 will only accept TT outlines. In order for a font with PS outlines to appear in IE7 and earlier, it must necessarily be converted to TT.

Typekit’s goal is to serve fonts with the smallest possible file size and with the original design intact. We experiment by looking at outlines in different browsers, we listen to customer feedback about which fonts render well (or don’t), and we continually iterate on our font processing pipeline to reflect our latest findings.

Then, there’s hinting. Hinting helps a fonts’ vector outlines conform to the pixel grid, and can involve anything from minor adjustments to size-specific, pixel precise instructions. As Typotheque’s Peter Bil’ak explains in his excellent article on hinting:

Hinting can control the heights and widths of a font’s uppercase and lowercase letters, the widths of its individual lines, the amount of white space around letters, the size at which uppercase letters start to use different stem-widths from lowercase letters, how the angle of italic characters changes to best fit the pixel grid, and many other extremely technical details, all on a pixel-by-pixel basis. If this sounds like a rather tedious, time-consuming activity, it is, (even for type designers, who are accustomed to tedious, time-consuming activities).

Tim Ahrens, type designer at Just Another Foundry, maker of FacitWeb, and the newest member of Typekit, will write our next post about the mechanics of hinting. In some situations, this black magic of web fonts can have a significant impact on rendered type; in other situations, it matters little — or not at all. But either way, hinting is an arduous, amazing process that deserves to be explained. When it matters, hinting is integral to a typeface’s screen appearance.

1. 1. We currently serve SVG fonts to iOS, but will soon serve TTF thanks to this iOS update. ↩
2. 2. OpenType can be a confusing term — check out Ralf Hermann’s excellent disambiguation, OpenType myths explained. When I say OTF in this article, I mean .otf font files that contain either PS or TT curves. I’m not talking about OpenType features, which can be present in either .otf or .ttf files. ↩