Type rendering on the web
October 5, 2010
Back when web fonts were in their infancy, I asked typophiles to help me understand why fonts look the way they do in web browsers. A year and a half later, with their help, advice from a few expert type technicians, and lots of research here at Typekit, we’re starting to fully understand type rendering on the web.
The translation of a font’s outlines into pixellated text of varying quality, consistency, and sharpness is not straightforward. It involves both a font and a rendering engine, and only so much can be controlled by type designers and web designers.
Proxima Nova lowercase “a,” as rendered by three different browser/OS mixes at 16px.
Each operating system contains a text rendering engine — sometimes multiple engines from which to choose. And each browser controls which of those rendering engines is used. So on the same OS, two browsers can produce text with very different appearances because they use different rendering engines. On top of that, often the rendering engines differ between different versions of the OS and different versions of the browser. Additionally, default font-smoothing settings vary by OS and OS version, and can be overridden by users’ browser preferences.
On the font file side, screen rendering depends on how the letterforms were drawn, the format of the font file, and the amount of effort put forth by the font’s producers to hint or instruct its shapes in such a way that they lay nicely on a pixel grid. “Hinting” — often cited as the reason a typeface looks good or bad on screens — is only one factor (and occasionally a non-factor) in a given type rendering mix.
Over the next few weeks I will be writing to share in detail what we have learned about font outlines, how those outlines are prepared for rasterization on screens, and how font files, browsers, operating systems, font smoothing preferences, and CSS properties combine to produce rendering mixes that result in the type we all see as we browse the web. If the conditions are right, web font rendering can be spectacular. Together, we can figure out exactly what steps we need to take to get there.
If you have any questions you would like answered in these posts, please share them in the comments. There’s so much to know and to talk about, and we’re all learning as we go. No questions are too big or too small.
UPDATE: Read the second article in this series on Type Rendering and operating systems.