Looking at a Typeface … Digitally
Earlier this month, Michael Beirut wrote a very insightful post for Design Observer called “Thirteen Ways of Looking at a Typeface” that discusses the rationale behind many of the typographic decisions that he makes. They are great reasons, truly. However, they are mainly applicable to the print world where every typeface is available to designers.
We who are confined to the browser, or at the very least the screen, have some additional considerations. I’ve made a start here, adding seven more ways to look at a typeface. This brings us up to 20 now (for those of you counting).
1. Because it’s sans serif.
While serifs help a reader’s eye to identify letters – especially in large blocks of text – the low resolution of the computer screen (72dpi for a standard monitor, compared with 150-600dpi for a printed page) makes a serif font render badly on the screen. Sans serif fonts tend to look cleaner on the monitor because they have less detail and (typically) less modulation in the size of the strokes used to form the letters. This rule of thumb is mainly true for body text; serif headlines above 12 points should look pretty good on the monitor. A good option here would be to use Georgia, which is a serif font designed for readability on the screen. You might also be thoughtful toward your reader and design your print CSS to use a serif face for body copy to aid in readability.
2. Because it’s on everyone’s computer.
If you are setting large amounts of body copy for a webpage that will be displayed using HTML, you are limited to fonts already installed on your user’s computer. (Here are the lists for Windows and Mac.) This makes the web feel homogenous at times, but as Beirut points out in his reference to the great designer Massimo Vignelli, much can be done with a limited number of typefaces. And we are fortunate to have more than the five that Massimo uses at our disposal. Just, please stay away from Comic Sans… please.
3. Because it’s not on everyone’s computer.
We all want to be different, just like everybody else, right? If you’d like for your HTML page’s headlines to reflect some more brand identity or personality than is possible with the default font set, a great alternative to standard HTML/CSS markup is sIFR. A whole new world of fonts is now available to you (and your users). You do have to know a teeny-tiny amount of Flash to pull this off, but it’s pretty painless and the typographic results are worth it. Plus, if the user doesn’t have Flash installed, it will gracefully render the text in HTML using whatever style you’d like. And it’s accessible/searchable.
4. Because it’s a pixel font.
If you are developing in Flash (especially for people who need to target Flash 7 or below), pixel fonts should be your good friend. These fonts are meant to be extremely legible for body copy use because every edge of every character falls exactly on the edge of a pixel on the user’s monitor. These fonts look crisp and sharp, while small versions of fonts like Helvetica or Verdana can look fuzzy in Flash. One downside of these fonts is that they can’t be scaled (they are meant to be displayed at a certain point size and that is it). So, if you want a different size – you need to use a different font.
5. Because it’s a small download.
In Flash, you are free to use any font that you wish, with the assurance that it will render exactly how you expect on your user’s machine. However, you need to embed these fonts, and some are a big download for your user. If you’re optimizing your files for a short download, then choosing a font with a small file weight can save you a few kilobytes. For example, to embed Arial uppercase, lowercase, numerals, and punctuation is 13k – compare this with 4k to embed the same characters using Pixel Arial 11. A 9k file savings might be pocket change, or it might be just what you need to come in under a file size requirement.
6. Because the user has already downloaded it.
Again, in Flash, every single font that you embed has to be downloaded by the user. However, after the embedded font has been downloaded, your user doesn’t have to download the font again. You can use it over and over without an increase in file size. This is a great reason (besides good design sense) to limit the number of fonts that you’re using in a Flash application. Remember that bold, italic, and bold italic are all separate versions of the font to embed – each adds its own weight to your file. For advanced Flash developers, a ready of David Hassoun’s thoughts on runtime shared font libraries might be in order.
7. Because it has the characters you need.
Not every font has every character available. Especially in HTML, when you want sites to render properly with Unicode characters or to display properly in a foreign language, you should double check to make sure that the characters you are using are actually present in the font. Otherwise, you’ll end up with those ugly open box symbols. Not so friendly (or readable to your audience).


Thanks for this, the esoteric article that you cite is nice, but not really useful in web type. These have a more practical and forward-thinking flavor, with an emphasis on playing WITH the net.