The Basics of Type: Design Interfaces Users Keep Coming Back To

Type is everywhere. In the books you read, the products you use, and even in this very website you're on right now. But what is type? In the context of design, type is the style or appearance of text. It can also refer to the process of working with text. Typography can often be an intimidating topic, but it doesn’t have to be. You only need to understand the basics to make an impact in your designs.

So, let’s begin. Designer and educator Mia Cinelli will discuss type classifications and type families and help us understand the difference between a font and a typeface.

What Are Type Classifications?

According to Ellen Lupton, author of “Thinking with Type,” type classifications are a basic system for classifying typefaces devised in the nineteenth century, when printers sought to identify a heritage for their own craft analogous to that of art history. Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic. These three main groups correspond roughly to the Renaissance, Baroque, and Enlightenment periods in art and literature. 

Historians and critics of typography have since proposed more finely grained schemes that attempt to better capture the diversity of letterforms. Designers in the twentieth and twenty-first centuries have continued to create new typefaces based on historic characteristics. Let’s take a look at the common classifications for Serif, Sans Serif, Monospace, Script, and Display typefaces.

Serif

A serif is a stroke added to the beginning or end of one of the main strokes of a letter. A typeface with serifs is called a serif typeface. Serifs can be classified as Old-Style, Transitional, Modern, and Slab.

Characteristics of Serif Typefaces:

Old-Style

• Have a low contrast between thick and thin strokes

• Have a diagonal stress in the strokes

• Have slanted serifs on lower-case ascenders

Transitional

• Have a high contrast between thick and thin strokes

• Have a medium-high x-height

• Have vertical stress in the strokes

• Have bracketed serifs

Modern (Didone, Neoclassical)

• Have an extreme, abrupt contrast between thick and thin strokes

• Have a medium-high x-height

• Have vertical stress in the strokes

• Have fine, unbracketed (hairline) serifs

Slab

• Are heavy serifs with subtle differences between the stroke weights

• May be unbracketed (geometric slabs) or bracketed (such as Clarendon)

Sans Serif

A typeface without serifs is called a sans serif typeface, from the French word “sans,” which means "without." Sans serifs can be classified as neo-grotesque, humanist and geometric. (A fourth category, grotesque, covers the earliest nineteenth-century sans serifs such as Akzidenz-Grotesk and is often grouped together with neo-grotesque.)

Characteristics of Sans Serif Typefaces:

Neo-grotesque

• Have a low contrast between thick and thin strokes

• Have vertical or no observable stress

Humanist

• Have a medium contrast between thick and thin strokes

• Have a slanted stress

Geometric

• Have a low contrast between thick and thin strokes

• Have vertical stress and circular, round forms

Monospace

A typeface that displays all characters with the same width is known as Monospace. 

Script

Script typefaces have a natural, handwritten feel. Scripts can be classified as Black Letter, Calligraphic, and Handwriting.

Characteristics of Script Typefaces:

• Black Letter

  • Have a high contrast between thick and thin strokes

  • Are narrow with straight lines and angular curves

• Calligraphic

  • Are replications of calligraphic styles of writing (formal)

• Handwriting

  • Are replications of handwriting (casual)

Display (Decorative)

Display typefaces, also known as decorative, are a broad category of typefaces that do not fit into the preceding classifications. They are typically suited for large point sizes and primarily used for display.

Characteristics of Display Typefaces:

• Decorative

  • Are distinctive, eye-catching, and original

Example in Use: Helvetica

This NYC Subway Map, designed by Massimo Vignelli, uses a sans serif typeface, Helvetica, to clearly indicate neighborhoods, stations, and transit lines. (Note that the subway station signage of this era was set in Standard, the American name for Akzidenz-Grotesk; Helvetica was not adopted as the official subway signage typeface until 1989.) 

Advance Your Career With This Free Template for “Type Classifications”

Your name *

Optional

Please provide your name.

Email *

Optional

We respect your privacy

Please provide a valid email address.

Get 1 powerful email each week: Learn Design and AI From the Best. Get 1 powerful email each week: Learn Design and AI From the Best.

Download Free Template

What are Type Families?

In the sixteenth century, printers began organizing roman and italic typefaces into matched families. The concept was formalized in the early twentieth century to include styles such as bold, semibold and small caps.

Example in Use: Garamond 3

This magazine cover uses the Garamond 3 typeface family in various sizes. Although the typeface is classical and conservative, the obsessive, slightly deranged layout is distinctly contemporary.

What are Type Superfamilies?

A traditional Roman book face typically has a small family, an intimate group that includes Roman, italic, small caps, and possibly bold and semibold (each with an italic variant). Sans-serif families often come in many more weights and sizes, such as thin, light, black, compressed and condensed. A superfamily consists of dozens of related fonts in multiple weights and/or widths, often with both sans-serif and serif versions. Small capitals and non-lining numerals (once found only in serif fonts) are included in the sans-serif versions of Thesis, Scala Pro, and many other contemporary superfamilies.

Example in Use: Univers

Univers was designed by the Swiss typographer Adrian Frutiger in 1957. He designed 21 versions of Univers, in 5 weights and 5 widths. Whereas some type families grow over time, Univers was conceived as a total system from its inception.

The Take Away

Type is everywhere. In the books you read, the products you use, and even in this very website you're on right now. In the context of design, type is the style or appearance of text. In this lesson, you learned about type classifications, type families, and the difference between a font and a typeface.

Type classifications were a basic system for classifying typefaces, devised in the nineteenth century to organize and understand type. Common classifications include Serif, Sans Serif, Monospace, Script, and Display typefaces.

You also learned about type families, a concept formalized in the early twentieth century to include styles such as roman, italic, small caps, and bold — and type superfamilies, which consisted of dozens of related fonts in multiple weights and sizes, including thin, light, black, compressed, and condensed.

Remember, you only need to understand the basics to type to make an impact in your designs.

References and Where to Learn More

Learn more about typography by reading this thoughtful book by Ellen Lupton: Ellen Lupton, Thinking with Type, 2010.

Learn more about Type Classifications.

Visit Google Material Design to understand Typography.

Image

© Interaction Design Foundation, CC BY-SA 3.0