All you wanted to know about Web type but were afraid to ask

by Joe Gillespie — Jul 1, 2004

We all get fed up seeing the same old fonts on Web pages but is there anything we can do about it?

It all comes down to the fact that some fonts come preinstalled by Windows and Mac OS by default. Of course, it depends on which version of Windows and Mac OS we are talking about because fonts sets change over time and there are still a lot of legacy systems in use out there.

The font base also depends on what browsers and programs are also installed because Microsoft Internet Explorer installs some fonts and some applications install fonts that won't be there if the reader doesn't have those programs.

Yes, there are a lot of 'ifs' and 'maybes'. The fact is that you can't assume that any particular font is available for your Web pages other than a few general styles – serif, sans serif, monospaced, cursive and fantasy.

Although some of these are pretty obvious, other are not, so I'll give you some examples.

Serif

Times New Roman, Georgia, Palatino, Trebuchet MS

Sans Serif

Arial, Helvetica, Verdana, Geneva

Monospaced typewriter style

Courier New, Lucida Console, Monaco, Andale Mono

Cursive - scripts and informals

Comic Sans, Brush Script, Zapfino, Marker Felt

Fantasy - way out or fanciful designs

it's really pot luck with this one, there might not be one at all!

Although many of us think in terms of Windows fonts and Mac fonts, there are many other operating systems – Linux, UNIX, PalmOS, etc – which might not have even the common ones that first come to mind. That's why when we specify the type for a Web page in CSS, it goes something like this...

font family: <ideal>, <alternative>, <common>, <generic>

which translates into something like this:-

font family: Georgia, "Times New Roman", Times, serif;

Here, Georgia is the 'ideal' font, the one the designer prefers (yes, it's okay to prefer a font!).

"Times New Roman" and Times are the Windows and Mac names for the most common serif font. 'Serif', is the generic type style.

Note that when a font name is constructed from several words – like "Times New Roman" or "Tebuchet MS", it must be enclosed in quotes or it could be ignored.

For sans-serif syles, the specification would be more like this:-

font family: Verdana, Arial, Helvetica, sans-serif;

Again, Verdana is the first choice, Arial and Helvetica are common alternatives and 'sans-serif' the generic style.

When you specify a font family like this, the browser will use the first font that it comes to in the list that is actually installed on the user's computer.

The last, the generic one in the family list, is the 'catchall' type style that will be used if none of the specified fonts are available. If that is not there, you will just get the default font, whatever that is. Don't worry; you will never be left high and dry with no font!

Safe choices

Now, having established these principles, there is nothing to stop you putting whatever fonts you like at the front of the list. Sure, they won't always be available but if your Web pages are targeted at a particular audience, the chances of them having a particular font installed are better.

To help you decide what you can use, I've compiled some lists of fonts that are installed by default on the various systems. Further down the page, I have links to visual references of all these fonts so that you can see what they look like.

The following fonts are installed on both Windows XP and Mac OS X Panther by default:-

  • Arial
  • Arial Italic
  • Arial Bold
  • Arial Bold Italic
  • Arial Black
  • Comic Sans MS
  • Comic Sans MS Bold
  • Courier New
  • Courier New Italic
  • Courier New Bold
  • Courier New Bold Italic
  • Georgia
  • Georgia Italic
  • Georgia Bold
  • Georgia Bold Italic
  • Times New Roman
  • Times New Roman Italic
  • Times New Roman Bold
  • Times New Roman Bold Italic
  • Trebuchet MS
  • Trebuchet MS Italic
  • Trebuchet MS Bold
  • Trebuchet MS Bold Italic
  • Verdana
  • Verdana Italic
  • Verdana Bold
  • Verdana Bold Italic
  • Webdings

MSIE 'Core' fonts

Microsoft Internet Explorer, with over 90% of the browser market, comes pre-installed on Windows and Mac OS 9.x definitely – and most likely on OSX too, so there is a high probability that following additional 'core' fonts will be available – along with some italic/bold variants. You have to be careful here because if you specify bold or italic for a font that doesn't have such variants, you might not get what you expect!

  • Andale Mono
  • Arial (regular, italic, bold, bold italic)
  • Arial Black
  • Comic Sans MS (regular, bold)
  • Courier New (regular, italic, bold, bold italic)
  • Georgia (regular, italic, bold, bold italic)
  • Impact
  • Times New Roman (regular, italic, bold, bold italic)
  • Trebuchet MS (regular, italic, bold, bold italic)
  • Verdana (regular, italic, bold, bold italic)
  • Webdings

The best fonts to use

The vast majority of fonts are designed for printing at several hundred dots per inch. That means that resolution is not an issue and they can be as intricate as the designer wishes.

As the Web became a viable medium for communication, some fonts were introduced that were designed to work at the lower resolution imposed by computer displays, typically a hundred pixels, or less, per inch. Screen fonts have to be sympathetic to the square pixel grid of the screen. Subtle curves don't work at all, curved and diagonal lines work some times and not others.

For Web pages, fonts designed for the screen will give better results than ones designed for print, but there's much less choice. Let's look at some.

Serif Fonts

georgia

Designed by Matthew Carter for Microsoft in 1996, Georgia was created to provide optimal readability on-screen.

Being designed specifically for screen display, Georgia is a better font choice than the ubiquitous Times Roman, which was design for newspaper use, so...

font family: Georgia, "Times New Roman", Times, serif;

Georgia is the first choice, if that is not available then "Times New Roman" will be used. Times is the Mac (previous to OSX) name for Times New Roman, and serif is the catchall for everything else.

palatino

Not really considered to be a screen font, but Hermann Zapf's Palatino (designed in 1948) works remarkably well for a print font.

Palatino is available on XP and on Macs that have Mac OS Classic installed but the name is slightly different. On Windows it's called "Palatino Linotype" on Mac, just "Palatino". On older versions of Windows, it is called "Book Antiqua". Even though it is a printer font, because of its squarish, pixel friendly shape, Palatino renders quite well on-screen, better so than Times, so it make a useful alternative serif font...

font family: "Palatino Linotype", “Book Antiqua”, Palatino, “Times New Roman”, Times, serif;

Sans Serif Fonts

verdana

Also designed by Matthew Carter (1994), Verdana always appears larger and slightly more open than other fonts of the same pixel or point size. This page is set in Verdana.

For sans serif fonts, Verdana is also designed especially for screen display and should be used in preference to Arial or Helvetica...

font family: Verdana, Arial, Helvetica, sans-serif;

If you are feeling adventurous, you can stick a few options on the font of those...

font family: "Franklin Gothic", Futura, Verdana, Arial, Helvetica, sans-serif;

tahoma

Matthew Carter – again

Tahoma is similar in feel to Verdana but where Verdana is 'open' in character, Tahoma is more condensed and tight. Think of it as 'Verdana Condensed', although it's not exactly that.

Tahoma shares Verdana's large 'x' height, so will look bigger than most other fonts of the same font-size. Use it when you want to get more words into a given area without having to go down a size.

font family: Tahoma, Arial, sans-serif

trebuchet

Designer: Vincent Connare (1996)

Trebuchet is also designed for screen use. Where print fonts are usually originally designed at a fairly large size, typically about six inches high, Trebuchet was first designed as a bitmap at a smaller size. At small sizes, there are less opportunities to make a type face really unique because you have to forgo the subtleties. Nevertheless, Trebuchet manages to get a lot of character into a very small space.

font family: "Trebuchet MS", "Lucida Sans", Arial, sans-serif

optima

Designer: Hermann Zapf (1958)

There are fonts that fall somewhere in between serif and sans-serif but there isn't a specific category for them. Optima and Albertus have very subtle curves that end in vestigial serifs. Even at the relatively large size of the sample on the left, the 'serifs' are just smudgy edges. Such fonts don't work at small sizes at screen resolution. I've included them here purely to demonstrate that a good choice for a printed page can be a bad choice for the Web.

font family: Optima, Albertus, Verdana, Arial, sans-serif; 

Monospaced Fonts

courier

There are many variations of this classic typewriter font originally designed for IBM by Howard Kettler in 1955.

Occasionally, you will want to use a monospaced font for citations or code snippets. With monospaced fonts, like those on typewriters, every character is the same width, so they line up vertically as well as horizontally. If you want to try your hand at ASCII art, you need the even spacing that monospaced fonts provide.

"Courier New" is the most common monospaced font but it is a bit light (when anti-aliased in its regular form anyway) to use at smaller sizes. Alternatives are "Lucida Console" (Windows), "American Typewriter" (OSX) and Monaco (Mac).

font family: "Lucida Console", "American Typewriter", "Courier New", Courier, monospace;

Cursive Fonts

comic sans

Designer: Vincent Connare (1995)

zapfino

Designer: Hermann Zapf (1998)

Cursive fonts range from informal handwriting fonts to fancy scripts. The most common one is Comic Sans which, as the name suggests, is like the handwriting you get in cartoon speech bubbles. Windows is a bit short of 'classy' scripts but have a look at "Palatino Linotype Italic" and its bolder counterpart – not strictly 'cursive' but give the required result.

On Mac OSX, there is a better selection of scripts - Apple Chancery, Brush Script, Chalkboard, Cochin Italic, Marker Felt, Papyrus and the very extravagant Zapfino.

The problem with specifying 'cursive' is that the 'feel' of a free handwriting font and that of a classy script are diametrically opposed. If you want to say 'high class' and the reader sees Comic Sans, you could have problems! Be careful with this one.

If you want to make sure that surfers see exactly the font you have used, to conform with a corporate image for instance, you will have to rasterize the type into a GIF or PNG file, or you could make it into a static .SWF (Flash) setting provided you don't need a transparent background.

When you do use 'images' of fonts, you should make sure that you provide an 'alt' attribute to the image tag so that the words appear in text form too – for accessibility and searching.

Size matters

papyrus

Included with Mac OS X, Papyrus (Chris Costello, 1983) manages to be both informal and classy, but needs to be used large.

viva

An Adobe font designed by Carol Twombly, this one really has to be a GIF or PNG.

The fonts I've mentioned so far are for body text – general reading matter. When you want a bit more punch, for a headline or banner ad for instance, you can use what typographers call 'display' or 'headline' fonts. Display faces are intended to be used in small amounts to give strength and contrast to a setting. Setting the body text of a page in Impact or Futura Extra Bold Condensed would be very tiring to the eyes.

For really "sock it to 'em" headlines, consider Arial Black, Impact or Tahoma Bold on Windows and Arial Black, Gill Sans Bold, Helvetica Neue Condensed Black, Optima Extra Black or Futura Extra Bold Condensed for Mac OSX.

As display faces are always used at larger sizes than body text, they can afford to be a bit more elaborate and characterful. They can be very bold, or very thin. It's probably not a good idea to use 'regular' weights. What we want is something that contrasts with the body type and the further away you get from that normal weight you go, the better. 

Very small fonts

If all your text is 14 pixels high or more, most fonts will look okay but some fonts work better than others at smaller sizes.

As I've already mentioned, for general text matter, it is better to choose fonts that have been designed for screen display. Verdana and Georgia are good, Times and Arial not so!

When you go down to really small sizes, as you do on menu bars and buttons, even Verdana and Georgia have their limits. Anti-aliasing works great for larger fonts, but at small sizes, the whole text becomes blurred and visually fragmented. If anti-aliasing is turned off, the text will look jaggy and pixelated.

mini 7

tenacity

These are two of my own pixel fonts from the MiniFonts range For best results at small type sizes, you should use fonts that are designed especially for that purpose. These 'pixel' fonts won't be installed on the user's machine so you have to make them into small GIF or PNG images, but if they are used sparingly and the images saved at low bit depths, their bytesize will be very small.

Pixel fonts do not use anti-aliasing so they remain sharp and crisp at tiny sizes but they are not scaleable and can only be used at their optimal 'designed' size.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float