How to describe typefaces

This is an excerpt from Designing with type, a 9-part InVision e-course by Luke Jones.

Selecting an appropriate font for a project lies in the ability to understand more than what a font looks like.

An avant-garde font from the early 20th century set alongside a serif humanist font from the 17th century will be a confusing contrast—the fonts would contradict each other. In contrast, pairing 2 fonts from the same era of similar styles will harmonize on the page.

An essential part of choosing, pairing, and formatting fonts lies in the ability to describe them. Plus, your ability to describe type will make your rationale for design rock solid—and selling your designs is a fundamental part of being a successful designer. (Check out designers’ favorite typefaces here.)

“Selling your designs is a fundamental part of being a successful designer.”

Describing type will be broken down into:

• Font classifications
• Anatomy of type
• Display or text

Note: I’ll be using “points” as a unit of measurement. Points translate across all typographic mediums, whereas units like “ems” or “pixels” focus on screen only.

Additional words (such as ligature or glyph) will be described as and when they’re used so they’re shown in context with the definition.

Font classifications

There are 7 primary classifications to help describe and choose type. They were devised in the 19th century and still stand today:

• Humanist
• Transitional
• Modern
• Slab
• Humanist sans
• Transitional sans
• Geometric

Humanist and humanist sans are inspired by the letterforms of calligraphy, the gentle curves and strokes emulating that of a human hand. Transitional typefaces are a step away from the emulated edges of a calligraphic pen, and they have sharper edges and a starker contrast. Modern, slab, and geometric are further away from the humanist letterforms, instead being created through heavy lines, stronger contrast, and geometric shapes.

There are looser classifications of type (e.g. grotesque or handwritten), but there isn’t a standardized method of describing them. Many of these fonts have characteristics that can be described using the primary classifications.

Anatomy of type

Every letter in every alphabet is unique and can be broken down into their core anatomies. Understanding the construction of each glyph will give you a greater appreciation of what makes each typeface different, and it’ll make it easier to pick a font that’s appropriate for what you need.

To break down the segments of each glyph, these are:

• Descender: The part of a glyph that descends below the baseline in letters such as g, p, and y
• Counter: The white space within a curved letter in letters such as a, c, and e
• Serif: The “feet” of a letter; sans serif literally means “without serif”
• Spine: The center part of the stroke in the letter “s”
• Ascender: The part of a glyph that ascends above the x-height in letters such as b, d, and h
• Stem: The vertical stroke of a letterform in letters such as F and H
• Bowl: The closed, rounded part of a letter in letters such as a, b, and p
• Terminal: A type of curve that ends without a serif in letters such as a, c, and f

In addition to the anatomy of a letter is how lines of text are made up. These terms are particularly helpful when trying to pair fonts or adjust font sizing.

• Cap-height: The distance from the baseline to the top of a flat letter such as E or F
• Baseline: The line on which letters sit, ignoring the overhang of curved letters
• x-height: The height of a lowercase letter “x” or the main body of each letter, excluding any ascenders or descenders

This is a list of the most common words used when discussing the anatomy of type. To delve into the deep world of typography terminology, take a look at Typography Deconstructed.

Display or text?

Classifications and anatomy aside, every font is created with a different purpose in mind. One of these is whether the font is suitable for display, text, or both. Put simply, display fonts are used for large text or headings and text fonts are used for just that: body text.

Pairing fonts is something we’ll talk about later in this course, but here’s a teaser: A font should be used for its intended purpose. A display font has been designed for use at large sizes, so it won’t be optimized for smaller sizes. In the same way, text fonts weren’t designed for use at large sizes, so they’ll lack the punch or detail provided by display fonts, yet they remain legible at small sizes.

“A font should be used for its intended purpose.”

Superfamilies

Some type designers just create a single typeface of one weight and style, but there are others who create vast families of fonts that include every variant the user of the font could hope for such as small caps, serif, sans serif, display, and text: all in one.

Superfamilies like Freight by Darden Studio are vast, versatile, and will pair together by design even when contrasting serif and sans serif text. This is just a small selection of the fonts available in the family, and it’s clear to see how the display font, text font, and text sans font harmonize with one another on the page.