Finding the Best Fonts for Your Website

 
 
Screenshot from Jason Santa Maria’s Web Typography Class on Skillshare

Screenshot from Jason Santa Maria’s Web Typography Class on Skillshare

Typography is kind of magical. It’s the thing that gives voice to words. Language comes alive because of typography, it’s not just what is written but the form that it takes. It’s been said that it’s the clothes that words wear.
— Jason Santa Maria

Disclaimer: this post contains affiliate links

It’s time for another installment of “What Kadie’s Learning on Skillshare” and I’m so excited to share a class I took about the fundamentals of web typography. As I’m sure you know, I am a lover of type and nothing makes me happier than a solid layout design.

I was so excited to find that Jason Santa Maria had a course on web typography, as it tends to be a different process than selecting type for print projects. Jason is the design director at Slate, a digital media platform. And in this day and age, digital media is becoming more and more important. As a design blogger, I spend so much time putting together content and ideas, and I want those thoughts to be presented in a beautiful and intentional way. I love how Jason describes type as the clothes that words wear - something that gives life to language.

So today, I want to share some fundamentals to keep in mind when choosing fonts for your website, email newsletter, or digital magazine.

Become a Skillshare Student

Understand that web is a variable medium.

Your website is going to change and respond based on the devise someone is using to view it. For print, you’re in complete control of scale and the way someone interacts with the type in a consistent way. You don’t really have that luxury with web, which means there are some legibility and readability rules you need to follow.

Legibility:

can someone read it -

  • Is the spacing right to make the words appear as if they go together? What about the space between lines of type?

  • Is the size large enough to read from the distance between the viewer and their device?

  • Does the color give enough contrast with the background to be visible?

Readability:

does someone want to read it.

  • Is the font appropriate to the content?

  • Does it match the tone and personality of the brand?

  • Does the font distract from what the words are saying?

Start with descriptive adjectives.

When thinking about which fonts to use on your website, coming up with some adjectives to describe the personality and tone of your brand is very important. Type can be open, standoffish, strong, brash, soft, and gentle. Setting your words to the wrong tone of type can make for a very confusing experience! Good typography doesn’t call attention to itself - it lets the language speak. So you’re aiming for something that compliments your message, rather than distracts from it.

Literary
Intelligent
Sophisticated
Fashionable
Bold
Aggressive

Playful
Whimsical
Feminine
Masculine
Mature
Childish

Elegant
Gentle
Serious
Soft
Trendy
Classic

Approachable
Authoritative
Humorous
Informative
Witty
Prestigious

 

Typeface vs Fonts vs Lettering

A typeface is to a song as a a font is to an MP3.
— Nick Sherman

Understanding these differences won’t necessarily impact the fonts you choose, but it’s helpful to know the language when working with a designer, or searching for type online.

A typeface is the work of art that a type designer produces. So think of this as the original painting. When that typeface becomes available on your computer, it’s a font. So think of fonts as framed prints.

Lettering is meant to be illustrative, and typefaces are meant to be consistent. The goal of choosing fonts for your website is to make it easy and comfortable to read what you have to say! Custom lettering could be used to make advertisements on your website or a special headline, but they’re not meant to be used throughout a web page - lettering is typically designed with a single purpose in mind.

Get to know the genres of typography.

Type is a great lesson in art history, and the styles can vary like architectural trends. Understanding a bit about each genre of type can help you identify which style is most appropriate to the personality of your brand (go back and review those descriptive adjectives!) Not sure what I mean when I talk about type styles? Check out this post!

If you’re interested in learning more about the anatomy of type or want to see visual examples of each genre, I definitely recommend watching the Fundamentals of Web Typography course!

Font size and contrast are very important.

Typefaces with a lot of contrast can be hard to read in small sizes, so look for a font for your body copy that’s easy to read in a smaller size. For body copy, make sure there’s low contrast and a taller x-height to make it easier for the eye to navigate through a paragraph of text.

X-height:

the height of a lowercase letter in relation to a capital letter (extremely simplified definition!)

With your headlines, make sure you have some variety between headline sizes and use. For instance, I have two large headline styles, and one headline style that works as a subhead - meaning it’s nearly the same size as my body copy but in a different style to help categorize information on my website. Being intentional with headlines and body copy will help with creating hierarchy on your website. Hierarchy is important because most viewers aren’t going to read every word on your website - make it easy for them to skim!

Contrast is also important when choosing two fonts to pair on your website. There needs to be some variety in the style so that they compliment and play off of each other. So pairing a narrow and wide font, or a serif and san serif, or a light and bold will help add visual interest to the words on your site.

Find inspiration for fonts on Pinterest.

Pinterest is a great outlet to find inspiration for fonts. Typography is an art form, and there are endless examples of pairing fonts and customizing type available right in your Pinterest search engine. If you’re not sure where to start, I really love these typography boards:


NOT SURE WHERE TO START?

Here are some of my favorite fonts available on Squarespace: