Did you know letters can be dissected into parts as if they were a puzzle? Like people, fonts have personalities, moods, styles—and even anatomical features! Knowing these components will help us understand what makes different fonts stand out and why.
Ready to discover, dissect, and get nerdy about typography? Let’s do this thing!
Remember back to when you first learned to write on lined paper in kindergarten? Your letters were meant to fit in between the lines. Letter anatomy relies on a concept much like that – just with invisible lines.
So pretend you have a big ol’ sheet of lined paper and let’s cut up our letters to bits and pieces.
The line where the letters sit is called the baseline, while the distance from the baseline to the top of the capital letter is called the cap height. The x-height is the height of the body of the lowercase x located between the baseline and the cap height. Not all lowercase letters are the exact height, so we use the lowercase x as a reference point.
If you look at most letters, they have a stem — which is a straight vertical stroke in an upright character. Think of the letter t and how the stem holds it upright like the stem of a flower. If a letter has no straight vertical stroke, like the letter m, then the main straight diagonal stroke is considered the stem.
When we refer to a straight horizontal stroke, then we’re talking about a crossbar. That’s the bar that goes across the inside of the letter and connects one side to another. You’ll see these most commonly in the letters A, H, R, e, and f.
Not sure what a stroke is? That’s just what we call a straight or curved line and can be manipulated in every which way and how.
Speaking of curves, think about the letter o. It kind of looks like a bowl, right? Well in letter anatomy, that’s exactly what it is! A bowl creates an enclosed curved space, like in the letters b, d, e, g, o, D, and B. The empty space within an enclosed space, like in the letters A, b, d, o, and P are called counters. They’re also often seen in bowls. And of course, we can’t forget our spine — which is the curvy body of the letter s. Fun fact: an s rotated 180 degrees is still an s!
The lowercase letter g is a whopper when it comes to letter anatomy. It contains a loop (the lower portion of the lowercase g), a link (the stroke that connects the top and bottom parts of the letter), a bowl, and a counter. Go g!
There are the little squiggly pieces that don’t fall into the category of a curve or a line.
Like an ascender, which is the part of a lowercase letter that extends above the font’s x-height (b, d, f, h, k, l, t).
On the flip side, there’s the part of the letter that extends below the font’s x-height — a descender, which you’ll typically see in the letters g, j, p, q, y, and sometimes J.
And sometimes, you’ll find a tail on a descender, which is an outstroke, such as in the letters j, y, J, Q, and R.
Lastly, you’ve got your arm and your leg – which are exactly what they sound like: a stroke that is attached on one end and free on the other.
Serif is when you see a stroke attached to a letter. These strokes can be manipulated to create a more decorative or traditional look for a font. They’re also the preferred body copy choice because they tend to be more legible at smaller scales. The little lines that are attached to the letter actually help you distinguish between the letterforms, making it easier for your reading to flow.
Sans serif is literally “Without serif” — so no strokes at the end of the letter. These are clean, precise, and often considered more approachable. These tend to be more popular for digital use, though it’s often subject to personal preference!
Knowing the different components of a letter’s anatomy means that we can look for special details in selecting fonts for a design. It also means that we can manipulate those details to create our own fonts. Which is a whole other topic — and one we’ll get to soon!
Download our FREE FONT RESOURCE
Listen or watch our Designer Chat with The Routine Creative
Visit the Type Lab with Mrs. Wheeler
Resources:
https://visme.co/blog/type-anatomy/
https://designmodo.com/letterform/
https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy
https://www.adobe.com/creativecloud/design/discover/serif-vs-sans-serif.htmlhttps://www.impactplus.com/blog/sans-serif-vs-serif-font-which-should-you-use-when