Selecting Fonts that Make Your Blog Site “Pop”

I recently visited a website and was drawn to it in a way that is not customary for me. Now, I'm trying to figure out what it was that was so appealing about the design. With my own sites, I try to keep them fresh, but also try not to change them so often that visitors start to wonder if they have arrived at the right place!

Regardless, I am always looking for that perfect design.

The one that says, “Yes! This is it!”

I am so picky (and maybe a little ADD lol) that I don’t always feel like I have arrived and that keeps me on the lookout for new and appealing design ideas (in between the content production, social campaigns, and everything else that needs doing in life!) One of my personal challenges is that I find myself doing the back-end technical stuff (programming) or the video and podcast things before getting around to design changes. It is that old-fashioned limit on time that also inserts itself as an obstacle to my design dreams.

After studying this particular website I realized what had drawn my attention. Are you ready for this? It was the fonts! It was hard to believe that it was not something fancy or technical or complicated, but simply a case of well-chosen fonts that were perfectly placed on the site.

Ok. It is wonderful that we know what it is, but how do I replicate it? I’m not a graphic designer, even though I am a professional trainer and teach professional graphic artists how to use software like Adobe Photoshop to bring their creative inspirations to life with computer software. That doesn’t mean that I am a graphic designer myself. So, what options are available to me, and others like me? Specifically, as it relates to font selection?

Through this experience, I have discovered that if you want to do the same thing, you don’t need a fancy graphics design degree. It may help and certainty talent helps, but there are some options available for those of us whose talent doesn’t extend much beyond the drawing of a stick person.

First, Some Basics and Rules

Before we get started, let’s understand some basics, especially as it relates to fonts…

Like colors and scents, fonts induce emotions for your readers. From jagged-edged ‘creepy' fonts to curling sophisticated script fonts, they create an aesthetic ambience that readers use to make inferences about the brand, blog, or other content.

There are also some basic rules for the use of fonts. For me, personally, I was blessed to learn these rules while attending university to become a programmer. Hey, the buttons on the software application have to look good, right? The advantage is that now I can pass that knowledge on to you.

One of the rules that relates to fonts is that you should not use more than THREE fonts per design (i.e. per website). This is why many times you see a headline font, a body font, and then maybe a sub-heading or navigation font. If you have too many fonts, you create confusion in the minds of your site visitors.

Think about it. Visit some sites who have broken that rule and then decide if that site gave you the feeling of professionalism. Did it make you feel like the site owner/company knew what they were saying or did it feel like the site was disorganized and thrown together?

Now, just because a rule exists doesn’t mean that it can NEVER be broken. I don’t personally believe in the common use of the words ALWAYS or NEVER. The rules are guides and this particular rule is a helpful one, but if there is a good reason to break the rule, then go for it. The key thing is to 1) know the rule; 2) know if/when to break the rule; 3) know WHY the rule is being broken (i.e. the benefit to your brand).

Ok, enough about rules for now. Let’s move on toward our journey. We can always talk rules again or save it for another article, eh?

Three Ways To Get It Done

As I see it, there are three ways to get it done:

1. Hire Someone
2. Get Educated / Read a Book
3. The Do-It-Yourself Method

That is the order of simplicity, as well. However, it is also in order of most expensive to least expensive. That said, it doesn’t have to be expensive. Talking in circles? Not quite. For example, let’s start with the hiring of a professional. There are ways to do that that are not going to break the bank or empty your wallet and some will give a very high rate of return on investment. This is especially true with what is called crowdsourcing.

Hiring a Professional

First, we could probably agree that it also helps to have some graphic elements that say, “Hey, this is me!” In other words, your branding. In this case, we are talking about a selection of fonts (up to three, remember?) that really give your website the feel that you want to provide to the visitor. That “feel” may be the difference between a visitor being a visitor and becoming a client! Many times the easiest way to get to that point is to hire a professional that knows how to coach you through that and how to present the graphic elements that resonate with you and with what your brand represents.

One popular way of doing this is use crowdsourcing for design. At first, when I heard the term, I wasn’t sure how that worked. I was trying to wrap my brain around it.

I decided to interview Rahul Aggarwal, Co-Founder of Designhill. His graphic design company implements crowdsourcing and Mr. Aggarwal explains it so well, in this interview:

In a nutshell, how crowdsourcing works is that you put together a concept of what you are looking for (in this case a “feel” created by fonts). You post it on the site, like Designhill, for multiple graphic artists to post their version of what you have described. From all of these posted concepts, you choose the one that appeals to you.

By using this process, you don’t have to go through several iterations with one graphic artist, not getting the results (i.e. font combination) that you want. You pick from several “designs,” choosing the one that you want. It is like a graphic design contest and it is all about you! You only pay for the results you want rather than paying for iterations of what you don’t want!

Buying a Book or Education

You could go out and get a degree. Ok, that is probably more expensive than the first option of hiring a professional. 😉 And, what would your friends at the cocktail parties say when you mention that you are paying $60k for a degree to learn how to choose three fonts for your website? Maybe a slight overkill.

However, there are some good books out there. One of my absolute favorites, and one that I recommended while I was teaching Adobe Photoshop and Website Design for Compumaster, was a book called “The Non-Designer’s Web Book, 3^rd Edition” by Robin Williams and John Tollett (affiliate link). The whole idea was that it covers design (superbly!) but covers it in a way that common people can understand! I can’t say that this is the “end all” for font selection, but it definitely covers what you need to know for web design and is quite a bit cheaper than a college degree or vocational course.

The Do-It-Yourself Method

The final method is the do-it-yourself method and it may actually be the most fun. However, it does require some elbow grease. At the same time, you get some education and some return on that investment of zero dollars. I’ll get you started here with ten fonts, to get you out of the starting gate.

First, there is a handy tool that a graphic designer recommended, that is essential. It is called “WhatFont” and it helps, in most cases, by hovering over a font that you like on someone’s site and letting you know what that font is, so that you can go “Google it” and get the font for yourself.

 

There are a couple of different ways to get WhatFont. One way is as a desktop option here. And another way is as a Chrome extension. Then, to use it, you activate the tool and hover over the font you want to identify. Keep in mind, there are cases (i.e. embedded fonts) where the font is not identifiable. However, compared to not knowing what the font is at all, the tool is worth the shot! And, it is free!

I used the WhatFont tool to dissect a few websites in this article, “Improving Your Site Design (With Conversions in Mind).” In that article, I chose the sites and then used the WhatFont tool to determine what fonts made the site design appealing. In this article, I look at it from the other direction and choose some fonts and talk about uses for those fonts (among other things).

Speaking of Google… Do you remember the days when fonts were harder to get and they cost a ton of money (or so it seemed)? Fortunately, now, many wonderful fonts are available from “Google Fonts.” This also makes it easier to incorporate into your site. I have included some examples for you in this article so that all you need to do is click, copy, and paste to implement on your site!

Looking at Some Example Fonts

We gathered up a few fonts for examples. Obviously, this barely scratches the surface for what is available out there, but it should get your creative juices flowing.

All of the following fonts are free (to the best of our knowledge, at the time of this writing); include a readable license (somewhere on the site we have linked); are downloadable (for offline projects); and are also Google fonts (for easy copy/paste into your website). We have included that information, along with a graphical example, for each of the fonts.

Homemade Apple Font

 

Homemade Apple is a sort of scripty, but not too scripty, font that is pleasing to the eye. It works well in embedded quote images as well as block quotes. It draws the eye to the font, making it a perfect addition to the your three-font set, for those special occasions.

• Get Homemade Apple for your site on Google.
• Download Homemade Apple (1001 Free Fonts) for your projects.

Alegreya Font

 

Alegreya evokes a sense of tradition and reliability. Alegreya includes serifs or subtle lines on the edges of certain letters. These small marks create a more formal style, similar to old typewriter fonts. Because of this, serif fonts typically evoke a sense of reliability, respect and tradition.

• Get Alegreya for your site on Google.
• Download Alegreya (Font Squirrel) for your projects.

Raleway

Raleway seems playful and informal. Raleway, a sans-serif font, is clean, modern and easy to read. Sans-serif fonts are clearly legible, even at very small sizes. Online prevalence has led san-serif fonts like Raleway to be seen as more relevant and relatable than other fonts. Raleway was featured in Lady Gaga’s 2013 website redesign (shown in the below image).

 

• Get Raleway for your site on Google.
• Download Raleway (Font Squirrel) for your projects.

Monsieur La Doulaise

Monsieur La Doulaise invites elegance and sophistication. Ultra-elaborate script font Monsieur La Doulaise evokes a sense of affluence and “breeding.” It is somewhat difficult to read and may slow readers down, but a flourish of Monsieur La Doulaise adds exquisite class to headlines, logos and invitations.

• Get Monsieur La Doulaise for your site on Google.
• Download Monsieur La Doulaise (1001 Fonts) for your projects.

Kranky

Kranky is approachable and fun. This light, fun, and slightly inconsistent font uses occasional block lettering along certain lines. Ironically named Kranky, this font can be used to create an ambience of whimsy and funk in headlines, logos, and other short texts.

• Get Kranky for your site on Google.
• Download Kranky (1001 Fonts) for your projects.

Ewert

 

Ewert brings Western flair to any project. Ewert is a serif-based display font that looks like the ornamental wood signs of the old West. The large, chunky letters are all capitalized and suggest a sense of old-fashioned Western adventure and charm.

• Get Ewert for your site on Google.
• Download Ewert (MyFontFree) or here (fontsc) for your projects.

Oswald

 

There was a popular font, Bebas Neue, that was used frequently for designs like the one displayed above, as a menu cover. However, it was not free. Fortunately, there is a similar font that has been able to replace the usage of Bebas Neue. It is called, “Oswald.” It is a useful font in places like menus and restaurant design, as shown in the above example, a design that was created around this wonderful font, to showcase its capability.

• Get Oswald for your site on Google.
• Download Oswald (Font Squirrel) for your projects.

Copse

 

The Copse font has been a popular font that is paired with “creepy fonts” for the overall “creepy” feel of a web site. It is a clean font that is easy to read and so it works well as a complementary font with other more unique fonts that help complete the package.

• Get Copse for your site on Google.
• Download Copse (Font Squirrel) for your projects.

Ubuntu Mono

The Ubuntu family of fonts work well with navigation, buttons, and menus. They are a clean font and easy to read. They fit well within the restraints of buttons and pull-down menu items, making them an ideal choice.

• Get Ubuntu Mono for your site on Google.
• Download Ubuntu Mono (Ubuntu.com) for your projects.

Lato

 

Lato is so easily described by the phrase, “Simple Elegance.” It is simple and yet the gentle curves of the font design create a subtle and comfortable ease. It is not so elegant that it is not readable and yet it is not so simple that it is boring. Lato is able to balance the two worlds with equal appeal.

• Get Lato for your site on Google.
• Download Lato (Font Squirrel) for your projects.

Conclusion

Content creators must ensure that the fonts align with their content. Choosing the right font style is essential, especially since readers will interpret the content through the feelings that are created by the font. Now, we have you started with ten fonts, but don’t let that stop you! See what you can come up with on your own. Find the fonts that you like and those fonts that look good together (i.e. “pairings”). Then, come share your site design masterpieces with us!