Virtually all designers, from brand designers to UI designers to dedicated typography designers, can benefit from expanding their knowledge of typography and the classification of typefaces. Possibly with the exception of color, the typeface styles used in a design have a greater impact on the way a user perceives that design than virtually any other individual design element.
Great typography can elevate a design from “good” to “amazing,” while bad typography (or worse — illegible type) can make even the “best” designs unusable. Taking time to learn about typographical elements can help any designer improve their craft and create superior finished projects.
Typography Basics
There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display.
As a general rule, serif and sans serif typefaces are used for either body copy or headlines (including titles, logos, etc.), while script and display typefaces are only used for headlines. Monospaced typefaces are generally used for displaying code, though they can also be used for body and headline copy, and were originally used on typewriters.
Not all serif and sans serif typefaces are equally suitable for both body and headline copy. Different typefaces are more legible than others at small sizes, while others are more suitable for larger type. (This kind of information can generally be found in the commercial descriptions of the various fonts.)
History of Typeface Styles
The oldest typefaces were called blackletter, and date back to the 1400s. These early typefaces were reminiscent of handwritten calligraphy.
After blackletter came the first serif typefaces. Serifs include slight projections that finish off the strokes of their letterforms (called serifs, where the style gets its name). Emerging in the 1500s, the first serifs were Old Style serifs. This style includes Garamond and Goudy Old Style.
The successors to the Old Style serifs were called Transitional serifs, which made their first appearance in the 1700s. These typefaces had high stroke contrast and were more upright than their Old Style predecessors.
The natural evolution of the trends present in Transitional serif typefaces became known as the Modern serifs during the 1800s. These Modern serifs include fonts like Didot and Bodoni. They have extreme contrast between strokes and no brackets on their serifs.
Slab serifs are the final evolution of the serif style. With the advent of mechanization (e.g the Steam Press, 1814), and other important innovations in printing technology, as well as a new wave in advertising with advertisers reaching for a bold type that really asserted its presence, they were designed in part to withstand much more industrial printing processes. They have little contrast between strokes and most are unbracketed. Slab serif typefaces include Rockwell and Clarendon, among others. They’re sometimes thought of as typewriter fonts but were used much more extensively throughout the 20th century.
While serifs were the first typefaces to evolve after the original blackletters, sans serif typefaces largely came on to the design scene in the early 20th century. These early sans serif typefaces were called grotesque or gothic fonts and included typefaces like Franklin Gothic. They were called “grotesque” due to their rejection of the more “elegant” serif design elements.
Later in the 1900s, after the Grotesques came to the Neo-Grotesque sans serif typefaces. These typefaces were designed to be more legible than their earlier counterparts and generally have much plainer designs. Helvetica and Arial are both examples of Neo-Grotesque sans serifs.
Rounding out the sans serif typefaces are the Geometric and Humanistic styles. Geometric sans serifs, like the Modern serifs, took the style to the edge. They have letterforms based on simple geometric shapes — most notably the circular ‘O’ shapes — and are very modern. Their ultra-modern shapes do sacrifice legibility at smaller sizes, however. Futura is the most notable Geometric sans serif.
Humanistic sans serifs sought to retain some of the influence that natural handwriting had on the letterforms of earlier typefaces. The letterforms are made more approachable through features like variable stroke widths. Gill Sans is one of the more popular sans serif typefaces.
Other typeface styles — script and display — are harder to classify along a timeline. Blackletter is technically a script typeface, while new scripts are being developed all the time. The same goes for display fonts: they’ve been around almost as long as movable type itself.
While the time periods in which they were designed can go a long way toward helping to identify different typefaces. Since different styles can evoke different feelings in a project (formal or casual, traditional or modern, etc.), knowing the specific characteristics that set these styles apart from one another is valuable knowledge for a designer. The typography infographic below includes information on how to tell each style apart.
• • •
Further reading on the Toptal Design Blog:
- Typeface Styles for Web and Print Design
- Things You Might Not Know About Typography in Sketch
- Skeuomorphism, Flat Design, and the Rise of Type Design
- How to Create Custom Fonts: 7 Steps and 3 Case Studies
- Tutorial: How To Create A Custom Icon Webfont
Understanding the basics
The most important purpose of web typography is to make it easy for users to read the text information being presented. Different typefaces are more or less legible, making typeface selection or paramount importance. Other purposes include brand reinforcement, increased engagement, and improved user experience.
Web typography is, simply put, the way fonts are used in website designs. Typography on the web has evolved from only including a handful of “web safe” fonts to allowing designers to use virtually any properly-licensed font in their web designs.
Web typography is used to make it easy for users to read text information being presented. Different typefaces are more or less legible, making typeface selection or paramount importance. Other uses include brand reinforcement, increased engagement, and improved user experience.
Historically, a typeface included multiple fonts from the same family, while a font was a specific weight and size type within that family. In modern typography terminology, the terms font and typeface are often used interchangeably.
Typography is the art and practice of creating and arranging type. It includes creating typefaces as well as implementing those typefaces within a design. Typography is important because it helps readers absorb and interpret text-based information.