The readability of your blog matters!
May not to you, but to me (as a reader.)
Something squeezes me inside when I’m on a page which is using fancy fonts which are hard to read, and I have to stress my eyes. And guess what I do?
You guessed it, I close the page (leaving a higher bounce rate)
The primary purpose of fonts is to be read. There’s nothing else they too which is as vital as helping readers understand.
So, the font you’re using should be accessible to the reader’s eyes and make the reading as convenient as possible.
Primarily, there are only two group of fonts. 1. Simple and 2. Fancy
The reading experience can vary significantly based on the group of the font you’re using.
But Shafi, I don’t agree with you, and I believe that Fonts make no difference!
You don’t have to.
My decisions are based on my instincts, and everyone has theirs. But what if I told you, that a study proved that Fonts matter? That people can guess your skills based on the font only. Sound weird?
Human Psychology of Simple Fonts
Two researchers, Hyunjin Song and Norbert Schwarz, did an experiment (source) which involved two groups of people.
The first group was given the direction to an exercise in a simple font (Arial)
While the second group was given the exact instructions in harder to read fonts (Brush)
The Results? Surprising.
The first group of people (with easy-to-read font) estimated that the task would take 8.2 minutes to complete. Whereas, the second group (with hard-to-read font) estimated a whopping 15.1 minutes.
Mind that, both groups didn’t perform the task but estimated based *only* on the instructions they read.
Simply put, the choice of font can make a difference as big as 86% and people tend to overestimate the task if founded hard to read the instructions.
What does it mean for you?
If thyself a blogger who share various blogging tutorials and guides, it’s vital that you use simple fonts to boost the count of action-takers.
But! It doesn’t mean fancy fonts are useless. They are as useful as simple fonts based on where they are used. And to prove that, there’s another experiment (by the same researchers)
Human Psychology of Fancy Fonts
Again, the experiment involved two groups of people – first, who got a printed menu in a simple font and other received a printed menu in a fancy font.
The Results? Not what you’d expect.
The people who received the printed menu in Fancy fonts assumed that the chef has more skills. While another group who received the menu written in simple font thought that the chef isn’t as skilled.
What made them believe that? Fancy fonts provoked a thought that more work has gone into creating the product.
As put by the researchers, “If you are selling a costly product, describing it using a hard to read font will suggest to the viewer that more effort went into creating that product.”Based on a research, using a Fancy theme can invoke the feeling that more effort went into the product. #FontsPsychologyClick To Tweet
Now that you understand the Human Psychology behind fonts, let me present you with the top 21 best Google fonts to use on a blog for a modern look and a better user experience.
Best Google Fonts for Blogs and Websites
The list is in not sorted by a specific order or preference. I’ll keep adding more amazing Google fonts to the list as time passes, so make sure to either bookmark this page or subscribe to our newsletter.
Montserrat, created by Julieta Ulanovsky, was inspired by Old posters and Signage. It is a Sans-Serif font and has excellent readability.
It’s best used for headings and titles on the page. And there are 18 different styles available.
It pairs best with Open Sans and Raleway fonts.
Oswald is another simple font for blogger which looks beautiful yet readable.
It is a reworking of the classic style and fits best for body content and heading for articles.
Available in 6 different styles, Oswald is best paired with Roboto and Lato typefaces.
3. Zilla Slab
Zilla Slab is the popular typeface used by Mozilla for its own products like Firefox browser. It has smooth curves for better look and usability.
Due to its lightweight, Zilla Slab is a perfect fit for body content. It is available in 10 different font weights and can even be used for headings. It pairs best with Roboto and Open Sans fonts.
4. Open Sans
Designed by Steve Matteson, Open Sans is my favorite font to use on a blog or website. It looks neat and is optimized for print, web, and mobile interfaces.
Available in 10 different styles, Open Sans is best suited for Heading, however, can be used for body content without a glitch. And it pairs best with Oswald and Montserrat.
Bitter is another popular font which is designed for comfortable reading on any computer or device. It is designed by Sol Matas and has only 3 styles available. The ‘Regular’ style is thicker than other ‘regular’ typefaces.
It can be best used for website headings and sidebar. And pairs best with Open Sans and Source Sans Pro.
Raleway is an elegant typeface which looks easy on eyes and professional at the same time. It is available in 18 different styles and intended for large size usages like headings and page title.
Open Sans and Josefin Slab look excellent when paired with Raleway.
7. Nunito Sans
Available in 14 different styles, Nunito Sans is a well-balanced font with smooth curves. It looks good on both the article body and page headings. However, I prefer to use it for the sidebar.
Nunito Sans pairs well with Roboto and Montserrat typefaces.
As you may have already guessed, Ubuntu is the font used by popular open source Operating System which goes by the same name. It has edges which look cool for technology-oriented websites and blogs.
Available in 8 different weights, Ubuntu typeface is most-suitable for content body and graphic designing. And it pairs well with Open Sans and Oswald for a professional yet elegant appearance.
8. Josefin Sans
Josefin Sans comes under the group of fancy fonts and thus widely used for graphics designing work. However, due to its elegance, it can be used on a website without much problem.
It is available in 10 different styles and looks neat for heading and sidebar titles. Moreover, it pairs best with Open Sans and Lato.
If you’re using Josefin Slab, make sure to use a large font size since it can be harder to read in smaller variants.
Arvo is another professionally designed typeface which looks pleasant on all screen devices. Due to its thickness and curves, it can also be used as a fancy font.
It’s also suitable for prints and originates from an Estonian name meaning “number, value, worth.” Arvo is available in 4 different weights and pairs best with Oswald and Lato for a polished look.
Lato is a classic font which pairs well with almost all of the fonts for blogs on this page. It was designed by Łukasz Dziedzic in 2010 and has been widely adopted afterward. Currently, it is adopted by more than 8,600,000 websites.
It’s a perfect font for article body due to its simplicity and ease of reading and available in 10 different styles. Lato pairs well with Open Sans and Raleway.
Another popular font known for its simplicity and adoption, Vollkorn is widely used for article body and headings. It’s available in 8 different styles and pairs well with Lato and Roboto.
This font is also adopted in prints in cases where a simplistic approach is taken. As you can see in the snapshot, Vollkorn doesn’t hurt eyes when reading even if smaller font-size is used.
12. Playfair Display
If you’re looking for a fancy font which is easy-to-read but doesn’t give a touch of professionalism, Playfair Display is the best Google font you can get.
It is popularly adopted by fashion blogs and female bloggers for body content as well as headings. Available in 6 different weights, Playfair Display combines best with Raleway and Open Sans Condensed.
As the name suggests, Roboto has a mechanical skeleton while having open curves both at the same time. Roboto perfectly fits for headings and it is available in 12 different weights which can extend its use to sidebar font and page title.
Undoubtedly, Roboto is one of the most popular Google fonts featuring on more than 13,000,000 websites. It pairs well with Open Sans and Lato.
14. Allerta Stencil
Initially designed for signage and posters, Allerta Stencil is a decent fancy font which can be easily and clearly read from a distance.
Each letter of Allerta is distinguished which improves readability. However, it won’t look good on blogs and websites for body content. Allerta Stencil is a theme best used for graphics designing and prints.
It is available in only one style and pairs best with Special Elite typeface.
15. Source Sans Pro
You may have already noticed, Source Sans Pro is a font which combines beautifully with rest of the best Google fonts on the list. It is Adobe’s first open source typeface family, designed by Paul D. Hunt.
Available in 10 different styles, Source Sans Pro can be used anywhere on the website and still look pleasant. Also, it is one of the most popular Google web fonts being featured in more than 4,200,000 websites.
16. PT Sans
PT Sans is based on Russian sans serif types and was developed for the project “Public Types of Russian Federation.” It is widely used inspired by Russian history and popularly used for headings and Title of the page.
The font is available in 8 different styles and popularly paired with Roboto and PT Serif (same family)
One of my favorite pick for graphics work, Merriweather font has a fancy look while being easily readable. It is designed for screens and features a condensed form of text.
Available in 8 different styles, Merriweather is an excellent font for headings and titles. Although it can be clearly used as a body font, it can cost some stress on eyes for long reading.
It is popularly paired with Oswald font and has been proudly featured in more than 2,700,000 websites.
The Oxygen font was initially designed for KDE Project, a libre desktop for the GNU+Linux operating systems. It looks beautiful and due to its simplicity, Oxygen font can be used on desktop and mobile devices freely.
Available in only three body weights, Oxygen is used for article body and sidebar font. The letters are longer than usual and thinner to give a professional look. It is popularly paired with Open Sans and Oswald typefaces.
19. Maven Pro
Maven Pro has round edges and blending which looks appealing on the desktop as well as prints. Its simplistic approach makes it an excellent for content body and sidebar font.
Available in only 4 different body weights (Regular, Medium, Bold, and Black), Maven Pro is well paired with Playfair Display and Roboto fonts.
A perfect font for essay writing, Lora is another popular font available for Free. It has brushed curves which makes it appealing and sophisticated at the same time.
It is available in 4 styles only, which are enough for story writing. Lora is best paired with Open Sans and Lato fonts. For the web, Lora looks decent for the article body.
Lobster is another very popular fancy theme which is an ideal choice for graphics designing but the article body. Due to its complexion, Lobster is hard-to-read font and requires stressing the eyes on certain words.
However, Lobster is an excellent pick for headings (considering that they aren’t too long) for fun-filled writing. It is available in only 1 style and combines best with Raleway and Josefin Slab typefaces.
How to Add Google Fonts to WordPress
Now that you may have picked a font from the list, let’s see how can add it to your WordPress site. Since WordPress is the most popular CMS for blogging (read more), I’m discussing the tutorial for it only. If you’re using any other blog platform and want a tutorial, just comment below.
Note: Many of the popular WordPress themes have an inbuilt Google fonts option. If that’s the case, you don’t need to follow the below steps.
1. Login to Your WordPress Dashboard
2. Go to Plugins > Add New
3. Search for “Easy Google Fonts”
4. Locate the “Easy Google Fonts” plugin by Titanium Themes and click the Install Now button. Activate it.
5. Go to Settings > Google Fonts and create a “New Font Control.”
6. Next, go to Themes > Customize > Typography to manage what fonts are used for which object.
Content readability can affect the user experience of your site which in turns increases the bounce rate and lowers the time a user spends on the site.
Choosing a good font may not seem a crucial task at the beginning, but as you start focusing on blog metrics, you would know the importance.
My top three picks for best Google fonts for blogs and website are:
- Open Sans
What font are you using on your blog and does it looks perfect? Leave a comment and let us know. Also, make sure to share this post with your friends and followers.
Latest posts by Shafi Khan (see all)
- InterServer Review: Get Over BlueHost and HostGator, Try Something Better - September 23, 2018
- CloudWays Review: How I Made My WordPress Site 458% Faster - September 22, 2018
- 201 Words to Use Instead of Very: Effectively Improve Your Writing and Communicate Better - September 19, 2018