Selecting Fonts to Make Your Blog SIte Pop

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!”
How To Find Fonts That Make Your Blog Pop
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, 3rd 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.whatFont Extension for Chome

 

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

 

Using Homemade Apple Font for Your BlogHomemade 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.

Alegreya Font

How to Use Alegreya Font on Your Blog Site

 

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.

Raleway

Raleway Font for The Long Haul

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

Raleway Font Used in Design

 

Monsieur La Doulaise

How to Use Mosieurladulaise Font On Your Blog

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.

Kranky

The Kranky Font for Image Design

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.

Ewert

 

Use the Ewert on Your Blog SiteEwert 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.

Oswald

 

How to Use Oswald Font in Web DesignThere 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.

Copse

 

Copse Font is Fun for BlogsThe 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.

Ubuntu Mono

Have Fun with the Ubuntu Font

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.

Lato

 

The Lato Font for Web Site DesignLato 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.

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!

12 thoughts on “Selecting Fonts that Make Your Blog Site “Pop””

  1. I am always in confusion whether I am using the right font and font size. You can make a blog post on the best readable fonts and font size.

  2. Hi Deborah

    It is really amazing to customize your blog. Fonts are always an issue for me as I am very bad in selecting these. Your this post has made me capable of making my blog shine through correct font selection.

    Thanks Deborah!

    -Abhishek

  3. Thanks for sharing this Deborah. Fonts may not seem like a big deal but it truly is. If a font is hard to read, we won’t be getting many visitors to our blog.

    I’m going to install the What Font extension after I post this comment. 🙂

    Thanks again for sharing all this information with us.

    Cori

  4. Choosing a Font for a website is headache. WhatFont seems to be an interesting tool. Just to confirm if the tool is perfect, Are you using sans-serif fonts for post?

  5. Ravi Roshan Kumar

    Hey Deborah,
    Glad to meet you.. 🙂

    You have shared a beautiful and great informative article and reading this suggestive post was really great beneficial for me. And therefore, I just couldn’t hold myself to tweet this on twitter, you know. Really great information on choosing a font for our site. Hope this information will be useful for our
    blogging carrier.

    I like these all font which is really wonderful and thanks to you for providing the option to download these font easily.

    Thanks for sharing such a great informative article.. 🙂

    Have a nice day ahead.
    – Ravi.

  6. Hello Deborah,
    Great writing mate. Specially usage and reference of fonts. Hope, it makes sense for newbie or mid level website designer.
    I am share 1 personal experience regarding website fronts. I have 2 E-commerce websites in New Zealand market. 2 years back, one website was doing really good and the other site was not.
    I talked with my SEO expert regarding this issues. We analyzed google analytic for both site. We found that we was losing traffic when they land to our target pages(less earning E-commerce site). Then, we point out few majors issues and site font was one of them. After re-designing font size, type, and color, we got incredible result for that site.

    Any way, Thanks for your blog.
    Cheers

  7. I always prefer to use the windows font.
    1. To prevent additional calls to google api, thus increasing site speed.
    2. To easily view the fonts on older browser, our friend in, IE

    Out of which, Verdana and Segoe UI is the most preferred. But, everything comes to the User Experience and preference.

  8. Really great advice for use of fonts, thanks Deborah. I don’t currently make pinnable images for my blog posts, but am looking into this now. These fonts are ideal for this. I’m particularly liking Lato.

    My preferred blog paragraph font family is simply Google’s open-sans at size 16 which is clean, crisp and so easy to read on all devices.

    Many thanks
    Matt

  9. Do fonts really matter For SEO or is it important only for the visitors of our blog?

  10. Mayank Mittal

    Hey Deborah,

    You are right about font size,thanks for sharing this details with us.

  11. Hey Deborah,

    Great article! It seems, you have a pretty huge experience communicating with supplier and in fonts area: )
    I like fonts that you represented, and try out Raleway. I have been heard that different fonts affect differently on users, and some of them really could increase brand vision

Comments are closed.