<?xml version="1.0" encoding="utf-8"?>

Understanding type anatomy is essential for both graphic designers and UX designers. As graphic designers, knowing the anatomy of type helps create visually appealing compositions and convey messages effectively. It allows designers to make informed decisions when selecting typefaces that align with the project's goals and aesthetic vision.

For UX designers, type anatomy plays a crucial role in shaping user experiences. By understanding the differences in type anatomy, designers can leverage the nuances of different typefaces to evoke specific emotions, establish brand personality, and guide users' visual journey. Whether it's creating a sense of elegance and sophistication or conveying a friendly and approachable tone, the anatomy of typefaces influences the mood and overall impact of the design.

Building upon the knowledge gained in the previous lessons on type anatomy, we will explore the finer details of typefaces, focusing on their anatomy and their significance in design.

Exercise #1

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.[1] The invisible line that marks the height of all ascenders in a given typeface is called the ascender line.

The height of the ascenders is one of the prominent characteristics that identify typefaces. The ascenders of some typefaces are quite long and may touch or almost touch letters in the line above while affecting readability. To fix this issue, you can:

  • Increase the leading (line spacing)
  • Re-word problematic phrases
  • Change the typeface
  • Re-align the text[2]

Pro Tip: Avoid high-ascended typefaces when you're limited in terms of space. 

Exercise #2

Ascender line

The invisible line that marks the height of all ascenders in a given typeface is called the ascender line. The distance between the x-height — the height of the lowercase letter x in the font — and the ascender line defines the ascender height that can vary between typefaces. 

Exercise #3

Cross stroke

A cross stroke is a horizontal line that intersects the stem of a lowercase t or f. Although it can be used interchangeably with the arm, the cross stroke is different because it crosses over the stem.

Variations in the placement, thickness, and slope of the cross stroke are distinguishing characteristics of many type designs.

Exercise #4

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.

Like ascenders, descenders can be too large and crash with ascenders of letters below. To fix this, you can either find synonyms that don't possess ascenders or descenders or adjust line spacing.

Pro Tip: Some typefaces contain descenders on numerals that can add retro styling to your design.

Exercise #5

Descender line

Like the ascender line, the descender line is also invisible and marks the lowest parts of descenders in letters such as g, j, q, p, or y.

The distance between the descender line and baseline — an imaginary horizontal line one which all typeface letters sit — dictates the size of the descender.

Exercise #6

Tittle

The tittle, also known as the dot, is a small distinguishing mark that sits above a lowercase i or j. It's quite a meaningful part of type anatomy that helps readers recognize letters.

The first appearance of the tittle dates back to the beginning of the 11th century where it was used to define the neighboring letters i and j in Latin manuscripts. That time, the dot didn't look like a dot at all. The first mark over the i in English books looked like an upside-down u or a crescent moon. In the late 1400s, as the Roman-style typefaces began to spread, the large mark evolved into the small dot we use today.[4]

Exercise #7

Terminal

A terminal is a straight or curved stroke that doesn't terminate in a serif. Usually, all sans serif typefaces, like Arial or Verdana, end with terminals. Terminals can have different shapes which they are named after — for example, the ball, the finial, or the tear-drop. 

Exercise #8

Vertex

The vertex is the opposite of an apex. It defines the point where two strokes meet at the bottom of a character and can be found in letters V, v, or M. Remarkably, the lowercase and uppercase W/w represent both apex and vertex.

Don't confuse the vertex and crotch — the former marks the intersection of two lines, while the latter defines the inner area of an angle formed by these lines. 

Exercise #9

Ball Terminal

A ball terminal is a decorative form found at the end of a stroke. Compared to a serif, it generally has a circular shape. Typefaces with ball terminals create an aesthetically pleasing, sophisticated, and sometimes playful look that can be perfect for posters, invitations, menus, etc.

Exercise #10

Tail

In typography, the tail is the descending, often decorative stroke on the letter Q. Here's our trick to help you remember the term — think of the uppercase Q letter as a cat sitting with its back to you and its tail hanging off the baseline.

The tail also refers to the descending diagonal stroke on K or R. Depending on the typeface, the tail can be curved, tapered, or have a ball terminal, like the Carousel typeface.[5]

Exercise #11

Teardrop Terminal

A teardrop terminal is a variation of a decorative terminal. It got its name due to its resemblance to an actual teardrop.

Typefaces with teardrop terminals look unique and charming and are a perfect fit for logos, branding, packaging, advertising, and various editorial materials.

Complete this lesson and move one step closer to your course certificate