No matter how unique typefaces can be, they all share some features. Like a human body, a typeface can be dissected into anatomic parts with a specific name and function. Whether you're a typeface designer or just a general typography enthusiast, learning type's anatomy helps you better understand what makes a good or bad typeface, what influences its legibility, or what creates a specific style.

Plus, you'll feel more confident about selecting a typeface that will meet your needs and fit your design project. Does the x-height define the height of a lowercase "x"? In what cases does tracking fail to help, so you need to apply kerning? Do you need a specific typeface for numbers? You'll know how to answer these questions and feel more confident to discuss type in more detail with other designers.

Exercise #1

X-height

X-height

X-height defines the height of all lowercase letters of a given typeface. The term borrows its name from the letter "x," which serves as a measurement unit.

The larger the x-height, the more white space the typeface leverages, and the more legible the typeface is even at small font sizes. For example, Helvetica set at 8pt still remains clear and distinct.

Exercise #2

Cap height

Cap height

Cap height measures the height of capital letters of a given typeface. The most accurate measurements are taken from letters with flat bottoms, such as L, E, or M. Curved or pointed letters, like S, O, or A may slightly overshoot above the cap height to achieve an optical effect of being the same size.

Exercise #3

Stroke

Stroke

A stroke is a line or a curve that helps form letters. In some letters like "w," "k," and "l," these lines are straight. In others like "c," "o," and "s," the lines curve. These lines are the main parts of any letter we write or type.[1]

Exercise #4

Ascender

Ascender

The ascender is the vertical stroke found on lowercase letters (b, d, f, h, k, l, t) that extends above the typeface's x-height or cap height.[2] The invisible line marking the height of all ascenders in a given typeface is called the ascender line.

Exercise #5

Descender

Descender

The descender is the part of a lowercase letter that extends below the baseline.[3] Letters g, j, q, p, y, and sometimes f have such "tails," and the lowest parts are marked by an invisible line — the descender line.

Pro Tip! If descenders are too long they can intersect with the ascenders of letters on the next line. Fix this by either finding synonyms that don't possess ascenders or descenders or adjusting line spacing.

Exercise #6

Serif

Serif

Serifs are small decorative extensions at the beginning or end of a stroke on a letter. They are the hallmarks of serif typefaces — the oldest typefaces originally popularized by early print magazines. The most popular serif typefaces are Times New Roman, Georgia, and Baskerville.

Serif typefaces create a feeling of sophistication, trust, and world-class quality. The New York Times, Huffington Post, Dior, and Burberry use serif typefaces for their brands.

Exercise #7

Kerning

Kerning

Kerning is the adjustment of spacing between individual characters, usually to achieve a visually appealing result. Certain letter combinations (usually involving outward angles or large open spaces like W, Y, V, or T) have large gaps and look awkward.[4]

Some typefaces have kerning that looks fine at small sizes but becomes unbalanced and difficult to read when enlarged for headlines. That happens because many free (and even low-cost) typefaces have little or no built-in kerning and demand manual adjustments.

Pro Tip! You can experiment with kerning to create unique logo variations.

Exercise #8

Tracking

Tracking

Tracking adjusts the overall spacing between letters. Increased tracking makes the text feel more spacious and sometimes can be used to emphasize a word, especially in tandem with caps or small caps. Like kerning, tracking is commonly applied to headlines and logos to diminish weird gaps in large-scale text.

White text on a black background is usually perceived as more legible when it has increased tracking applied.

Exercise #9

Baseline

Baseline

The invisible horizontal line that all letters sit on is called the baseline. Everything below the baseline is a descender.

The baseline defines the bottom of each letter's x-height and plays an important role in measuring the vertical distance between text and an element.[5]

Exercise #10

Weight

Weight

Weight refers to the overall visual heaviness or lightness of a typeface, determined by the thickness of the character outlines relative to their height and structure.

A common typeface may have 3 to 6 weights and include variations such as light, regular, medium, and bold.

In CSS, web designers use numerical values to define the font-weight property: 100 — thin, 400 — normal or regular, 700 — bold, and 900 — black or heavy.

Pro Tip! When using very light (like 100 or 200) or very heavy weights (800 or 900), use larger font sizes. Otherwise, the text won't be legible.

Exercise #11

Tabular figures

Tabular figures

Tabular figures, aka monospaced numbers, refer to the spacing of figures where they all take up the same horizontal space. As a result, the numeral "1111" takes up as much space as "9999."

Designers should use tabular figures in tables within annual reports, price lists, financial statements, invoices, and other columns of figures where values change constantly and may look offset.[6] With tabular figures, users can scan and compare numerical data easily.

Pro Tip! Select a typeface with tabular figures in the first place.

Exercise #12

Proportional figures

Proportional figures

Proportional or non-lining figures have varying widths, which results in more even, balanced spacing. Designers should use proportional figures for numbers inside of headlines, subheads, or any other copy where it should blend into text context and doesn't need to be vertically aligned with other numbers.

Exercise #13

Ligatures

Ligatures

In typography, a ligature is a combination of two or more graphemes or letters joined into a single glyph. The most common ligatures, like fi, fl, and ff, involve the lowercase f because of its overhanging shape. Another famous ligature is an ampersand (&), representing a combination of the old handwritten Latin letters e and t from the word et, meaning "and."

Depending on their role in the text, ligatures can be broken down into 4 types:

  • Standard: Ligatures like fi, fl, ff, ffi, ffl, and ft exist in order to increase legibility and make this collision of letters more attractive.
  • Discretionary: Those ligatures may include ct, fs, st, sp and serve a decorative function, creating a more old-fashioned look.
  • Unusual or Uncommon: May include standard and discretionary ligatures that are rarely encountered in text, like fj, fk, or ij.
  • Long s: These are usually discretionary ligatures involving a long s combined with h, l, i, or t.[7]
Complete this lesson and move one step closer to your course certificate
<?xml version="1.0" encoding="utf-8"?>