Optimizing Fonts for the Web: Outlines and Components
This is the first in a series of articles from Typekit’s resident type designer, Tim Ahrens, on how we optimize fonts for the web.
In our recent blog posts, we’ve talked about some of our efforts — research and font optimization — to improve the quality of the fonts we serve. Hinting, vertical metrics, and choosing between TrueType or Postscript outlines are among the main aspects we focused on.
There are, however, many other technical issues that make up a good web font, all of which need to be taken care of when fonts are prepared for use on the web. In this post, we’ll talk about two elements of that process: outlines and components.
Web fonts can contain either TrueType or PostScript outlines, which use quadratic and cubic Bézier curves respectively. Today, nearly all type designers draw glyphs in PostScript format and many foundries sell only PostScript-based desktop fonts.
For display fonts (fonts intended to be used at large sizes, such as in a headline), PostScript outlines are preferred, because they render more smoothly across many Windows browsers. But for text fonts (intended for use at paragraph sizes) TrueType is often a better web font format because of its superior hinting control.
That means the original OpenType fonts that Typekit receives from the foundries often need to be converted. And since we’re dealing with fonts on the web, we have to take into consideration not only the accuracy of the outlines — their fidelity to the designer’s intention — but also the file size (which is proportional to the number of points).
In practice, the conversion itself is far from trivial; different font editors, such as FontLab, Fontographer, and FontForge, give different results. For example, FontForge is generally adept at producing an outline with a small number of points, but it struggles with certain types of curves; see above, where the two curve elements in the lower loop of the lowercase “g” have an an unnecessarily large number of control points. Meanwhile, FontLab treats this curve with more elegance but fails to recognize that some of the simpler curve elements can be expressed with fewer points. Producing the best conversion can mean choosing software based on the design of the font (or even a particular glyph); often, for the best results, it’s necessary to cobble together glyphs from different editors, or even to manually clean up the outlines to remove superfluous control points.
Once we have solid TrueType outlines for a font, what next? There’s more we can do to minimize the file size and ensure a fast browsing experience.
In order to avoid duplicate data, TrueType permits us to store accented characters as components, building the glyph out of the base letter and the accent. Since the bulk of the characters in a font are accented letters, this can reduce the file size by a considerable amount. PostScript-based OpenType does not support components, so we need to “recomponentize” our source fonts as they are converted for the web, replacing parts of the contour with their equivalent component. This modification does not affect the appearance of the font, but it can reduce the font size by up to 40%.
Converting the outlines and creating components are but the first steps in optimizing fonts for the web; in our next post, we’ll talk about various ways in which we clean up and augment a font’s glyphs, and how attention to vertical metrics and underlines (long neglected in desktop fonts) becomes a priority for web fonts. Stay tuned!