Web Typography 101: 6 Basic Terms and Concepts

Common Typography Terms To Help Your Better Discuss Type Design

Game tile letters
Game tile letters.

If you’ve ever had a discussion with a designer about typography, you probably heard a number of terms that were unfamiliar to you. Unless you are a design professional or a typography enthusiast of some kind, the terms and concepts of type design are unlikely to be things you encounter with any frequency, but there is value in understanding these basic concepts. If you are not a design professional, than an understanding of these common terms will help you better communicate with those who are.

If you are a designer, than these basic typography terms and concepts will be expected to be a part of your professional vocabulary.

Font / Typeface  

These two terms are often used interchangeably, but there is a distinction between them. A “typeface” is the term given to an entire type family. A “font” is the digital file that contains one of the various versions of a given typeface.

Let’s take one of my favorite typefaces, Raleway, as an example. The Raleway typeface comes in 9 different weights, ranging from thin to ultra-bold. All of these versions together make up the Raleway typeface, but each individual weight is a separate font, requiring a separate digital file.

Serif / Sans-Serif

Typefaces come in a variety of classifications. Two of the most common classifications are serif typefaces and sans-serif typefaces.

Serif typefaces include Times New Roman, Georgia, Palatino, and many others.

These typefaces all include lines attached to the ends of the letterforms. These lines are called “serifs” and they add a little extra flourish to these typefaces.

Typefaces that do not include these extra lines are called “sans-serifs”, which means “without serifs.” Typefaces like Arial, Helvetica, and Verdana are all example of sans-serifs.

While there are a number of other classifications (cursive, display, slab serif, etc.), serif and sans-serif are the two that you will most commonly run into.

Leading / Line Height

Leading is a term that comes from the days of typesetting by hand. Back then, strips of lead were inserted between lines of type to increase the vertical distance between those lines.

While there are obviously no strips of lead being used in digital typography, this terms remains in use today to describe that vertical space between lines of text. When it comes to web design, leading is typically achieved through the use of the “line-height” CSS property.

Kerning

The distance between the individual letters of a font can be adjusted using a process called kerning. While digital font files today are all automatically kerned, there are times where a designer may wish to adjust this spacing to achieve a specific design treatment.

On websites, individual letters in given words cannot easily be kerned with just CSS properties. Instead, something like the jQuery plugin, Lettering.js, would need to be used to achieve these styles.

Weight

A font’s weight specifies the thickness or boldness of that font. Some typefaces only include a single weight while others may come with a variety of weights.

In web design, a font’s weight can be adjusted using the “font-weight” CSS property.

@font-face / Web Safe Fonts

For many years, web designers were limited in the different fonts that they could reliably use on websites. “Web safe fonts” was the name given to font files that were all but guaranteed to be installed on a person’s computer. Since websites drew their fonts from the files on that person’s computer, choices like Times New Roman, Georgia, Arial, and Verdana could be used on a site pretty much without fail.

In recent years, web typography has expanded greatly through the use of @font-face (pronounced “at font face). This process allows a site to link to an external font file that is either included with the rest of the site’s resources (images, scripts, etc.) or hosted by a 3rd party provider like Google Fonts or Typekit.

The website will download and use these external font files instead of loading them directly from the user’s computer, which opens up a whole world of new choices beyond those traditional web-safe fonts.

In Closing

Typography is an art that design professionals spend years working to master. While this article just scratches the surface with some of the common typography terms you are likely to hear when speaking to a designer, these concepts will get you started having better conversations about typographic design.

Edited by Jeremy Girard on 1/26/17