Whether you’re a seasoned web designer, a budding digital artist, or a design client needing clarification about design lingo, understanding font styles and combinations is crucial. In this quick guide, we’ll explore the differences between typefaces and fonts, the main classes, and the art of pairing them.
Understanding Typeface vs. Font
Though sometimes used interchangeably, there is a clear distinction between a typeface and a font in typography. A typeface refers to a family of characters sharing uniform design characteristics. A font refers to a subset of those characters. For example, Times New Roman is a typeface, but Times New Roman Italics is a specific font within that family.
Styles of Type
While there are subcategories of styles under these, we will focus on four primary font classes in this post.
Serif: Timeless Typography
Serif types all include short extensions at the end of some of their strokes, known as “serifs.” In general, serif fonts provide a classic, sophisticated feel to a design. Traditionally associated with print, serif font families are excellent for body text in books, magazines, and newspapers. While praised for readability in a print format, they can pose an issue in web design.
Examples: Times New Roman, Garamond, Baskerville, Georgia, or Playfair Display
Sans-Serif: Modern Minimalist
Sans-serif types DO NOT include serifs. These type families are associated with a modern, clean, and minimalist aesthetic. These types are versatile and widely used in both digital and print mediums. They are much easier to read on screens, making them an excellent choice for websites and mobile apps.
Examples: Helvetica, Arial, Roboto, Futura, Open Sans
Script: Flexible Flair
Calligraphy and scribal lettering directly influenced script style types. These typefaces are flexible and can impart diverse feelings to a design, from a warm, personal touch to a sense of elegance and artistry. They can be hard to read and should be reserved for headings, logos, or unique accents.
Examples: Brush Script, Lobster, Pacifico, Great Vibes, Allura.
Display: Heavy Hitters
Use these quirky and heavily-styled types for headings or concise text.
Examples: Bebas Neue, Abril Fatface, Cooper Black, Anton
Combining Fonts
In general, serif fonts combine well with sans-serif. Try using one for headings and the other for body text. The complexity of script and display fonts pair well with simple serif or sans-serif fonts.
Outside of that, I like pairing high-contrast typefaces with low-contrast typefaces, like Bodoni and Futura, or wider types with narrower types, like Oswald and Montserrat. You can also keep it simple and pair two fonts from the same typeface, like extra-bold and light. My rule of thumb when combining fonts is contrast.
Typeface & Font Resources
Here are some great places to find both trending fonts and font resources.
Find Trending Fonts
Find Fonts Recommendations and Inspiration
For further refining your type, check out Clean Up Your Type: A Quick Guide to Leading, Kerning, & Tracking.