The Principles of Beautiful Typography

Sans Serif Fonts

At the time when typographers began experimenting with slab serifs, the idea of eliminating the serif altogether seemed like a huge mistake. Serifs were a tradition and removing them was typographic castration. The initial sans serif fonts were so loathed in the 1800s that they were referred to as grotesque. Eventually, though, people began to warm up to the idea of serif-less typefaces and by the 1920s some argued that the serif would soon be eliminated.

Although serif fonts are still used extensively, the popularity and versatility of the sans serif font category continues to grow. These types of fonts have a cleaner and more contemporary feel. They stand out as headlines, especially when placed near body text that's set in a serif face. This has long been a standard practice in print design and is a tip that I was taught in college. However, on the Web, the opposite has become true as designers use sans serif fonts for body text, contrasted with serif-font headlines. This trend can be seen on the homepage of Coudal Partners in Figure 4.16.

The shift toward using sans serif body text on the Web was born mainly of the limitations of older monitors and laptop screens. The image quality of display devices has improved much over the years, but the stroke variation and minute detail of serif fonts can make them almost unreadable at small sizes on lower resolution displays. The solution is either to increase the size of the font to compensate, or to use a sans serif font that has less detail. As you can see in Figure 4.17, sans serif fonts are more readable at small sizes.

Regardless of how they're used, sans serif fonts are extremely legible and practical for almost any purpose. The most-often used sans serif fonts are Arial and Verdana. Each of these font families exists in the default font sets of both major operating systems, but in the design world, these families have a reputation for being overused and generic (and in the design community, Arial has the added stigma of being widely considered the poor cousin of Helvetica). This makes them great for body text, where voiceless legibility is the goal, but for headlines and artistic applications, a more unique feel is often required. Sometimes a stronger serif font, or a more distinguished sans serif, will do the trick, but there are certainly more options available outside these two categories.

Handwritten Fonts

Before the invention of movable type systems, all text had to be carved, brushed, or written by hand. The downside to handwritten text -- especially my own -- is that achieving a uniformity of letterforms, alignment, and spacing can be frustrating. And as a result of these challenges, handwritten text can be very difficult to read. Yet the wonderful thing about handwriting is that it acts as a symbol of humanity, and gives a tangible personality to the text it represents. Just look at the text in Figure 4.18. Each line was written to represent the personality of the font in which it is written.

Handwritten fonts provide personality without the human error factor. The lettering and alignment in a handwritten font will be consistent, and if the font is well designed, the spacing should be good, too. As with any font, you cannot rely on site visitors to have your selected handwritten fonts installed, so to use them on the Web, you'll need to convert your handwritten text to images, or use some type of replacement technique, such as sIFR.

Fixed-width Fonts

You may have noticed by now that in most fonts, each letter takes up a different amount of space. For instance, the capital "W" takes up a large area, while the letter "l" has a very narrow footprint. To illustrate this point in plain text, take a guess which of the following sentences has more characters.

That was a trick question: they actually have the same number of characters! So why does the first sentence appear so much longer than the second? The explanation for this phenomenon is that the majority of fonts are proportionately spaced. Associated with each character of each font are rules that determine not only the width of the character, but also the amount of space that will appear around each character. Take a look at those two sentences again, this time, displayed in the font Courier:

The reason the two sentences appear to be the same width now is that Courier is a fixed-width or monospaced font. This category of fonts has uniform spacing, and the letterforms are designed so that they are similar in width. Fixed-width fonts were initially designed around the technical limitations of typewriters. Since early typewriters weren't capable of moving the typed page a different distance when a "w" was typed, rather than an "i", specialized fonts were developed for these devices. These fonts had to remain readable despite the fact that the spacing was the same for every letter. Early computer displays employed fixed-width fonts as well (and many still do -- see the terminal window display in Figure 4.19), but it wasn't long before computers were able to display much more legible variable-width (or proportional) fonts.

So why are fixed-width fonts still around today? Mainly for the sanity of coders and accountants. When these professionals write code or display tabular data as text, it's important that characters line up from row to row and column to column. If you're reading this book, you're probably already familiar with fixed-width fonts. They're used in terminal windows, as we've already seen, as well as text editors and calculators.

On the Web, the standard way to display text in a fixed-width font is to wrap it with <pre> and </pre> tags. pre is short for preformatted text, and aside from displaying fixed-width characters, the pre element also preserves tabs, spaces, and line breaks. This usually makes displaying code or tabular data on a web site as simple as cutting and pasting from the source. I say usually because HTML tags that exist within a box of preformatted text are rendered normally, so if you're trying to include any tags in your code, you'll need to replace any <s with the HTML character code equivalent of <, and any >s with >. As with every other HTML element, pre can be styled with CSS. Often, web developers who plan to show code on a page want the code to stand out from the regular text. Using CSS, the <pre> tag can be given a border, a background treatment, additional margins, or a different text treatment, to help it to stand out.

Another interesting, albeit obsolete, use of fixed-width fonts is in the creation of ASCII art. ASCII (American Standard Code for Information Interchange) was one of the original English character encodings for communications equipment, and for several years the 95 printable characters in this seven-bit system were the only graphics that ever showed up on a display. Before the Internet existed outside of the military and academia, there were networks of dial-up bulletin board systems (BBSs), many of which displayed menus and game graphics in ASCII characters. Having grown up during the peak of the BBS era, I loved to see the "underground" graphics people could create using only fixed-width type.

Although much more intricate ASCII art can be created from images using computer programs, the ASCII art created during the late 1980s and early 1990s was composed character by character, and really pushed the limits of the medium. This type of artwork is an often-overlooked link in the history of computer graphics.