Design for Non-Designers: Fonts

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:

• Stick to the Classics
  Don’t get fancy when choosing a font. Some of the most popular choices are Georgia, Verdana (which is specifically designed for on-screen reading) and Helvetica. When in doubt, pick Verdana.
• Size: 14px
  When you look at some well-designed, stylish WordPress themes, you’ll find that they often use a very small font-size for the body text. The problem is that a small typeface looks better and more stylish in many cases. A larger font almost looks crude in a sleek, minimalistic design. However, your site visitors aren’t taking a step back and looking at your overall site design through squinted eyes. They’re trying to read your actual content. So, set your font-size to 14px or even slightly above, to make it more pleasant to read.
• Up the Line Height
  Another readability factor is the line height (i.e. the amount of space between two lines of text). I recommend increasing it to at least 150% of your body-text size (e.g. font-size of 14px and line height of 21px), to give your text some room to breathe and make it easier on the eyes.
• Black on White
  Whatever you do, don’t have a dark background with light text on it. Yes, that may look very stylish but it also strains the eyes much more quickly than dark text on a bright background. There’s nothing wrong with deviating from the standard a little, but when in doubt, just go with black text on a white background. It’s a combination that never fails.

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:

[one_half_first]  [/one_half_first] [one_half_last]  [/one_half_last]

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.
[thrive_borderless type=’custom_code’]

[/thrive_borderless]
 
Download Video

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.