All About Fonts

Fonts! They can really add personality and flair to your design, but knowing how to pair fonts (and when to use them sparingly) takes a little bit of design know-how. There are some hard and fast design “rules” but there’s also room for your own intuition and style when deciding which fonts to use for your next design project.

To Serif or Not to Serif

There are two basic types of fonts: serif fonts and sans-serif fonts. Here’s a quick explanation of the two basic types from Wikipedia:

In typography, a serif/ˈsɛərəf/ is a small line attached to the end of a stroke in a letter or symbol.^[1] A typeface with serifs is called a serif typeface (or serifed typeface). A typeface without serifs is called sans-serif or sans serif, from the French sans, meaning “without”.

In layman’s terms, a serif font has a little “swoop” to its letters while a sans-serif font doesn’t. (Someone once told me that a serif font looks like it has “little feet.” I like that analogy!)

Here’s an example of each:

This is a serif font. Notice those little feet on this font.

This is a sans-serif font. It’s clean and straight with no curves or added elements.

Oh You’re Fancy, Huh?

Of course not all fonts fit neatly into these two basic categories. A third category of fonts are often called “script” fonts but we’ll refer to them as “fancy” fonts because they don’t always have a script-like look. Fancy fonts might look like actual handwriting or calligraphy, for example. They might incorporate texture or graphics within each letter. The fancy fonts usually show personality in a more up front or in-your-face way than a serif or sans-serif font.

Here are some examples of fancy fonts:

Which fonts should I use?

Well, it all comes down to what you’re saying to your audience and how you want to convey your message. If you want to be playful and conversational, a swirly font that has movement will evoke that emotion more than a straight-edged, no frills, conservative font. The right font will project the personality of the piece you’re designing.

You also want to make sure that your font is aligned with your branding. For instance, if a law firm’s logo looks like this:

You don’t want to have titles that look like this:

Let’s be honest; would you hire an attorney who uses a heart to dot their “i’s”?!

There are also certain fonts that are no-nos in the design community and we’re happy to let you into the loop. We care about you too much to let you use comic sans or papyrus in your logo or even in your next email. These fonts have been around forever. They come installed in the standard list of fonts on your computer and they certainly do show “personality” at first glance so they may seem like a good choice as you scroll through the list. But we have to tell you, they’re overused and a bit childish looking and so we advise that you move along down the font list, skipping right over those.

Make Sure It’s Readable

There are literally thousands of fonts to choose from, but not all of them have the “readability factor.” Test the font by using it in a full paragraph, in a headline, and in different font sizes and make sure it’s legible. Some fonts look great as a headline but when delivered in a smaller size with a lot of text, they become illegible. With readability in mind, consider using a sans serif for your body text on the web and a serif for your body text in print.

Three’s a Crowd – Pair Sparingly

With the plethora of fonts available, it’s super easy to get carried away. How many fonts “should” you use? This is where some design principles come into play. Most designers will say that two perfectly paired fonts are all that you need and any more than that is not only overkill, but it can make it difficult for your reader to know where to focus.

A general rule of thumb is to use one font for your main headings and items that you want to stand out with another font for the main body copy. Pairing a nice serif font with a clean sans serif font works well. Or, choose a fancy font and pair it with a classic and readable serif or sans serif.

Consider the type of fonts that you’re combining. One fun font used as a headline can be impactful and convey the right mood, but your message will get lost if you use too many fun fonts (and it will make your reader dizzy!)

Use Web Safe Fonts

It’s always best practice to be consistent with your branding. If you’re designing a logo and you know you will also have an online presence – whether with a website or other social media platform – using a font that is web safe will ensure that your branding is consistent across all platforms.

What do we mean by “web safe”? Unless you’re using fonts that are loaded on your web server, a browser (like Chrome or Safari) may display a different font than the one that you wanted. Not all fonts can be loaded onto your web server. More and more WordPress themes are including Google Fonts as a standard option.

Google Fonts are all web safe, meaning that they have a better chance of showing up correctly when a visitor is viewing your page from their web browser.

Here is a link to a complete list of all Google Fonts:  fonts.google.com

Another great resource for free fonts that are also web safe is Font Squirrel. You can even use their font generator to create a web safe version of your font if you don’t have one.  They will walk you through the steps on how to use the @font-face rule to add these fonts to your web server.

An additional resource is through Adobe’s Typekit. We use Adobe Typekit fonts quite a bit when we’re designing because we can use them in Illustrator (our main design platform) as well as WordPress. It’s the best of both worlds! However, do keep in mind that you can’t download and install fonts from Adobes’ Typekit the same way you do from most other websites. Adobe allows you to “sync” the fonts and if your subscription with Adobe ends, so does your access to your synced font. Always weigh those pros and cons.

Free isn’t always best when it comes to fonts (or haircuts… right?!). Some of our favorite websites to purchase fonts include Creative Market, Design Cuts, and the Hungry JPEG. You can purchase individual fonts that usually range from about $5 to $20 per font. One of our favorite features of these sites are the font “bundles” that they offer at super affordable prices. Scoring 20 fonts for about $20 is a designer’s dream! Proceed with caution, though. Collecting fonts can be quite addicting! If you’re still set on the free factor, sign up on any of these websites to receive weekly freebies (fonts, stock images, other fun design resources) via email.

Until next time!

(and Molly!!)