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.