Complete Guide to Typeface, Typography, and Font

Good web typography and typographical hierarchy are invisible.

Zight | December 07, 2019 | 8 min read time

Article Last Updated: May 05, 2023

Complete Guide to Typeface, Typography, and Font

Good web typography, like good design, is invisible. With the exception of color, the typeface styles you choose in a design will have the greatest impact on the way a user perceives the design. Whether you’re a seasoned designer with a strong background in web typography, or just starting out, expanding your knowledge on typeface classification and web typography can help you elevate your design from good to outstanding.

While practicing and experimenting with typeface classification, typographic hierarchy and font is an exceptional way to truly hone your skill, there are a number of guidelines designers can benefit from before striking out on their own. Take a look at the following guide to typeface, typography, and font so you make well-informed design decisions that result in stellar designs.

 

Typeface vs Typography

Web typography is intended to make it easier for users to read text that is presented. It’s similar to print design but takes into consideration all screen types to ensure user-friendly legibility. The crux of effective web typography is ensuring readers effectively absorb and interpret text-based information. Over the years, it has evolved from a select few “web-friendly” fonts to endless options that allow designers to use virtually any properly-licensed font in their web designs. Think of typography as an art and practice in creating and arranging type. Under the umbrella of typography includes creating typefaces and implementing those typefaces into a design.

Ultimately, web typography can be boiled down to the way fonts are used in website designs. Depending on the typeface you choose, it will either make the text less or more legible. This is exactly why typeface selection is paramount in the world of design. When talking about typeface vs typography, it’s important to recognize their influence on brand reinforcement, increased engagement, and improvements for user experience. Typeface, size, color, height, weight, and shape are just a few of the essential factors within typography that require careful consideration when achieving the most pleasant reading experience.

 

Typeface vs Font

The terms typeface vs font come from the days of analog printing when every character required a metal block that came in a variety of different sizes, weights, and so forth. Typeface is defined as a particular design of type. So, if you choose to design something in Garamond, that would be the typeface. A font, on the other hand, describes a subset of blocks within the Garamond typeface. Bolded Garamond in 12 point would be considered a different font than italicized Garamond in 8 point. However, they are both within the same typeface. So when discussing typeface vs font, this is the subtle distinction and where it originates. In recent typography terminology, the terms font and typeface are typically used interchangeably.

The oldest typefaces were called blackletter. Blackletter typefaces date back to the 1400s, and are reminiscent of handwritten calligraphy.

 

Typeface Classification

Several popular newspaper titles, such as The New York Times logo, were designed as a throwback to blackletter typeface. Today, the most common typeface classifications are by technical style and the typeface classification is typically broken down into the following 5:

  1. Serif
  2. Sans serif
  3. Script
  4. Monospaced
  5. Display

1. Serif

After blackletter, the first serif typefaces were introduced. Serifs, or serif typefaces, get its name from its style. It is categorized by the small lines that are attached to the main strokes of characters within the face or the slight projections that finish off the strokes of their letterforms.

Serif typefaces are most commonly used for both body text and headlines online. The readability of serifs online is widely debated, so some designers prefer not to use serifs for large blocks of copy. This style includes Garamond and Goudy Old Style. Within serif typeface, there are several sub-types.

2. Sans serif

Sans serif typefaces are a more modern version of serif that came on to the design scene in the early 20th century as a rejection of the more “elegant” serif design elements. Sans-serif typefaces get their name from the lack of serif details on characters, and are considered more modern in appearance than serifs. Much like serif, sans serif has several sub-types. The most common 4 typeface classification for sans serif are grotesque, neo-grotesque, humanist and geometric.

3. Script

Script is a bit harder to classify along a timeline than some of the other typefaces. Blackletter is technically a script typeface, but new scripts are constantly being introduced and developed. Scripts are intended to represent handwriting, and thus, offer very fluid letterforms. The two basic classifications for script are formal and casual.

Formal scripts are reminiscent of 17th and 18th-century handwritten letterforms, and some formal scripts are even directly modeled on handwriting masters like George Snell and George Bickham. Script typefaces are typically used for very elegant and elevated typographical designs, and are legible and user-friendly for body copy.

Casual scripts also resemble handwriting, but are reminiscent of more modern handwriting, dating back to the mid-twentieth century. The name implies the obvious – that they are in fact, less formal than formal script. Causal script can be defined by the stronger strokes and having a more brush-like appearance. Casual scripts include Mistral and Brush Script.

4. Monospaced

Monospaced typefaces are generally used for displaying code, but they can be a great choice for designers looking for a minimalistic design. They were originally used on typewriters, and are ideal for body and headline copy.

5. Display

Display typefaces are defined by its more eccentric and variable designs than some of the more simple, and relatively restrained typefaces that are generally used for body text. Its eccentric and variable characteristics make it best suited at large sizes for headlines, and it is typically not used for extended passages of body text. Display is another typeface that is a bit harder to classify along a timeline than some of the other typefaces discussed above.‍

 

What is Typographic Hierarchy?

Now that you’ve got the 411 on typeface vs typography, and typeface vs font, you might be wondering what is a typographic hierarchy, and why does it matter? It’s not unusual for designers to underestimate the necessity of using a hierarchy of typography is key to your success. When reviewing examples of typographic hierarchy, it doesn’t take long to understand exactly why it’s essential, and the importance of creating an effective typographic hierarchy.

When creating a typographic hierarchy, it’s important to first establish how many levels of hierarchy a design should have. As a general rule, every design should include three levels of hierarchy: heading, subheading, and body text. Beyond this general rule, it’s up to the designer to add additional levels, if necessary. Additional levels include captions, additional subheadings, pull quotes, and meta information to credit authors or to date an article.

There are a variety of elements that work together to create a typographic hierarchy on the web, including:

  1. Size
  2. Weight
  3. Color
  4. Contrast
  5. Case
  6. Position and alignment

1. Size

Generally, size is the first thing a new designer will try when implementing a typographic hierarchy into their design. It makes sense, as size is the most obvious differentiator and is immediately identifiable by readers. It follows the clear rule that bigger text means more important, while smaller text means less important.

It’s essential to keep in mind that traditional typographic scales, which range from 6 to 72, exist as a starting point for designers. Rather than merely relying on size, designers should explore other elements of the typography hierarchy, such as different weights and styles. In the beginning, it’s not unusual for a designer to base their scale on the size of the body text and expand from there. As we will see with the other elements, size can become a crutch when there are alternative options to create a typographic hierarchy.

2. Weight

The weight of a particular font is defined by how thick or thin the character outline is in relation to their height. Making a typeface bolder or lighter is another easily recognizable way to create a typography hierarchy that’s immediately identifiable by both designers and their readers. Most typefaces will come in a variety of weights, from ultra-light to extra-bold. Most typefaces average about four to six weights, and some typefaces even come in as many as a dozen.

3. Color

In the world of design and branding, the psychology of color is a powerful tool. Humans are visual creatures, which is exactly why it’s beneficial to utilize color well. Choosing the appropriate color or colors is vital to your success, as it impacts what a potential user sees, how they feel, and it directly influences their decision. Choosing the right color will evoke a positive reaction, but a poor color choice can negatively impact your success. Getting it wrong may mean a superb product or design is dismissed or ignored.

However, it’s not unusual for color to be overlooked when creating a hierarchy, and it shouldn’t be! Color is a fantastic option because of the psychology around it. Implementing lighter or darker shades is a subtle, but effective way to create a more distinct typographic hierarchy.

4. Contrast

Contrasting colors, different type sizes, weights, and styles are effective ways to create a typographic hierarchy. Contrasting in itself is quite subtle, so a small difference in size Consider using easily distinguishable sizes, weights, color shades, and styles to easily create identifiable contrast between elements such as headers or body text. Creating more contrast between type and the background can also be an effective way to achieve a typographic hierarchy.

5. Case

Case refers to uppercase and lowercase letters. While capitalizing body text is generally not recommended from a readability perspective, using uppercase characters in headings or subheadings can help differentiate headings and other type.

6. Position and alignment

Using positioning and alignment to make certain headings, subheadings, or other type stand out can have a great impact on where type falls within a hierarchy. Centering type, for instance, tends to draw the reader’s eye to it and signal its importance within a typographical hierarchy. Similarly, type that is outside of the regular margins of a page will also stand out within the typographical hierarchy.

 

Typography Anatomy

You may now recognize that each character we use to construct our written languages has its own set of anatomical features. Typography anatomy can be defined in a number of ways, including typeface classifications, or used to implement more effective web typography or typographical hierarchy. Considering the intricacies of letterform composition, it will undoubtedly come as a surprise that a strong understanding of typeface vs typography will provide you with access to more solutions when solving a range of visual design problems. When a client gives feedback on lettering details, you will be better equipped to diagnose the issue, and explain your reasoning.

 

Testing your Web Typography

Testing is intended to find out if your design or product is successful. It’s all about trial and error, which means it’s an ongoing process that may need revising. The best way to learn how your audience will respond to your design is with thoughtful A/B tests. A/B tests provide the perfect opportunity to determine which design generates the most leads, traffic in your content, or evoke the emotion intended with your design.

Instantly testing your design with others and getting invaluable insight based on direct input and real user interaction with Zight (formerly CloudApp). Comparing slightly tweaked variations is one of the best ways to design the most optimal form and get concrete data on which variation attracts more customers. Simple changes can help you analyze different results and optimize accordingly.

Create & share screenshots, screen recordings, and GIFs with Zight