Design & UX
Article

The Anatomy of a Letterform

By Jason Beaird

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 web designers probably don’t need to get into that much detail, it is important that you know some basic terminology if you’re going to be talking about, and working with, type. The image below identifies the most important aspects of type. Each is explained below.

The terminology of type

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.

Old-style numerals in the font Georgia

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.

Example of a ligature

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).

Have you ever had to explain type to someone — perhaps another designer or a client? Do you think these definitions will help?

More:
  • http://twitter.com/nathj07 Nathan Davies

    Great explanation, enjoyed it and learned a bit more about typography. One pointer though is that the figures are referenced in the text by number but not labelled – just an observation.

  • Cohiba

    Bravo! The lessons about typography are much appreciated. Many sites dedicated to “design” gloss over or skip it all together. In fact I’ve met a lot of Design graduates who can barely use it.

  • Gareth Edwards

    “14. Ligature  … greater aesthetic balance…”
    Oh Jason! You missed the perfect opportunity to demonstrate a ligature right there in copy with the original/correct spelling “æsthetic”
    Regardless, great art.

  • Gareth Edwards

    “14. Ligature  … greater aesthetic balance…”
    Oh Jason! You missed the perfect opportunity to demonstrate a ligature right there in copy with the original/correct spelling “æsthetic”
    Regardless, great art.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.