The Blatantly Obvious Solution: Using Safe Fonts

Innovative solutions like sIFR serve as a testament to how badly designers want to use particular fonts in their layouts. So, what if every Internet user actually had installed the font that you wanted to use for your web site? Displaying your site’s text in that font would be as simple as setting the font-family property in CSS. Unfortunately, the number of fonts that are universally available is severely limited. This is precisely the reason why designer Andrei Michael Herasimchuk posted on his site “An open letter to John Warnock” in August of 2006. In his letter, Andrei requested that Adobe’s co-founder convince the company to release eight to 12 of its core fonts into the public domain. If they did so, Apple and Microsoft would surely include these fonts in their operating systems, making them available to all Internet users. While releasing these fonts would deprive Adobe of some future income, Andrei argued that it would “go a long way towards providing designers the tools they need to fulfill the promise of communication on the Internet.” Naturally, the letter has received a great deal of grassroots support from the design community, and it would be fantastic to see something come of it.

Even if the safe list of universally installed fonts never expands, there will always be a way to use non-standard fonts in your web sites. For this reason, it’s important to have an understanding of the different fonts that are available. And to do that, you must first understand some details about the individual glyphs that make up those fonts.

Anatomy of a Letterform

Some of the design classes I took in college got pretty deep into the anatomy and terminology of type. Many people can already identify serifs, ascenders, and descenders, but for one class, we had about 100 terms to memorize. While I won’t be that cruel here, it is important that you know some basic terminology before we get started talking about type. Sure, I could just talk about type using informal words like squiggles, slants, and thingies to describe letterforms, but that could get confusing rather quickly.

Take a look at Figure 4.5, which is explained below.


1) baseline

The baseline is the imaginary horizontal line on which most characters sit. The only character that hangs below the baseline in Figure 4.5 is the lowercase “q.”

2) cap height

The cap height or capline is another imaginary line. This one marks the height of all capital letters in a typeface. Notice that the cap height is below the maximum height of the typeface.

3) crossbar

A stroke that connects two lines in the capital letterforms of “A” and “H” is called a crossbar. A horizontal stroke that does not connect two lines, like the one in the lower case “f” or “t,” is known as a cross stroke.

4) serif

Serif is the name given to the finishing strokes at the bottoms and tops of certain typefaces. I’ll talk more about serifs when we get into typeface distinctions.

5) meanline

Another imaginary horizontal line that marks the top edge of the lowercase letters is the meanline. Contrary to the way it sounds, the meanline isn’t always exactly centered between the baseline and the cap height.

6) bowl

The bowl of a letter is the rounded curve that encloses negative space in a letterform. Examples of bowls can be seen in the letters “D,” “o,” and “g.”

7) descender

The lower portion of the lowercase letters “g,” “j,” “p,” “q,” and “y” that extend below the baseline of a typeface is known as the descender. The only other characters that typically extend below the baseline are the old-style numerals in some typefaces. These types of numerals, examples of which from the Georgia typeface can be seen in Figure 4.6, were thought to blend better with lowercase roman numerals, and they look particularly good when used within a body of text.


8) counter

The negative space within a letter is called the counter. In some letters, like “A,” “o,” and “P,” the counter is fully enclosed. The non-closed negative spaces in letters like “G,” “u,” and “c” are also known as counters.

9) stem

A stem is the main vertical or diagonal stroke in a letterform. These include the vertical portions of the letters “I” and “H,” as well as all of the stokes in the letter “W.”

10) tittle

This is probably my favorite typeface term. Tittle is the name given to the dot above the lowercase “j” and “i.”

11) terminal

The end of a stem or stroke that has no serif is known as a terminal. Even the ends of some serif typefaces have terminals, as you can see in the letter “c” in Figure 4.6.

12) ascender

The tops of most lowercase letters form an imaginary line that’s known as the meanline. Some lowercase letters have an ascender, which is an extension that rises above the meanline. Those letters are “b,” “d,” “f,” “h,” “k,” “l,” and “t.”

13) leg

The lower, angled strokes seen in the letters “K,” “R,” and “Q” are known as legs. These are also sometimes referred to as tails.

14) ligature

You may not have noticed in Figure 4.5, but the “f” and “i” of the word “fix” are actually combined into one character. This combination of characters is known as a ligature. Ligatures exist to give the spacing between certain characters a greater aesthetic balance, as Figure 4.7 illustrates.


15) x-height

The x-height is exactly what you would expect it to be: the height of the lowercase x in a typeface. Essentially the x-height is the distance between the baseline and the meanline of a typeface. Although it’s not very practical, you can actually use x-height as a relative unit of measurement in CSS (ex).