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”.

Headline-Fonts & Body-Text Fonts

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.

Where to Find Free Fonts

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:

Less is Better

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.

Mixing Fonts

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 excessivelymixingtext-decorationsmakes 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.

My Favorite (Free) Headline Fonts

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.

Text Styling Video

Here’s a quick video demonstration about my personal dos and don’ts of styling and applying text-effects to fonts.

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.

Related Posts

Shane

I'm Shane Melaugh and I'm the guy writing most of the posts on this blog. My goal is to provide you with useful, straight-forward insights on how to grow your business by creating compelling offers, driving traffic and increasing conversions.

Click Here to Leave a Comment Below 12 comments

Benedict
-
August 14, 2011

Great post Shane, as usual; you seem to be one of the few internet marketers out there that has any eye for design. Keep up the good work! Benedict

I’ve made a video about WordPress themes here. I have lately been on the lookout for the “perfect” affiliate/niche-site theme. Something clean, simple and streamlined, that also loads quickly. It’s not easy to find such a theme, it turns out. Actually, WordPress’ own twentyten theme is really good, with a few tweaks added.

But mostly, I pick individual themes for each of my sites, to match the purpose and style of the site as closely as possible.

Just a note for those who like doing a bit of design, they might want to look at the Headway theme for WordPress. It has a great visual editor and you can make a site look any way you want it. Just a few clicks to change fonts, colours, layout etc.

Thanks for the info. My website readability has been nagging at me for a while and I just couldn’t put my finger on it. 70% of my readers are over 55 and we have the worst eyes.

Thanks to you I increased the spacing between my lines of text. Wow what a nice difference. Our eyes follow a line so much easier as its now more difficult to get lost in the line above or below when our eyes do a carriage return. I spaced my lettering out a little and the crowded congested look disappeared.

If you look at my site, do you have any other ideas that I am missing?

Thanks for this article, currently I’m making a senior exercise website. Keeping the fonts large but to tell which font size is best is a brain teaser.

After reading your article,it confirmed Verdana, to be a correct choice. The individual letter are slightly larger and spaced apart. Most science magazines use arial but I find the letters placed closer and pulled vertically.

The background of my website is white for ease of reading with a touch of color to outline science fact boxes. Will cut down the length of explanations, as you mention above. Once I finish my website & the hosting site publishes it, I’ll write back for opinion of the website.

Shane, I came across your tube clip by chance and now follow your site. Very impressive and you make a good role model.

Personally I see first hand how college is not preparing students. My son is good with computers and learned on his own. He did a PhD & Master’s project for extra college credit but no credit was given upon completion. He should finish his BS in CS this December. He says he is only pleasing me & not learning anything relative to computers in college. This ‘get a degree’ advice has come back to bite me. Is it possible that he can ask you a few computer related questions by email?