Design & Style

Understanding Typeface: The 22 Elements of Typography

Written by MasterClass

Last updated: Jun 7, 2021 • 7 min read

Typefaces can set the mood of digital writing, web design, graphic design, headlines, advertisements, logos, and more.

Learn From the Best

What Is a Typeface?

A typeface is a specific style of letter work and punctuation marks, also known as glyphs, that share a common design. Within any typeface, there is a family of fonts that can be altered to different sizes, thicknesses, or styles. The core design of the letter work, however, is called the typeface. Typefaces were born with the invention of the printing press, and come standard in digital word processing programs used today. Typefaces can also be designed by entities like digital font foundries or type designers.

A Brief History of Typeface

Typefaces have been around since the mid-fifteenth century, starting with Johannes Gutenberg’s invention of the printing press. His reusable, mechanical block letters were able to create pages full of text faster than writing by hand. The original typeface design was based on Blackletter calligraphy known as Gothic. However, these letters took up a lot of space, creating much longer books, and required more time for typesetting the metal letters.

In the late fifteenth century, French engraver Nicolas Jensen created the Roman typeface, a smaller lettering design that could fit more words on every page. Jenson’s typeface would eventually become the model that many modern fonts are based on today. In 1780, two font designers—Firmin Didot and Giambattista Bodoni—created the first modern serif typeface, marked by decorative tails at the end of letter strokes. Slab serif fonts became popular in nineteenth-century printing, as well as in printed advertising.

Throughout the twentieth century, printed media favored serif typefaces, though the sans-serif font Helvetica—invented by Max Miedinger—became popular in the mid-twentieth century. In the late 1960s, Rudolf Hell invented the first digital typeface, with the typefaces and font styles evolving and becoming more readable into the early 1970s. Today, a series of typeface and font templates come standard in word processors on both Macs and PCs.

What’s the Difference Between Typeface and Font?

The main difference between typefaces and fonts is that a typeface is a grouping of glyphs characterized by the same design. A font is a subset of a typeface that is created by altering the original typeface. For example, Arial Narrow, characterized by thinner lines, and Arial Black, characterized by heavier lines, are two different fonts created from the same Arial typeface.

Serif vs. Sans-Serif Typefaces

Many popular typefaces and their requisite fonts fall into two categories: serif typefaces or sans-serif fonts. A serif is a decorative stroke that extends off the end of a stroke of a letter. Typefaces that have serifs are referred to as serif typefaces, while sans-serif typefaces do not have those decorative strokes. Some popular examples of serif typefaces are Times New Roman, Garamond, and Georgia. Some popular sans-serif fonts are Arial, Futura, and Helvetica.

22 Elements of Typography

Some common elements of letter work in type design include:

  1. 1. Arm: An arm is the part of the letter that extends upwards—either straight or curved—with one end attached and one free, like the uppercase or lowercase versions of the letter “V.”
  2. 2. Ascenders: Ascenders are the parts of lowercase letters that extend above the x-height, like with the letter “h,” “f,” or “l.”
  3. 3. Bar: A bar is the horizontal stroke of a letter, such as in “f” or “e.”
  4. 4. Bowl: A bowl is the curved part of a character that creates an enclosed space. Bowls are in letters like “O” and “o,” as well as “D” and “d.”
  5. 5. Cap height: In typographic design, the cap height or cap line refers to the imaginary line marking the height of flat, uppercase letters like “M.” Legibility can increase or decrease depending on the ratio between the x-height and cap-height.
  6. 6. Counter: The counter refers to the partially or fully enclosed negative space inside certain letters. For letters like “a,” “b,” and “o,” these feature closed counters created by bowls. Open counters or apertures refer to the white space inside partially enclosed letters like “e,” “c,” or the top part of the lowercase “a.”
  7. 7. Crossbar: The crossbar is the horizontal stroke of a letter that connects two other strokes, such as with “A” or “H.”
  8. 8. Descenders: Descenders are parts of the letter that dip below the baseline. You can find descenders in both capital letters and lowercase letters, as it is seen in “Q” but also “y,” “j,” and “g.”
  9. 9. Ear: In some typefaces, the small stroke that protrudes from the side of a lowercase “g” is called an ear.
  10. 10. Finials: Finials are the curved or tapered end seen on letters like “e” and “c.”
  11. 11. Leg: A leg is the part of the letter that extends upwards, either straight or curved, with one end attached and one free, like the lower half of the letter “K.”
  12. 12. Serifs: Serifs are the little lines or strokes that hang off the main stroke as a stylistic accent of the letters in serif fonts. Times New Roman is a popular serif typeface, while Arial is a widely used sans-serif typeface.
  13. 13. Shoulder: A shoulder is the curved, downward stroke or arch seen in letters like “h,” “m,” and “n.”
  14. 14. Spine: A spine is the main curved stroke in “S” and “s.”
  15. 15. Spur: The small projection seen protruding from the main stroke, often seen on the horizontal line of the uppercase “G.”
  16. 16. Stem: A letter’s stem is the main vertical stroke of a letter like “K,” or the first diagonal stroke of a letter with no verticals like “A.”
  17. 17. Stroke: A stroke is any straight or curved line used to make a visual representation of a letter.
  18. 18. Swash: A letter that contains neither serifs nor terminals may instead have swashes, which are fancy flourishes that replace the space a terminal or serif would normally be.
  19. 19. Tail: Tails specifically reference the curved descender part of letters like “Q,” “j,” “y,” and “g.”
  20. 20. Terminal: A terminal refers to the end of a letter stroke that does not have a serif, usually seen in many sans-serif fonts.
  21. 21. Tittle: The dot above a lowercase “i” or “j” is referred to as the tittle.
  22. 22. X-height: The x-height refers to the spacing between the baseline and the median line for lower case text. Parts of the letter that extend above the x-height are ascenders, while parts of the letter that dip below the baseline are descenders.

8 Styles of Typefaces

Typefaces can come in bold, extra bold, italic, or condensed versions, as well as narrow, light, or ultra variations of each. Some popular typeface styles include:

  1. 1. Times New Roman: Times New Roman is a serif typeface characterized by the extra strokes on the end of a stroke of a letter. Times New Roman is often a common choice for plain text reading, as the letterforms use the space of a page economically.
  2. 2. Arial: Arial is a neo-grotesque, sans-serif typeface with fewer strokes than standard serif typefaces. The curves in Arial fonts are full and soft with terminal strokes cut on the diagonal.
  3. 3. Helvetica: Developed in 1957, Helvetica is another sans-serif typeface that lacks curved tails or tips. Helvetica is a dense letterform with high x-height and tight spacing between the characters.
  4. 4. Futura: This sans-serif typeface is based on geometric shapes and the Bauhaus design style. The letterforms of Futura are more modernist and carry more weight than their predecessors, the grotesques, often characterized by their curved terminal strokes or uniformed capital letters.
  5. 5. Garamond: Garamond, digitally known as Monotype Garamond, is a type of serif typeface named after Claude Garamond, a sixteenth-century Parisian engraver of punches which are the molds that created metal type. Garamond typefaces include characteristics like slanted counters or scooped serifs and are seen often in body text and book publishing.
  6. 6. Baskerville: Baskerville is a rounded yet sharply cut typeface, though many iterations since have taken on other distinct characteristics. This serif letterform is considered a high contrast, transitional typeface, characterized by upright strokes and varying width of lettering.
  7. 7. Caslon: Caslon typeface is characterized by its older style of letterforms, with bracketed serifs, short ascenders, and a moderate variety of stroke widths that make it resemble handwriting.
  8. 8. Verdana: This sans-serif letterform was created to make computer reading easier. This font is characterized by loose letter spacing, wide counters, and a large x-height.

Want to Learn More About Tapping Into Your Graphic Design Genius?

Get a MasterClass Annual Membership and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.