Crash Course Design for Developers: Typography for the Web

Unlike the more obvious elements of a site's design - color, graphics, etc., it is often easy to overlook the deliberate choices a designer has made regarding typography. A good designer knows that there are certain inherent limitations to typography on the web, but a good developer should also know that those aspects of typography that can be controlled should be executed as closely to the letter of the designer's intention as possible. This means font selection, font size, color, and spacing.

As a developer, I know it's easy to get lazy on the details. But the designer and/or client *will* notice if something looks different from the comps, even if it's slight and even if they can't quite articulate the difference. Doing it right the first time will always save you lots of work in the end.

That said, here are some general Cliff's Notes on the principals of typography on the Web, in no particular order:

1. There are only a handful of web-safe fonts for text that is to be rendered in HTML (as opposed to an image). These are fonts that are reliably installed on a user's machine, regardless of browser or operating system. Standard CSS font declarations include a descending list of fonts that share the same font-family, where if a certain font is not found on a given user's computer it will try to use the next one in the list, e.g. Arial, Helvetica, Verdana, sans-serif. If you are given a design comp where text you know needs to be dynamic is not rendered in one of these web-safe fonts, discuss it with the designer right away.

2. Serif vs. sans-serif. You've probably heard these terms thrown around. Boiled down, serifs are the little decorative extra lines hanging of the ends of the letterforms of certain fonts. Sans serif means 'without the serifs', so sans-serif fonts, like Arial, tend to look boxier and more modern. Conventional wisdom says that serif fonts are easier to read in print form, but sans-serif fonts are easier to read on the Web. Common serif fonts are Times New Roman and Georgia. Common sans serif fonts are Arial, Helvetica, or Verdana.

3. Always make sure the designer gives you copies of the font files used in the design, especially if they are uncommon fonts. You never know if two weeks before launch you're asked to change the text on a graphical button and the designer is long off the project. Designers are often working on Macs, so if you are working on a PC make sure to specify that you need the Open Type or PC version of the font. There is licensed software, like Crossfont, which will convert font files between platforms, but it's always preferable to get the right file in the first place, especially because you'll probably have to distribute it across multiple members of the development team. (*Note - if you are converting a font that originated on a Mac, and it was given to you as a compressed file, make sure that the extraction does not strip out the Mac-binary resource fork. This will cause the extracted file to show it is 0kb and has no file extension).

4. Defining font sizes. Point sizes in Photoshop do not correspond to pt sizes for fonts in HTML. This is a common source of confusion. Similarly, different fonts look totally different at a given size. When I'm given a comp to build out, I usually make an educated guess on the base font-size and verify the result on the HTML page with the designer or client. The jury is out on whether it's best to define fonts in your CSS document in pts, px, ems, percents, etc. Each has its reasons, but in general I'd advise avoiding px because in older browsers people with lower vision cannot bump up the font size by changing their browser settings. I like to define line-spacing in relative units (either em's or percentages) so that it stays proportionally consistent.

5. Don't dismiss the power of line-spacing (the vertical height between lines of text). If a designer has chosen something other than the default they did it deliberately and a developer shouldn't ignore it.

6. HTML text is liquid. Unlike in word processors and design software, a word will not break with a hyphen when it reaches the end of a line, it will merely flow to the next one. A lot of designers and clients fail to anticipate how a text container might look or behave if they put in more text than the example text in the comps, or a really long word with no breaks. Try to anticipate this for them and build the container with the needed flexibility.

7. Aliasing vs. anti-aliasing. Another set of terms you may have come across. Anti-aliasing is a smoothing effect on the edges of a letter form. Ever noticed how in Firefox large font sizes look all jagged? That's because by default Firefox does not anti-alias fonts. Safari does, IE7 does (sort of). If a client complains that the site looks 'different' or 'bad' in some browsers but can't quite articulate why this may be a culprit. If you need dynamic text at a large size and want it to look smooth or want to use a non-web-safe font, consider sIFR, a technique that uses Flash-based text replacement. But use sparingly.

8. Check the color of all the fonts in the comps using the eyedropper. Don't assume it's black just because it looks like it on your low-contrast laptop monitor :).

That's it for now. I'll add if I think of any more, or feel free to list any additional ones in the comments! For a more detailed discussion of typography, check out this Sitepoint article.