Ars Informatica
May 01, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 Article Feed for this site

Font stacks for the World Wide Web

November 16, 2009

Web designers know what they intend. Yet an elegant page can be turned unsightly, ugly, even unreadable when the font of choice is substituted for another.

The basic issue - different systems come with different fonts installed. And a web page can only be rendered using fonts already present on the user's system.

The solution is to define what are called "font stacks," i.e., a default font choice with a series of alternatives, each less desirable than the previous. Typically, the last in the series is a very generic choice, i.e. sans-serif, which does not define a specific font but rather the type of font to use, if the previous alternatives are not found.

An example sans-serif font stack:

font-family: Arial, "Microsoft Sans Serif", Tahoma, "Nimbus Sans L",
Helvetica, sans-serif;

In this article, I present a number of font stacks I personally use.

It amazes me how significantly different in size some very similar fonts can be, at any given point size. (See my article on common Windows, Mac and linux fonts and check out the image previews.)

As a general principle, fonts should be very similar, at a given point size, in general appearance, height and width, and weight.

This is very relevant - if the 12-point font in a block of text with fixed height and width is replaced with another, larger 12-point font, then some of the text may suddenly fall outside this area; it won't be seen. Text may run into margins, or images. Not good.

Appearance matters, as well. You cannot assume that one Arial font will look like another - they can be very different. Grouping related fonts into stacks is bad business.

So either you hand-check your font stacks yourself, or you use an article like this one to help guide your choices. To help, I show actual text for each font below.

My font stacks include only fonts found on at least 90% of one of the dominant operating systems: Windows, Mac and linux/Unix. In addition, each stack contains at least one font typically found on each of these platforms.

Arial/Helvetica sans serif stack

Helvetica is one of the first digital fonts, created in 1959, and designed for clarity and versatility. Arial is a more modern, more "humanist" sans-serif font that is very similar in proportion and weight, but with softer, cleaner lines. Helvetica is a mainstay of the Apple platform, whereas Arial found mass popularity through Microsoft's Windows.

Our Arial/Helvetica sans serif stack:

font-family: Arial, "Microsoft Sans Serif", Tahoma, "Nimbus Sans L",
Helvetica, sans-serif;

preview of Arial font at 12 pt size

preview of Microsoft Sans Serif font at 12 pt size

preview of Tahoma font at 12 pt size

preview of Nimbus Sans L font at 12 pt size

preview of Helvetica font at 12 pt size

Verdana Sans Serif stack

Verdana is a humanist, sans-serif font custom-crafted for Microsoft, specifically intended for computer screen use. Clean design and attention to letter spacing, proportions, and differentiating similar characters, make for easy reading at small sizes.

Most of the text on this site uses Verdana. Our font stack:

font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Geneva,
"URW Gothic L", sans-serif;

preview of Verdana font at 12 pt size

preview of Lucida Grande font at 12 pt size

preview of Lucida Sans Unicode font at 12 pt size

preview of Geneva font at 12 pt size

preview of URW Gothic L font at 12 pt size

A heavy "Impact" sans serif stack

font-family: Impact, "Arial Black", sans-serif;

Please note that I don't like and would not use this stack. I'm presenting it to warn you, and so you understand exactly what the problem is.

Both of these fonts are 12-point in size, as indeed all the font previews on this page. Note how different they look. How their space requirements vary significantly. And if neither font is found - you'll fall back to 12-point sans serif, like the two previous stacks above. The impact - ruined.

Finally, there is no common Unix/linux font to match them. Again, you'll force your user to default to sans-serif, and any impact you might have had will be lost.

preview of Impact font at 12 pt size

preview of Arial Black font at 12 pt size

My advice: use the Arial or Verdana stack, increase font size and weight until you're happy, and you have a far more consistent "Impact" style family.

The monospace stack

Courier and its relatives are monospaced or fixed-width fonts: each letter occupies exactly the same amount of space. Monospaced fonts came from early typewriters, which moved the same distance with every keystroke. Today, monospaced fonts are still the de facto standard for editing code.

The font-family CSS code shown here is, appropriately, rendered using Courier:

font-family: Courier, "Courier New", "Nimbus Mono L", "DejaVu Sans Mono",
"Lucida Console", monospace;

preview of Courier font at 12 pt size

preview of Courier New font at 12 pt size

preview of Nimbus Mono L font at 12 pt size

preview of DejaVu Sans Mono font at 12 pt size

preview of Lucida Console font at 12 pt size

A traditional Palatino Linotype-based serif stack

Palatino is based loosely on the fonts of the Italian Renaissance. It has a calligraphic style and is both elegant and easy to read. Our Palatino font stack:

font-family: "Palatino Linotype", Georgia, "URW Palladio L", "Century
Schoolbook L", serif;

preview of Palatino Linotype font at 12 pt size

preview of Georgia font at 12 pt size

preview of URW Palladio L font at 12 pt size

preview of Century Schoolbook L font at 12 pt size

The Times New Roman-based serif stack

Times New Roman is a serif font designed for the British newspaper, The Times, and became a computer staple with Microsoft Windows. Times is its Apple counterpart.

font-family: "Times New Roman", "Bitstream Charter", Sylfaen, Times,
Georgia, serif;

preview of Times New Roman font at 12 pt size

preview of Bitstream Charter font at 12 pt size

preview of Sylfaen font at 12 pt size

preview of Times font at 12 pt size

preview of Georgia font at 12 pt size


Copyright © 2017 Ars Informatica. All Rights Reserved.