While I’m no graphic designer, I have learned to use various online tools such as Gimp and Inkscape, which are free alternatives to Adobe Photoshop and Adobe Illustrator respectively. I’ve also begun using Canva which provides a quick way to create good looking graphics. I know a good-looking image when I see one, however, piecing one together is a whole other matter.
My biggest challenge is finding fonts that complement one another, increasing the aesthetic value of whatever I happen to be creating. Not everyone has the budget to higher a designer when working on their own side projects. And often, finding a designer to create small pieces of content is neither a wise use of time or money.
At first I used trial and error. That turned out to take way too much time. I then began looking for other images with typography that I found interesting. Again, it took too long to find new ideas and then search for similar fonts. What I needed to do was teach myself to think like a designer so that I could look at my options and make a good choice based upon what is known to work well together.
In short, I needed to educate myself in typography. What I found is that there is much more to typography than I had ever previously known. Most of the small details are not necessary to know about in order to find great font combinations. I have left out the information that I discovered where this is the case. This article will focus on the basic terminology, the most important things I’ve found when choosing fonts for a design, and finally provide some resources written by designers much more talented than myself.
Serif & San-serif
Serifs are small lines at the end of stroke on a font. Perhaps the most well-know serif font is Times New Roman. Sans-serif fonts (sans meaning without) are fonts without the decorative line after the stroke. In print, serifs help guide the eye from one letter to another. This is the reason books and newspapers traditionally use serif fonts.
Online, sans-serif fonts improve readability which is why you find more websites using sans-serif fonts. When choosing different fonts together for designs or for using as a heading, learning to use both serif and sans-serif fonts together will provide the most contrast, increasing readability and usability in apps and websites. Not all sites, including this one, choose to use sans-serif fonts for body text, and that’s alright.
Times New Roman – Serif
Arial – Sans-serif
Font Size
For traditional media, points are used to measure font size. Of course, you’re a digital marketer so other units of measurement may be more useful to know. The units include em, px, & percent. Sixteen pixels is the standard size for web fonts. If you set font size to 100% using CSS you will end up with a 16px font.
Here are conversions for each unit: 12pt = 1em = 16px = 100%
Leading
Leading is the traditional term for line height. The name comes from the lead strips typesetters would use to separate fonts. To improve legibility line height should be greater than the font size, yet usually not more than 1.5 times.
Tracking
The term web designers use for tracking is letter spacing. Proper letter spacing improves legibility. This is increasingly important as font size becomes smaller. Adjusting the letter spacing in a design can have a dramatic effect on the finished product.
Kerning
While tracking refers to the standard spacing between letters, kerning focuses on the space between specific letters. When looking for fonts to use in your projects it is important to find fonts with kerning. Kerning is the adjustment of the proximity of one font to another. Some fonts such as the letter “i” should be moved closer to other letters to reduce the amount of negative space between letters, creating a more aesthetically pleasing look.
Pairing Fonts
Now that you know what you’re talking about you’re ready to continue your learning. Often you will see serif and san-serif fonts mixed together with one used as a heading and the other for body copy. This technique also works well for other projects as well. The two types are dissimilar which can create needed contrast. As someone not trained in design I try to keep away from using similar looking fonts together. The Web Font Combinator is a great tool for viewing fonts together side by side. I’m not qualified enough to give a ton of advice on choosing and pairing fonts so I’ll share my go-to resources when I need to brush up or get some inspiration.
Further Reading
- What Font Should I Use?: Five Principles for Choosing and Using Typefaces – Smashing Magazine
- Best Practices of Combining Typefaces – Smashing Magazine
- A Beginner’s Guide to Pairing Typefaces – Tuts+
- Choosing the Right Font: A Practical Guide to Typography on the Web – Tuts+
