Web Typography
The fonts you use for your website are an important decision, as they will often reflect your site’s tone and affect its visual impact. Typography is an interesting field if you can appreciate the skills that go into the design of a typeface. Below is an introduction to typography, starting with font classifications and then going into the practicalities of online text.
This page was last updated on 2012-08-21
Font Families
All fonts fall into a distinct category of fonts, called families. Fonts in the same family will share common traits in their designs.
Serif fonts
Serif fonts are the old-style, or traditional-looking fonts. They are among the oldest type of fonts in existence, having been around since the year 1200. Most broadsheet newspapers will be set in a serifed font, as they reflect quality. A serif is a flick added to the tips of the lines that make up the letters. The following example is in Times New Roman (the same as Times on the Mac). Notice the small finishing strokes on each character, particularly noticeable on the T and h:
Serif fonts are more suitable for usage in offline, high-resolution printed media like books and newspapers, where their extra definition makes them more readable. They aren’t as suited for online text unless set larger than normal.
Examples of serif fonts are Times New Roman, Georgia, Book Antiqua, Palatino and Garamond. They aren’t heavily used on the web.
Slab-serif fonts
Slab-serif fonts are a subclass of serif fonts. The serifs in these fonts are solid straight lines. Slab-serif fonts present a happy marriage between the legibility of serif fonts and the friendly look of sans-serif fonts, though they may suffer at small sizes. The text below is set in Rockwell:.
Sans-serif fonts
Sans-serif fonts do not have any serifs at all (“sans” being French for “without”). Sans-serif fonts are the most appropriate family for use online, as their simpler letter-forms remain readable at low resolutions; whereas serif fonts need more pixels to display their extra details. Sans-serif fonts are also well-suited to headings, as they are easily readable from a distance.
Well-known sans-serif fonts include Helvetica (known as Arial on Windows), Trebuchet MS, Lucida Grande, and the ever-popular Verdana. All of these fonts are clean and will usually work well even at small sizes. Below is an example of text set in Trebuchet MS:
Pairing a sans-serif font like Verdana for headings with a serif font like Georgia for body text will often look very attractive.
Character Proportions
There is also a wider distinction for fonts — whether they are monospaced or proportional. In monospaced, or fixed-width fonts, all characters are the same width. This makes the characters more difficult to read at normal sizes, as the shapes of words are less scannable. The text below is in bolded Courier New (which, incidentally, is also a slab-serif font):
Fonts are more commonly made proportional, where the width of each character and the space between them is set more appropriately — the letter i taking up much less space than an m, for example.
Other Families
Two final families that you may see mentioned are Cursive and Fantasy. These are special fonts that should not be used for body text but may be appropriate in certain situations.
Cursive fonts, like Comic Sans MS above, project a friendly feel; but would be entirely out of place on a professional website and are generally disliked by designers. Fantasy fonts like Jokerman are unlikely to be very useful, but might be used as part of a graphic headline. Fonts from either of these families will often be overly-decorative for text that needs to be read easily.
Font Variations
Each individual font may have a number of variations — a narrow version or an extra-bold version for instance. Below is Arial with its variations:
Fonts Suitable for the Web
You can’t get away from Verdana — it’s probably the most-used font on the web. This is probably due to its high legibility, which actually improves as the text gets smaller. Verdana looks its best at around 11 pixels. Any bigger and the width of its characters starts to negatively impact its legibility. Small, sharp Verdana looks professional and you can fit a large amount of text on-screen at once.
Helvetica/Arial and their variations are nice fonts, but are rarely specified as they don’t look quite as cool as Verdana. Trebuchet MS is nice, has similar spacing to Helvetica, and adds a distinctive edge since it is so rarely used.
If you’d like to use a serifed font then Georgia is a popular choice. It looks nice, particularly at around 14 pixels. Times New Roman is a font designed for print that should not be used online (though for some historical reason it is still most browsers’ default font). Courier New is useful to show snippets of code, but doesn’t look great in big blocks of text.
In many ways, your design, colour scheme, images and fonts will just seem right when you put them together. It’ll take some experimentation, but some fonts (at some sizes) will fit for your site, others won’t.
Remember to always supply a list of font alternatives when you define the font of some text, because not everybody has the same set of fonts on their system, and finish on a generic font family. Sample CSS:
body {font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif; }
blockquote {font-family: Georgia, Garamond, serif; }
As above, fonts with a space in their name should be surrounded by double quotes.
Punctuation in HTML
You’re limited on the web by generally only being able to express the characters that exist on your keyboard without using HTML entities. If a symbol you want is not on a standard keyboard (a curled double-quote mark, for instance), you can insert it by coding in the appropriate entity value (which looks like “). When viewed in your browser, the character will appear correctly. Using correct punctuation shows a dedication to quality, but all too many writers don’t take the time to build it into their text. It’s not hard — with a handful of entity references you can have typographically correct text — which looks very nice.
Firstly, directed double quotes add visual clues as to where the start and end of a quotation lie, and improve the readability of your text. The entities for them are “ and ” and they look like “this”. (Some users may have to increase the font size in their browser to fully make them out.)
Single quotes can also be directed — their codes are ‘ and ’ for opening and closing respectively. The prime character ('), which most people use in place of an apostrophe, should be replaced in all cases with ’ (’).
Without these visual accoutrements, text looks ordinary:
"It's a question of style, baby."
However, with a little more work, we can make our text that much prettier:
“It’s a question of style, baby.”
Which will result in:
“It’s a question of style, baby.”
Much nicer. The hyphen character on your keyboard is used to serve many purposes, but the only one it is should be used for is to hyphenate two words, as in ‘sans-serif’. In other cases — when you’re using it as a dash to separate parts of a sentence, like so — you should use an “em-dash”, which is noticeably longer than a hyphen. Cultures differ on whether you should add spaces either side of the dash. Personally, I do, though in some cases (especially when using serif fonts), it looks better with no spaces. Its code is —.
When expressing a range of numbers, like ‘2000–2004’, use an “en-dash”, which is encoded as – and is about half the size of an em-dash.
For the maths geeks, see how much nicer even a simple equation can be made with the right characters. Witness the fitness:
(2 + 4) * (8 - 3) / 3 = 10
(2 + 4) × (8 − 3) ÷ 3 = 10
sourcetip: In a few fonts the typographically-correct characters won’t look very different from the basic primes and hyphens. Curled quotes don’t show up very well in old versions of Arial, for example. Most fonts don’t have this problem, so you should use the typographically-correct characters.
Just these few simple changes to your text will add a swish of style. These punctuation marks were designed to ease reading — a benefit that becomes very important on the web, where reading conditions are less than optimal.
