UI Design

Typography Classification: A Guide

Typography classification is a highly systematic way to organize typefaces into categories. Such classification will help you, a designer, to gain a fundamental understanding of typefaces, teaches you about their origins, and explains their significant differences. 

Without further ado, let’s dive into the diverse typeface world!

Two male hands on an orange typewritter

Serifs

In typography classification, a serif is:

  • The mark or line that sometimes appears at the end of a character’s stroke,
  • The collective name for typefaces with serifs in their design. 

We can describe serifs as extensions, protrusions, or finishing strokes extending from the ends of a character. Usually, people refer to serif typefaces simply as “serifs,” but actually, it’s a description of a serif typeface that contains serifs in its letterforms. 

Roman monumental capitals are ancestors of all serif typefaces and the foundation for the Western design of type. Although they are decorative and stylistic, many claim that serifs enhance readability because they guide the eye from one character to another. Serifs also serve to differentiate typefaces with similar shapes from each other.

Within the typography classification, there are multiple sub-genres of serif type:

Fonts: Georgia, Merriweather, Times New Roman, Millard, PT Serif, TT Barrels, Juana, Palatino, Cormorant, Azeret Mono

Old style

Characterized by curved strokes with the axis inclined to the left, little contrast between thick-and-thin strokes, usually angled headserifs and bracketed serifs.

Examples: Adobe Jenson, Adobe Caslon, and Apple Garamond.

Characteristics of "old style" typography

Transitional

Represent the transition between old style and modern design. Transitional serifs have the axis of the curved strokes barely inclined or more vertically than diagonal, with more contrast between thick and thin strokes than in the old style, with thinner, flat, and bracketed serifs.

Examples: Times New Roman, Baskerville, and Merriweather.

Characteristics of "transitional" typography

Modern (Didone)

Refined and more delicate style, indicated by high or dramatic contrast between the thick and thin strokes, curved strokes on a vertical axis, and horizontal serifs with little or no bracketing.

Examples: ITC Bodoni and Didot.

Characteristics of "modern(didone)" typography

Glyphic

These serif type styles are lapidary (carved or engraved) rather than pen-drawn in nature. They contain a vertical axis, minimum stroke contrast, and often have triangular or flaring serifs.

Examples: ITC Quorum, Copperplate.

Slab serifs

These typefaces have very heavy square serifs, with little or no bracketing and hardly any stroke contrast, appearing monostroke. These serifs are often geometric or square in style. Slab serifs emerged in the early nineteenth century when there was a need for more robust fonts for printing headlines and other advertising material to convey powerful and bold messaging.

Examples: Rockwell, ITC Lubalin Graph, Egyptienne, Courier New.

Fonts: Josefin Slab, Rockwell, Roboto Slab, Arvo, Zilla Slab

Sans-serifs

In typography classification, another form of typeface is sans-serifs. 

The name of this category stems from a combination of the French word “sans,” which means “without,” and serifs, which are lines that appear at the end of characters’ strokes. Sans-serifs (sans serifs, gothic, or simply sans) were some of the first styles cut in stone, and since then, they have had periodic popularity due to their simplicity and partially industrial look. People use Sans-serif typefaces to express simplicity, modernity, or minimalism.

These are some of the most common categories of sans-serifs:

Fonts: Helvetica, Arial, Open Sans, Futura, Lato, Montserrat, Gill Sans, Poppins, Nanum Gothic, Fira Sans, Alegreya Sans

Grotesque

The first popular sans; its distinctive features contrast in stroke weight, a squared look to some curves, a “spurred” G, and a double-bowl (or two-story) letter g.

Examples: News Gothic, Franklin Gothic, Venus-Grotesk.

Characteristics of "grotesque" typography

Neo-Grotesque

Another name is 20th Century Grotesque; this sans has less pronounced stroke contrast and is more refined in form than its ancestor. It has lost the squared curve and often has a single-bowl g. Neo-grotesque type appeared in the 1950s with the International Typographic Style or, more commonly known, the Swiss style.

Examples: Helvetica, Univers, and from the digital period Arial and Roboto.

Characteristics of "neo-grotesque" typography

Geometric

These typefaces have solid geometric shapes, such as the perfect circle letter O, sharp and pointed uppercase N vertices, and a “single-story” lowercase letter a. They usually have monotone strokes. It originated in Germany and is popularly connected to the Bauhaus movement.

Examples: Kabel, Semplicità, Nobel, Metro. 

Characteristics of "geometric" typography

Humanistic

These sans serifs were an attempt to improve the readability of sans serifs by giving a sans-serif structure to the classical Roman form; these sans-serifs base on the proportions of Roman capitals and old style lowercase, with a clear stroke contrast.

Examples: Syntax and Optima.

Characteristics of "humanistic" typography

Script

In typography classification, Scripts are a vast category of typefaces that imitate handwriting or calligraphy. Scripts include many styles and characteristics and are much more fluid than traditional styles. People generally use them for displays or trade printing rather than as an extended body text in the Latin alphabet.

Fonts: Kapakana, Allura, Golden Youth Script, Backlash Script, Yellowtail

Formal

Flowing loops and flourishes characterize these elegant typestyles, along with graceful, rhythmic strokes. These designs often connect scripts and mimic the cursive handwriting of the nineteenth century. Today, people often use formal script typefaces for invitations and diplomas to induce a traditional and elegant feeling.

Examples: Bickham Script Pro, Kuenstler Script, and Redonda.

Casual and Brush Scripts

These scripts have an informal design and look like someone quickly drew them with a pen or a brush. Their strokes can be (but don’t have to be) connected, and they tend to convey a warm, friendly, and relaxed message. Advertisers around Europe and North America used them heavily during the 1970s.

Examples: Brush Script, Kaufmann, and Mistral.

Calligraphic

This broad category of typestyles aspires to imitate the calligrapher’s writing or lettering, whose work is hand-drawn and customized for each job (custom-made). Calligraphic typestyles often look as if they were drawn with flat-tipped pens or brushes. They occasionally include the drips, spots, and other irregularities ingrained in the handwriting process.

Examples: Ballerino. 

Blackletter

Another typography classification category is Blackletter. Blackletter (also known as Gothic script, Gothic minuscule, or Textura) typestyles unfolded from the early handwritten records of liturgical writings and illuminated manuscripts. Blackletter style went from writing to type first when Gutenberg used it to print his Bible, which was the first book printed with movable type.

Blackletter typefaces have a dense, black texture and very decorated caps. The lowercase consists of narrow, angular forms with dramatic thick-to-thin strokes and serifs. Usually, Blackletters give your designs an old-time, historical, and medieval look. They are rarely, if ever, used for UI design.

Examples: Schwabacher, Old English, Fette Fracktur.

Fonts: UnifrakturCook, Pirata One, Grenze Gotisch, Germania One

Handwritten

Handwritten (or handwriting) typefaces in the typography classification are interpretations of actual handwriting or hand printing. The stylistic range is remarkably diverse and can be anything – from a connected scrawl to a quirky, bouncy, uneven hand printing.

Handwritten typefaces mimic informal handwritten text. They offer a more personal style, but if you want to ensure seamless readability, you should avoid using them for large amounts of text. Handwritten typefaces convey a friendly, spontaneous, and relaxed feeling.

Examples: Deelirious and Dartangnon.

Fonts: Handlee, Homemade Apple, Waiting for the Sunrise

Monospaced

Typography classification brings us to Monospaced typefaces. These typefaces are non-proportional. Their letters and characters take exactly the same amount of horizontal space, contrasting with variable-width fonts, where the letters and spacings have different widths.

People standardly use Monospaced typefaces on typewriters and for typesetting computer code. Initially, Monospaced (also known as fixed-pitch, fixed-width, or non-proportional) typefaces existed in early computers and computer terminals with minimal graphical capabilities. However, even with the current possibilities of using other typefaces, people still choose Monospaced typefaces for coding because they ensure maximum readability of the source code. 

Examples: Courier, Lucida Console, Menlo, Monaco, Consolas, Inconsolata, and Source Code Pro.

Fonts: Roboto Mono, Courier, PT Mono, Source Code Pro

Display

Display typefaces are another rather peculiar subcategory within the vast typography classification. Why peculiar, you might ask? The Display contains typefaces with qualities of any of the previously mentioned classifications. What characterizes them is the fact that they have been designed for large headings and short messages rather than for elaborated passages of body text. 

They are often highly stylized, but they don’t have to be. Walter Tracy defined Display typefaces as “sizes of type over 14 points” in metal type, and declared that in design, “text types when enlarged can be used for headings, display types, if reduced, cannot be used for text setting.”

Examples: Cochin, Shoreditch

Fonts: SF Pro Display, Titan One, Bebas Neue, Cinzel Deco

Decorative 

Decorative typefaces in typography classification mean witty and unusual typeface styles. These typefaces are usually almost illegible, so you should never use them for a larger body of text. But, when used correctly, they can help you achieve a very authentic and original look.

Examples: ITC Curlz, ITC Rennie Mackintosh, and ITC Beesknees.

Fonts: Rosewood STD, Creepster Caps, Rammeto One, Ribeye Marrow, Unical Antiqua, Bangers

Summary

This is it – a complete guide to typography classification.

Even though it might seem complicated, with some practice, you’ll learn how to recognize these indicators and use them in your favor. 

But this is not where the story ends. You can learn more about typography in general in our

Ultimate UI Typography Video Course, specifically created to hone your typography skills. 

Guided by a supportive and highly proficient hand, you’ll learn how to overcome typography issues, diminish redundant work, and discover new ways to use typefaces to create beautiful UI designs.

For wholesome and educational content inspired by the world of product design, follow us on Instagram, and for more free educational resources, visit our blog.

Happy designing! 🤗

The Ultimate UI Typography Masterclass

Master the most fundamental UI design skill and elevate your designs forever

Make your designs from average to stunning by enrolling in this engaging, practical, and all-inclusive video course. It’s time to learn all the secrets, feel confident in your design decisions, and become the design professional you always wanted to be!

You might like the following
Blog Articles