Familiarizing yourself with the typeface versus font distinction helps avoid misusing these terms. People often use them interchangeably, but there are critical differences between the two.
Arial, Helvetica, Courier New: Are they fonts or typefaces? If you ask a typographer and a developer this question, they’ll most likely give you different answers. To untangle the meanings of “font” and “typeface,” we must closely examine how professionals in relevant fields use them.
Web designers straddle the worlds of graphic design and computing, so understanding how professionals from both worlds understand the difference between a typeface and a font opens the door to more effective website design and development.
What is a typeface?
A typeface is a collection of characters that share distinctive design features, such as specific patterns in their shape, width, spacing, height, angles, or serifs. It’s an umbrella term that includes all the different typeface varieties. The Garamond typeface, for example, has italic, bold, and semibold versions.
Each typeface has a unifying concept or design goal — designers who create a typeface for body text aim to maximize legibility. When designing a typeface for headings, they focus more on conveying a particular feeling or impression than optimizing readability because headings add visual interest and capture attention.
Take two examples: Courier and Sophia. The Courier typeface dates back to the mid-1950s when manual typewriters were standard in every office. To make the typed text line up nicely, Howard “Bud” Kettler, the designer of Courier, made it monospaced — every character has the same width.
The Courier typeface ultimately served other goals, too. After typewriters fell into disuse, monospaced typefaces became popular with programmers who wanted characters to align perfectly. Now, Courier is the industry standard for screenplays: One page of a script in 12-point, 10-pitch Courier equates to about a minute of screen time, a benchmark that helps film directors create an estimated shooting schedule and budget.
In contrast, the Sophia typeface, designed by Emily Spadoni, is meant for headings rather than body text, so legibility wasn’t a top priority. To mimic handwriting, Emily created letters with different widths that float around the baseline. With a decorative purpose in mind, she also created alternate glyphs with extra curls for characters that fall at the start and end of the segment.
Serif typefaces
The first typefaces designed for the printing press had serifs, or small decorative lines or strokes, added to the ends of characters. Serifs aim to increase legibility, especially in print and at smaller sizes, though it’s unclear whether they make a significant difference in practice. Because of their historical association with books, serif typefaces communicate trustworthiness, authority, and formality.
Serif typefaces come in a few different styles. Old-style typefaces, like Times New Roman, have bracketed serifs with a gradual transition between the serif and the character. Didone typefaces, like Bodoni, have characteristically thin and unbracketed serifs that contrast with the heavy vertical strokes of the characters. And slab serif typefaces, like Rockwell, have thick, unbracketed serifs.
Sans-serif typefaces
The first typefaces without (sans) serifs emerged in printing in the early 1800s, but sans-serifs weren’t popular in body text until around the 1950s. In the early stages of sans-serifs, they were all bold and condensed uppercase letters that many people considered ugly or malformed — that’s why when you see typeface names like “gothic” or “grotesque,” you know they’ll be sans-serifs.
Display typefaces
Typeface designers develop display typefaces for logos, headings, and other eye-catching text elements. These decorative typefaces aim to capture the look and feel of the brand they’re working with.
Wall-scrawl typeface Another Tag, script typeface Baguet Script, and all-caps typeface Nosifer are examples of display fonts. When used sparingly, these typefaces impart a distinctive look to designs that give them a unique visual impact. For example, integrating a graffiti typeface can lend a street-art aesthetic to urban-themed designs.
Typefaces designed for accessibility
Typefaces that are difficult to read (like many display varieties) can pose barriers to accessibility. Most experts recommend using common typefaces like Arial, Helvetica, Times New Roman, and Verdana to maximize accessibility. However, designers are now creating many new typeface options with accessibility in mind.
Atkinson Hyperlegible, Lexend, and OpenDyslexic are typefaces striving to improve accessibility.
The creators of Atkinson Hyperlegible designed it specifically for people with visual impairments, incorporating features such as increased spacing between letters, exaggerated letterforms, and selective serifs. For example, the serifs are visible on the “i” and “l,” but not the other letters.
Lexend comes in several versions with different degrees of spacing between the characters and was designed to help struggling readers. And the OpenDyslexic letterforms have a gravity effect that prevents dyslexic readers’ brains from mentally flipping around the letters.
So we know that typefaces are families of characters with a unifying design concept that might include legibility, decoration, and accessibility. Now let’s talk about fonts.
Build visually, publish instantly, and scale safely and quickly — without writing a line of code. All with Webflow's website experience platform.
Build visually, publish instantly, and scale safely and quickly — without writing a line of code. All with Webflow's website experience platform.
What is a font?
The word “font” has two different meanings. In typography and graphic design, a font is a specific size and style of a typeface. In computing, it’s a type of digital file. Understanding where these definitions come from will help you keep them straight.
Fonts in typography and graphic design
For typographers, a typeface is a family of different sized and weighted fonts. For example, Congenial is a typeface, while Congenial Medium 34 point is a font. Typefaces are often called type families or font families.
To understand this terminology, it helps to think back to manual typesetting. Typesetters couldn’t scale up the size of letters with the click of a button as we can today. Instead, they had to swap out one set of letters for another larger or smaller than the original. And they had to do a similar swap when changing from regular to bold or italic.
The word “font” is based on the French word “fonte,” meaning “casting,” because type founders cast each set of letters from melted metal. Manual typesetting also gave us the words “uppercase” and “lowercase”: Typesetters kept the uppercase and lowercase letters in separate wooden cases, usually storing the capital letters in the upper case, or the one above the case containing regular letters.
Fonts in computing
In computing, a font is a file that holds the data required to represent the typeface on a screen or in desktop publishing. If you download a font and store it locally, it’s usually an OTF or a TTF file.
If you’re a web designer, downloaded font files aren’t all that useful. You might download a beautiful display font to your device, but if your users haven’t downloaded the same font, it won’t show up for them.
Instead, you have two choices. You can work with web safe fonts installed by default on most devices, like Arial, Georgia, Impact, and Times New Roman. Or you can use a web font — one hosted on the web, either on your site or a third-party hosting service like Google Fonts or Adobe Fonts. Web fonts are usually in WOFF or WOFF2 format.
If you use a web font, check the foundry or service’s licensing conditions. Some web font licenses vary in price according to the number of page views (as each visitor to your page is accessing the font individually). Other web font licenses don’t have page view restrictions, but they restrict the domain type or only apply for a set amount of time. When using third-party services, always read the conditions and tell clients if using a particular font means they’ll have to purchase a license.
Some fonts go beyond preset regular, bold, and italic letter shapes. Variable fonts allow almost complete flexibility in weight, width, slant, and other features. That means you can create your glyphs as bold, italic, or both.
Using fonts and typefaces in your designs
While knowing the precise meanings of font and typeface won’t necessarily affect your web and graphic designs, it can help you work more effectively with people in different technical fields.
To check out other designers’ typographic design choices, browse our list of the 11 most popular fonts for web design. If you’re feeling inspired, you could even design your own typeface — all you need is a font generator and a great design concept.
