Fonts: The Hidden Secrets You Didn’t Know You Wanted To Know
Our Favorite Four Letter F-Word
Not what you were expecting?
Believe it or not, fonts are a very important part of branding: they contribute to the success or failure of advertisements, and there IS a correct way to use them.
Fonts are pretty much like the Swiss Army Knife of your toolkit--they have multiple functions, and although you might not use all of them, the options are endless. Misusing fonts can also create confusing visual spaces that turn potential customers away. To prevent amateur mistakes, check out our favorite fonty tips, compiled below.
In our last few blog posts about design tips, we discussed the importance of creating a visual hierarchy in web design. (If you haven’t read those tips yet, you can check them out here.) Fonts can also be a useful tool in establishing a hierarchy. Think of a newspaper:
Newspapers use large, bold type to prominently display headlines. Their mission is to entice you to buy them. Your webpage/advertisement/business card has the same objective: to convince potential customers that the information is valuable so that they ultimately buy your product.
Yet, if everything on your page is the same size, the more likely it is that the perusing eye will miss the worth behind the words. Creating headings in different sizes obviously provides an effective tactic for establishing a hierarchy.
Another method for communicating hierarchy within text is spacing. Usually, you can tell when things are associated by how closely the items fall together on a page. For example,
Related content in paragraph format should never have more than one blank line between the subheading and the text. Multiple indents signify that you have moved on to a new topic.
Not Too Similar
If different yet similar fonts are used, it can be difficult to differentiate between them.
The pictured fonts are so similar that instead of looking like two, unique fonts, one simply looks like an incorrect version of the other. A mistake. With Montserrat appearing as a less bolded version of Nunito, staring at the two of them side-by-side will cause eye strain. Instead of creating a design statement for your product, parallel use of these fonts will create literal headaches for your potential clients.
Rather than similar fonts, use fonts that complement each other while still being different.
Of the two fonts in the box above (Lora and Impact), one is a serif and the other is a sans-serif. The serif is the little foot mark that appears at the ending strokes of each letter. Serif fonts utilize the little foot, whereas sans serif fonts stand on their own. Additionally, the sans-serif font maintains unified thickness throughout the lettering, while the serif font gets wider and skinnier through different regions of the letter.
Conventionally, sans-serif fonts are used for longer bodies of digital text because the eye can recognize the shape on a screen just a little bit quicker, which makes reading faster (that is why programs like Word and Google Docs default to fonts like Calibri and Arial).
Mixing serif fonts with sans-serif is almost always a good design idea. The right combinations will complement each other well and add an elegant touch to your page. Be aware, however, that you never mix two serif fonts with another two that are sans-serif. The fonts will then appear to be too similar; and the page, rather than looking like an intentional design choice, will look like a mistake.
Limit the Decoration
Although you might think you need to spice up your page with fun fonts and capitalized letters, don’t. Or, at the very least, do so sparingly. If you write in ALL CAPS ALL THE TIME or constantly bold items, it will feel like you are yelling at your audience. Nobody wants to be yelled at. Even if you don’t buy that argument, know that leaning on the caps lock will make your text more difficult to read. This is because the eye does not actually read the majority of text; in fact, it skims, searching for familiar shapes in familiar patterns. The brain makes educated guesses of words as the eye glances over groups of letters rather than reading them all the way through! When you use caps lock, however, letters take on different shapes and appear as the same size. This slows down eye speed and forces it to have to go over each letter instead of making quick judgments based off patterns.
A similar argument is true for highly decorative fonts like Lobster (or the Microsoft version, Curlz MT). When extra curls get added to words, they become more difficult to read. Such fonts are nice for accents, logos, or branding, but they should never be used for an entire body of text (or even a full paragraph).
When used properly, fairly standard fonts can create a clean, well-designed look for your space. Don’t be afraid to use more than one font, but try not to exceed more than four fonts in a single project. Utilizing fewer fonts, and having them coordinate in a complementary manner, will make your work look intentional and classy.
If you’re using a more advanced platform to design your product (i.e., anything in the Adobe Suite), it’s possible to manually adjust the location of your type so that it sits exactly where you need it to sit. Two strategies for doing this are kerning and leading.
(Warning: while kerning and leading can be the cherry on top of your delicious font sundae, they can also look disastrous. Use these techniques with caution.)
Kerning involves adjusting the space between each individual letter. In some fonts, certain letters are slightly too far away or too close together. The example below shows how kerning can be used to make the spacing look more uniform.
One thing to note about kerning is that the full shape of each letter still needs to be visible. If you force the letters to be too close to each other, they will run together and it will make it more difficult for your reader to quickly register the word.
Leading, on the other hand, can be used to adjust the spacing between lines of text. For example, pull out quotes are typically more spaced than an ordinary paragraph text. Like kerning, leading is easy to mess up when you take things overboard. Be sure to leave room for tall letters (l, d, t, etc.) as well as letters that hang (q, g, p). The hanging letters should never cross into the space of tall letters.
If you can remember these tips and utilize them correctly, your created space will absolutely shine with professionalism.