Web Typography Cheat Sheet

Let’s be honest. Typography and the web do not go hand-in-hand. You’re limited to a choice of about 5 fonts, most of which are cheap knockoffs of ‘proper’ typefaces. You’ve got practically no fine control over kerning or line spacing, and – worst of all – there’s a very good chance that no matter what you do, no matter how hard you try – your type is going to look different on every single browser and operating system. So what is an avid graphic designer-cum-web designer to do when faced with the seemingly insurmountable task of making web type look good?

Tip 1: Don’t limit your size options

Once upon a time, we were limited to a mere 7 sizes via use of the <font> tag – thankfully current incarnations of CSS grant us much better control, so quite a fine level of control over the size can be had.

Figure 1: Newer methods of specifying sizes in CSS allow for more flexibility when choosing type size. Don’t stick to standard sizes – experiment!

Relative sizes work best- don’t forget your visitors may have a different font size setting to the default, so specifying fixed point or pixel values may make things look awfully strange. ‘Em’ units – so called as 1em is equal to the width of the lowercase ‘m’ character, are one of a few ways to scale your text proportionally. All things being equal, at default settings 1em is the same size as 12 points.

You’re not limited to while numbers, either – 0.8em is a good body font size, typically being rendered at 10pt. You can specify any number you like, and as large as you like – don’t limit yourself to sub-24pt sizes if the design warrants a larger size.

Tip 2: Play with your letter spacing

Letter spacing is perhaps one of the more effective ways to spruce up web type, particularly at larger sizes. It’s just a shame Internet Explorer cripples the finesse that could be available via the letter-spacing CSS property.

Figure 2: Letter spacing can be used to tighten the whitespaces in larger type, or relax the spacing in smaller type. The larger the font, the more you can tweak the letter spacing.

Firefox and other compliant browsers will happily take a precise decimal value, and space the text nicely and continuously at non-integer values, but Internet Explorer (sadly, even the latest IE7) will only allow for broad, rounded-to-neared-pixel-integer figures – which basically means you’re not going to get the spacing you want in IE.

Despite this limitation, letter spacing can be used effectively at larger sizes to really add some zing to an otherwise bland headline or title. As type gets larger, so too does the spaces between the type. This means that large fonts can have unsightly gaps and rivers of whitespace running through the letters. A little negative spacing will close these gaps, and if used with care can look distinctive, in some cases even suitable for replacing prerendered type.

Tip 3: Line height and word spacing, too

It’s not just letter spacing that you can mess around with – word-spacing and line-height can be specified to further tweak the text display.

Word spacing is perhaps less useful and more subtle than letter spacing, but adding a little extra whitespace between words can help somewhat in terms of readability. On longer lines, a little extra word spacing will mean fewer words per line, and thus make it easier for readers to keep track of where they are in the text.

Coupled with line height, you can gain more accurate control over the word density of any given page. I tend to specify line height as a percentage, with about 120-140% being the ‘normal’ default. A little extra (~200%) can make large passages of text a little easier to read, whilst tighter line heights (100% or less) can help with multi-line titles, where larger fonts could result in acre-wide gaps between lines without moderation.

With all the above spacing methods, care must be taken to ensure the effect is subtle – nobody wants to read text that’s squashed into a tiny space, or spread over 3 or 4 times the area that’s required. The default settings are default for a reason – text readability – so any changes made to the spacing should be subtle and should aid readability rather than impairing it.

Tip 4: Try a new slant on an old favorite

As mentioned in my top blog trends post, Times New Roman is used in only 5% of the top 100 blogs. It was Times’ early predominance on the web, being the default font for most browsers, that perhaps dulled its impact somewhat, but despite this, and if used creatively and in a fresh way, Times can have a great impact.

Figure 3: Even fonts that have fallen out of favour due to overuse, such as Times New Roman, can be refreshed with a little creative typography.

Try a non-standard size and a non-standard spacing model (all capitals works great, too) and Times can be a visually interesting and fresh font.

Tip 5: Be bold

‘Bold’ in the sense that you try new and exciting things – not in the typographical ‘bold’ sense. Big fonts, tight spacing, loose spacing, colour, use of first-letter and first-line can all help to set your text apart from typically dull web typography.

The key thing is to experiment, try new things – not at the expense of readability, but in the name of design.

And, if nothing else, the experimentation to find the perfect typographical mix on the web should occupy the time between now and whenever fully flexible, fully supported CSS typography becomes mainstream!