As stated in my previous post about enhancing your website with graphics, I am not a designer. Despite this, I have often been asked about what fonts I use or how I created a certain text effect during webinars or after posting a new video.
So, in today’s post, I want to share with you what little I know about selecting and using fonts for websites, video presentations or any other purpose, in such a way that it makes people go “wow, that looks neat”.
Almost all discussion of fonts in this post concerns headline fonts. Those are fonts you might want to use as design-elements, in logos or graphics (such as the one on the top left of this post), on large slides in presentations, or even on billboards and fliers.
When it comes to fonts for larger bodies of text, all that matters is readability. Here are a few very simple guidelines for picking body-text fonts for websites:
Finding good, free fonts is very simple. First, there are probably already plenty of good fonts on your hard-drive and you can use them directly inside PowerPoint, Photoshop or wherever else you want to use them. Secondly, you can find many great fonts by visiting DaFont. There are thousands of fonts available there and many of them are free to use, even for commercial purposes.
If you look at the categories list across the top of the site, you’ll find a few under the title “Basic”. That’s where you’ll find most, if not all, of the best fonts to use. Why not go with categories like “Groovy” or “Runes” or “Retro”? Because the number one rule for good font design is the same as the number one rule for good graphic design:
With fonts, subtlety wins. The font-design should never be more noticeable than the text it spells out. On the flip-side, a font that turns heads, an exciting, fancy font with lots of flourishes, a glamorous font that begs for attention is always a bad font.
Here are some examples. Let’s say you are looking for a modern, even futuristic font. What you should avoid is a font like the one below that just screams:
Instead, you should go for something much more subtle:
If you look at that second font and think “that doesn’t look particularly futuristic” then I’ve made a good choice. Whatever’s special about a font should be so subtle that it’s hardly noticeable.
Just like when you’re mixing colors, when you’re mixing and matching fonts, it’s far easier to get it wrong and mess things up than it is to get it right and find a good combination.
Generally, you should stick to two fonts: one headline font and one body-text font. The two fonts you choose should either be matching or contrasting. Matching is when you use the same font, just different sizes and maybe different styles of the same font (e.g. bold and regular). Contrasting is when the two fonts are very clearly different. When chosen well, contrasting fonts create the most visually pleasing effect.
The one thing you need to avoid is picking conflicting fonts. A visual conflict happens when the two fonts are quite similar, but not the same. Even if you don’t register it consciously, there’s just something slightly off-putting about conflicting fonts. Here are two examples:
In the contrasting example, I also added bolding to the headline, to further improve the contrast.
It’s best not to mix more than two fonts and two different font sizes (one for the headline, one for the body text). Of course, in some cases a third or even fourth font-size can work and make sense, for example when you add further sub-heading styles to a longer document or piece of online content. Just remember that mixing too many different font sizes and excessively mixing text-decorations makes a text look messy.
There’s one way to get away with adding a third font (the only way I know of, anyway) and that’s by using a handwriting-style font. Handwritten text can be a great way to highlight an element and add a personal touch and in most cases, it doesn’t conflict with the other fonts on the same page or slide. An example of this can be found on every one of my posts: at the bottom, there’s an image of my signature. Technically, that’s a handwritten font (it’s my actual hand writing) and it’s the third font on the page. It works, though.
Here’s an example of mixing three fonts on one single slide, taken from a presentation I did for SECockpit:
Segoe Script is a free font, which is already installed on most systems and which is a safe bet if you’re looking for a good handwritten-style font. There’s also an entire category of handwritten fonts on DaFont.
Here are some of my favorite headline fonts. They aren’t the only ones I use, but they’re the trusty ones I always like to come back to:
As you can see, they become a bit more adventurous toward the bottom of the list. Myriad Pro is already installed on most systems, as are Vegur and Trajan Pro. Bebas is only available in all-caps and Code as well as Nevis look best (in my opinion) when used with all-caps.
Here’s a quick video demonstration about my personal dos and don’ts of styling and applying text-effects to fonts.
One final thing: whatever you do, don’t use Comic Sans.
P.S.: If you’re wondering why I added a blue highlight behind the sub-headlines on this page, here’s the reason: with all of the font examples, the page was looking quite messy and the sub-headlines no longer stood out. Because of this, they no longer gave the page a structure, like they’re supposed to. The page still looks a bit messy, but at least it’s nicely broken up into segments again, thanks to the highlights.
I'm the founder of ActiveGrowth and Thrive Themes and over the last years, I've created and marketed a dozen different software, information and SaaS products. Apart from running my business, I spend most of my time reading, learning, developing skills and helping other people develop theirs. On ActiveGrowth, I want to help you become a better marketer and product creator. Read more about my story here.