I’m at Write the Docs today in Budapest and will be posting notes from sessions throughout the day. These are all posted right after a talk finishes so they’re rough around the edges.
Idan is a designer/developer at Heroku. He’s also a core designer for django. He started his talk clarifying the difference between typography and typefaces. Typefaces are just a subset of the broader typography field, which is the art and science of presenting textual information.
There’s micro (typeface, kerning) and macro (measure, leading, flow of type on a page) typography.
We’ve been designing books for centuries and there are all these built-in guidelines for typography in printed form. It’s all about control there. Since printed content is static the designer can control the consumption experience.
The web, though, presents us with a anarchic lack of control. We don’t even know where or with what screen someone is reading our words. And, many times, in the most constrained setting is when the reader needs your text the most. As documentarians this is where you have to deliver, this is why you have to care about typography and the web.
Typography on the web is still in its infancy compared to printed type. Sometimes the new, cutting-edge tools are hard to use. But they do pay dividends when used properly.
Type size is one of the primary levers you have for controlling text displays. Browser’s set the default font size to 16px. Books, though, set a default of around 12px. The difference here is that we hold books much closer when reading. If your content is going to end up on a screen the larger size improves its legibility. When setting type size proportional sizing, ems or percentages, is ideal. An em is a box that is roughly the size of an uppercase M; that’s the largest character a given font will need to display. An em is a unit of measurement that is proportional to the typeface used. This lets you change your typeface later on and not ruin the proportions of your design.
CSS3 introduces the rem unit, which is a root em and makes sizing easy. Everything goes back to the root so you’re not tracking relative sizes down the HTML stack.
Browsers apply font families character-by-character. Fall back families are used when the primary choice doesn’t include a given character. Idan also dove in to how font-face interacts with a browser’s display of text.
The dreaded FOUT can also affect our docs. Readers will see the default font applied just before a custom font resource loads. When the new font resource does kick in it also affects the layout of our page. This is because the browser adjusts the font metrics used. Adobe Blank is a tool that can help with this. It’s a font that purports to contain all characters. This ensures no text displays until your custom font arrives. Additionally there’s a spec in progress that will allow you to hook in to font loading actions.
Your journey toward really good type doesn’t end there, though. You can dive further down the rabbit hole in to type rendering. Rasterizes turn outlines in to pixels. They transform our fonts from smooth vectors to on and off pixels. Windows, for example, uses three different rasterizes. There’s even a handy guide to figuring out which will be used under what conditions. Mac OS X, though, uses just one.
The bottom line, though, is to test your typeface. You can’t rely upon just one operating system or just one browser. Everything can impact how your text displays.
Idan also published his slides on Speaker Deck. You should check them out for more details (and for the beautiful design).