What are the parts of a letterform?

A letterform is the shape of a single letter, and typographers break it down into named parts. The main ones are the stem (the main vertical stroke), the bowl (a curved stroke enclosing space), the counter (the enclosed or partly enclosed space inside a letter), the arm, leg, crossbar and tail, and the details at the ends of strokes such as serifs and terminals. Letters also sit on a set of invisible lines: the baseline, the x-height, the cap height, and the ascender and descender lines. Knowing these parts gives you a precise vocabulary for comparing typefaces and explaining why one reads better than another.

You don't need to memorise every term to design good websites, but a handful of them explain most of the differences you'll notice between typefaces. Open apertures, large counters and a generous x-height are why some faces stay clear at small sizes; high stroke contrast and fine serifs are why others look elegant at headline size but fragile in body text. In this article you'll learn the guidelines that letters sit on, the names of the strokes and spaces that make up each letter, the finer details at stroke endings, and how to use this knowledge when choosing and testing fonts.

The Guidelines Letters Sit On

Before naming the parts of individual letters, it helps to know the horizontal lines that every letter in a typeface is designed around.

• Baseline: The line most letters sit on. Round letters such as o dip very slightly below it so they look optically level with flat-bottomed letters.
• X-height: The height of lowercase letters without ascenders, such as x, a and n.
• Cap height: The height of flat-topped capital letters such as H and E.
• Ascender line: The top of tall lowercase strokes in letters such as b, d, h and l, which often rise slightly above the cap height.
• Descender line: The bottom of strokes that drop below the baseline in letters such as g, p and y.

These lines are part of the font's design, and they're described in the font file's metrics. CSS gives you units based on two of them. The ex unit equals the font's x-height and the cap unit equals its cap height, which can be handy for aligning icons with text:

.icon-inline {
  /* Size an icon to the height of the capital letters next to it */
  height: 1cap;
  width: auto;
  vertical-align: baseline;
}

The cap unit is supported in current versions of Chrome, Edge, Firefox and Safari. For a deeper look at the vertical lines, see ascenders, descenders and the baseline and what the x-height is.

The Main Strokes

Strokes are the lines that make up a letter. Different strokes have different names depending on their direction and how they connect.

Stem

The stem is the main vertical, or near-vertical, stroke. The left side of n, the upright of d and both sides of H are stems. Stem thickness largely defines a font's weight: a bold font has thicker stems than a regular one.

Bowl

A bowl is a curved stroke that encloses a space, such as the round parts of b, d, p and o. A bowl can be closed, as in o, or open where it meets a stem.

Arm and Leg

An arm is a horizontal or diagonal stroke that's attached at one end and free at the other, such as the top strokes of E and T or the upper diagonal of K. A leg is the lower diagonal stroke of letters like K and R.

Crossbar

The crossbar (also called a bar) is a horizontal stroke that connects two strokes or crosses a stem, as in A, H, e, f and t. The height of the crossbar in e has a surprising effect on readability: a high crossbar gives a smaller eye (see below) and can make e clog up at small sizes.

Shoulder and Arch

The shoulder is the curved stroke that leaves the stem of letters such as h, m and n. The point where it joins the stem is sometimes called the arch or crotch. A smooth, open shoulder helps lowercase letters look distinct from one another.

Spine

The spine is the main curved stroke of S and s. It's one of the hardest strokes to draw well, which is why the S is often a quick way to judge the quality of a typeface.

Tail

A tail is a descending stroke, often decorative, as in Q, and in some typefaces in K, R and j.

The Spaces Inside and Around Letters

The negative space in letters matters as much as the strokes. Readers recognise letters partly by their interior shapes.

Counter

A counter is the enclosed or partly enclosed space inside a letter. The inside of o is a closed counter; the space under the arch of n is an open counter. Large counters keep letters open and clear at small sizes. Small counters can fill in when text is rendered small or at low resolution.

Aperture

The aperture is the opening of a partly enclosed counter, such as the gap in c, e, a and s. Typefaces with open apertures, such as Fira Sans or Source Sans 3, tend to stay legible at small sizes and on low-quality screens. Typefaces with tight, closed apertures, such as Helvetica, can make c, e and o harder to tell apart when text is very small.

Eye

The eye is the closed counter at the top of the lowercase e. A tiny eye is a common reason a typeface looks muddy at small sizes.

Bowl vs Counter

These are often confused. The bowl is the stroke; the counter is the space it encloses.

Details at the Ends of Strokes

The finishing details at the end of strokes give typefaces much of their character.

Serif

A serif is a small projecting stroke at the end of a main stroke. Serifs vary from fine hairlines to heavy slabs, and they may be bracketed (joined to the stem with a curve) or unbracketed (meeting the stem at a sharp angle). Typefaces without them are called sans-serif.

Terminal

A terminal is the end of a stroke that doesn't have a serif. Terminals can be cut straight, at an angle, or rounded. In sans-serif typefaces, the angle of terminals strongly affects the feel: horizontal terminals tend to look closed and formal, while angled terminals look more open and dynamic.

Ball Terminal and Teardrop

Some serif typefaces finish strokes in a round blob, called a ball terminal, or a shape that tapers like a teardrop. You'll see them on the a, c, f, j and r of typefaces such as Bodoni and many contemporary serifs.

Spur

A spur is a small projection, often at the bottom right of a G or the junction of the stem and bowl of b.

Ear

The ear is the small stroke that projects from the top right of the bowl of a two-storey g. It's a small detail, but it's often where a typeface shows its personality.

Stroke Contrast and Stress

Two more terms describe the overall construction of a typeface rather than a specific part.

Contrast is the difference between the thickest and thinnest parts of strokes. Low-contrast typefaces, such as most sans-serifs, have strokes of nearly even thickness. High-contrast typefaces, such as Didone serifs like Bodoni and Didot, have very thick stems and hairline-thin connecting strokes.

Stress (or axis) is the direction in which strokes thicken. Look at the o: if its thinnest points are at about eleven and five o'clock, the stress is diagonal, typical of older serif designs that echo broad-nib pen writing. If the thinnest points are at twelve and six, the stress is vertical, as in later serif designs.

Contrast matters on screens. Hairline strokes that look refined at 48px can become faint or break up at 14px, especially on lower-resolution displays. A quick test page lets you compare candidate fonts side by side:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Letterform comparison</title>
    <style>
      body {
        font-size: 1rem;
        line-height: 1.5;
        margin: 2rem;
      }
      .sample {
        margin-block: 0 1.5rem;
      }
      .sample span {
        display: block;
        font-family: system-ui, sans-serif;
        font-size: 0.75rem;
        color: #555;
      }
      .large { font-size: 3rem; line-height: 1.1; }
      .small { font-size: 0.8125rem; }
    </style>
  </head>
  <body>
    <div class="sample" style="font-family: Georgia, serif">
      <span>Georgia</span>
      <p class="large">Rgaesc 1lI0O</p>
      <p class="small">Recognise the counters, apertures and eyes at 13px.</p>
    </div>
    <div class="sample" style="font-family: Verdana, sans-serif">
      <span>Verdana</span>
      <p class="large">Rgaesc 1lI0O</p>
      <p class="small">Recognise the counters, apertures and eyes at 13px.</p>
    </div>
  </body>
</html>

The sample string Rgaesc 1lI0O is chosen deliberately. It shows a leg (R), an ear (g), apertures and eyes (a, e, s, c), and the characters most often confused with each other (1, l, I, 0 and O).

Using Letterform Knowledge When Choosing Fonts

Once you know what to look for, you can evaluate a typeface more quickly than by staring at a whole paragraph.

1. Check the apertures: Set c, e and a at your smallest text size. Open apertures stay readable; closed ones start to look like o.
2. Check the counters: Look at a, e, g and s at small sizes. If they fill in, the font is better kept for headings.
3. Compare the x-height: Set two fonts at the same size. The one with the larger x-height will look bigger and is often easier to read at small sizes.
4. Look at contrast: High-contrast faces need larger sizes. Low-contrast faces cope better with small text and poor rendering.
5. Test ambiguous characters: In interfaces, usernames, codes and passwords, it matters that I, l and 1 look different, and that 0 and O can be told apart.
6. Look at terminals and serifs: These carry the tone. Rounded terminals feel softer; sharp, angled ones feel more energetic.

If you need to inspect metrics more precisely, the fonttools Python package can read them straight from a font file:

pip install fonttools
python3 -c "
from fontTools.ttLib import TTFont
font = TTFont('SourceSans3-Regular.ttf')
os2 = font['OS/2']
upm = font['head'].unitsPerEm
print('Units per em:', upm)
print('x-height:', os2.sxHeight, round(os2.sxHeight / upm, 3))
print('Cap height:', os2.sCapHeight, round(os2.sCapHeight / upm, 3))
"

Units per em: 1000
x-height: 486 0.486
Cap height: 660 0.66

The exact numbers depend on the font and version you inspect, but the ratios let you compare typefaces objectively. A font with an x-height ratio of 0.53 will look noticeably larger than one at 0.45 at the same CSS size.

---

FAQ: Parts of a Letterform

---

Conclusion

Every letter is built from a small set of named parts: stems, bowls, arms, legs, crossbars, shoulders and tails, enclosing counters and apertures, and finished with serifs or terminals. They sit on a framework of baseline, x-height, cap height, ascender and descender lines, and they vary in contrast and stress from one typeface to the next.

You don't need to name every spur and ear to build good websites. What matters is knowing which details affect readability: open apertures, generous counters, a healthy x-height and moderate contrast for body text, with more delicate details saved for larger sizes. Test candidate fonts with a few revealing characters at the sizes you'll actually use, and you'll make better choices faster.