Published in

Basics of Typography Guides: Font Anatomy

When working on a project, there often comes a moment when the layout designer will consider changing the font selection for a specified section of content. Designers understand the basics of good typographic and how to apply them to their layout. With some basic understanding of typography, anyone can improve the selection of fonts and overall typographic implementation used on a design project. We will briefly look at type foundries and the anatomy of type.

Type Foundries

Before the digital revolution, type foundries manufactured metal or wooden typefaces for letterpress machines. These Linotype and Monotype machines required that each letter be hand positioned, making the process of type setting a page extremely time consuming. Since then, technology has streamlined the layout process with desktop publishing applications like Word and InDesign. Instead of metal or wooden typefaces, foundries digitally create and distribute their catalog of fonts online, making it easy for designers to discover and purchase typefaces in a wide range of styles.

Typographic Anatomy

Designers often choose a font based upon the individual components of each letterform. These components create a visual rhythm for the typeface which will complement or contrast with the design. Below is a reference guide for some of the notable features that make up a typeface.

Font Anatomy
  • Axis – The imaginary vertical line that bisects the upper and lower strokes of a letter

  • Stem – The main (usually) vertical stroke that acts as the trunk of the letter form

  • Crossbar – The (usually) horizontal stroke across the middle of uppercase ‘A’ and ‘H’

  • Bowl – The curved part of the stroke that encloses the circular portions of some letters

  • Counter – The enclosed curved negative space of some letters

  • Eye – Much like a counter, the eye refers specifically to the enclosed space in a lowercase ‘e’

  • Link – The short stroke of a lowercase double-story ‘g’ that connects the bowl and the loop together

  • Loop – The enclosed counter located below the baseline of a lowercase letter

  • Shoulder – A short arched stroke at the top of the stem that connects to a bar or terminal

  • Terminal – The decorative flourish at the end of a stem which is not a serif

  • Overshoot – The portion that barely extends beyond the baseline

  • Bracket – The curved connection between the stem and serif

  • Serif – the decorative flourish on the ends of a stem

  • Ear – a decorative flourish usually on the upper right side of the bowl

  • Arm – A horizontal open stroke ascender

  • Leg – A descending open stoke

  • Tail – A descending open stroke descender

  • Cap-height – The height from the baseline to the top of the uppercase letters

  • X-height – The height of the lowercase letters, disregarding ascenders or descenders. Often exemplified by a lowercase x

  • Baseline – The imaginary horizontal line upon which the letters in a font appear to rest

  • Ascender – The part of a lowercase letter that extends above the x-height

  • Descender – The part of a lowercase letter that extends below the baseline

Type Adjustments

Here are a couple common ways to adjust the spacing of a font when typesetting.

Type Leading
  • Kerning – increasing or decreasing the distance between each letter form

  • Leading – increasing or decreasing the distance between each successive line of type

Type Classification

Based upon the features inherent in the typeface, fonts are classified into several categories. Here are the most common classifications for type classification.

Type Specimen
  • Serif – fonts that have decorative flourishes or serifs on the end of the stem

  • San Serif – fonts that do not have decorative flourishes or serifs

  • Slab – Fonts that have square serif on the end of the stem

  • Script – Cursive fonts

  • Blackletter – Gothic script and Old English typefaces

  • Novelty – fonts with unique characteristics and embellishments outside of standard type specimens

  • Symbol – Pictographic fonts (eg. Wingdings)

Now that we understand the elements that comprise a typeface, we will look at how fonts can be utilized to enhance layouts in the next installment.

Follow our blog via RSS or Email.

Privacy Policy We do not sell or share your information.

Ted is a graphic designer and front-end developer who specializes in branding, marketing, and website development.