A comprehensive guide to Picking the best Fonts for your Blog or Website.
There are so many elements of a killer blog design. But all too often I notice bloggers and web designers overlook minor details, like typography.
For most of them, after all “a font is just a font!“
If that is what you are also thinking of, then let me tell you “choosing the right font can have a major impact on your overall website success.”
A good font will enable your readers to spend more time on your blog and consume content very easily.
And I don’t think I need to explain to you that if users are spending more time and consuming your content then eventually you are going to make more conversion, more leads and more profit.
This brings us to the question:
Which is the best fonts for WordPress Blog and Website?
Well, this is what I am going to cover in this article. This guide will not only help you find the best Google font for your blog but also show you how font can make a big impact on your overall website.
So, are you ready? Let’s get started…
Why should you care about font design (aka typography)?
When Steve Jobs was creating the first Macintosh (Mac) computer, he did something that was never done before.
He created 10 fonts design (typography) that a mac user can choose from.
I know this will not sound much to you right now, but it was a major breakthrough in design at the time.
But Mac was the first computer with beautiful fonts and typography options. It was unlike anything else the world had ever seen.
It made such a big impact in the industry that people started calling him “Godfather of digital typography“
If it was not Steve Jobs then this could be what you have to stare at every time you turn on your computer:
Not so appealing & engaging, right?
I don’t think any of you could possibly read 10 paragraphs in the same robotic font. Your eyes will get tired and you’ll completely lose interest in what you are reading because of the font’s ugly look.
This is the reason why everyone says that “Steve jobs first Mac was a revolutionary product that changed how humans interacted with machines.”
Choosing the right font for your blog has the magical power of making your blog design appealing & engaging, causing your visitors to feel more at ease, thus improving their overall experiences on your website.
Different font styles communicate different subconscious messages to people – which can help you build brand identity.
How To Choose the Best Font For Your Website Or Blog?
You might think that a good font is those which looks simple and are easy to read.
But actually, it’s beyond that.
Here’s I have explained 7 different aspect that helps you in choosing the best fonts for the blog which catches the attention of your readers.
Understand the different Typeface Styles
Understanding the difference between a typeface and a Font can be a confusing concept for some people. But actually, it is a quite simple concept.
A font is defined as a complete character set within a typeface within a typeface. Whereas the typeface family describes a range of designs that are all variations of one basic typeface
For example: Arial is a font and sans serif is its typeface.
While there is plenty of different font typefaces, but below I have explained the 5 most popular typeface for any blog.
1. Serif Typeface
In typography, a serif is the small line attached to the end of the main vertical and horizontal strokes of some letters.
Serif fonts have been largely been utilized with print (newspaper and books) because of the distinctiveness between the letters.
Serif fonts are associated with a classy, traditional feeling and will talk to older audiences.
Some of the most common serif fonts are Times New Roman, Georgia, and Garamond.
2. Sans Serif Typeface
In typography, Sans-serif letterform is one that does not have extending stroke called “serifs” (we discussed above.)
Theis typeface of fonts is associated with the feeling of clean, stable, modern, universal, simple, and objective.
They are better suited for smartphones and computer screens. This is the reason why you will primarily find the use of sans serif fonts on most of the website body.
Some of the most common sans serif fonts are Lato, Arial, Verdana, Helvetica, Futura, Calibri, and Century Gothic.
3. Script Typeface
This typeface is based upon the varied and often fluid stroke created by handwriting.
Like most of the other typeface, script typeface also has its own subsets, broken into formal and causal variants.
For example, cursive is a form of the casual script.
If you really want to get users attention on something then script fonts will easily help you attain that.
However, it is always advised to keep this font style limited to headings as reading script font as paragraphs can be a big challenge for your readers.
Some of the most common script fonts are Lobster, Lucida, Pacifico, Brush Script, and Comic Sans
4. Modern Typeface
The modern typeface also known as Didone are those fonts which have thin, long horizontal serifs, and clear-cut thick/thin transitions in the strokes.
This font style is very popular in Millenials and mostly used on photography and design blogs.
These fonts are generally associated with smart, trendy, intelligence, sharp and style.
Some of the most common Modern fonts are Impact, Infinity, Majoram, Rockwell, and Agency.
5. Decorative Typeface
Decorative typeface fonts forgo conventions in favor of a unique and appealing typeface.
These types of fonts are only ideal for heading, so never ever use it in your body text.
Some of the most common decorative fonts are Letterpress, Escalope, Pinto, and Gotcha.
That was all about typefaces. Having an idea of typefaces helps you understand the different types of fonts.
Now its time to share some tips that’ll help you select a good font combination for your site to get better website’s readability.
#1. Don’t use tacky fonts
It might be something that you want to make use in your kid’s birthday card, but honestly speaking, funky and tacky fonts have no place on your website.
As we discussed above, each font style has its own personality and emotion attached.
Depending upon the font you use on your website, it’ll give off a different impression to your website users.
For example – In the above-shown card, a funky font (Comic sans) is used to make the design look childish and unprofessional.
Same as if we consider an another font “Papyrus” it will make you think of ancient civilization.
This is something that you might expect to see as the title of “The Revelation of the Pyramids” movie, and not on a tech website.
#2. Pick A Bigger Font Size for your Blog
Are you using a font size of 10-12pt on your blog?
Change it right away.
It is always recommended to use a bigger font size on your blog if you don’t want your reader to squint while reading.
What is the perfect font size for any blog?
According to many case studies, 16px is the ideal font size for any website. (Only paragraphs)
But not every font will look [erfect at 16px, so in that case try to keep it between 16-19pt.
The font size I use in the main content areas of our blog post is 17px.
#3. Keep Proper Font Spacing And Height
One of the easiest ways to make your content easy to read and consume is to add enough spacing between each line of your text.
What is the perfect line-height for any website?
Well, many professional web design experts have suggested that a perfect line-height is 150% of the font size you are using.
For example – If your font size is 18px, the line-height should be 27px (which is 150% of 18px):
In the 100% paragraph, you can notice that letters on adjacent lines are very close to touching each other. This is the reason why people can’t read that paragraph for a long time and soon will lose their interest.
At 150% line-height, it feels like space is nicely balanced between each line and the text is pretty readable. Meanwhile, the paragraph with 250% spacing seems to be taking things too far and feels unnatural.
#4. Make sure your fonts match your brand’s tone
You might have a specific preference for a few fonts already, but don’t let your own personal preference get in the way.
A font design might look nice to you on a personal level, but if it s=does not fit the purpose of your site then scrap it.
Instead, focus on selecting a font design that has characteristics you want to represent with your brand and website.
For example – If you are using a fancy font style on your health blog, then you are going to have a hard time in keeping your visitor engaged with your website and contents.
#5. Your Font should be compatible with all browsers.
Not all fonts are compatible with all web browsers.
While you might think that most of your readers must be using Google Chrome browser, but the reality might not be the same.
According to Mozilla research, this is the analysis of the browser’s usability around the globe.
Now I don’t think most of you will afford to lose any of your audience who use any other browser rather than Chrome.
Now you must be wondering “how to ensure whether my font is compatible with all browser on not?”
Well to check the browser compatibility of your font, check the format of the font you are using on your site.
Some popular format of fonts include:
- EOT (Embedded OpenType)
- OTF (OpenType)
- TTF (TrueType Font)
- WOFF (Web Open Font Format) and WOFF2
- SVG (Scalable Vector Graphics)
Now here is the table, which shows which font format is supported by which browsers.
From the above table, you can make a conclusion that only TTF and WOFF formats are compatible with almost all browsers.
If you are a WordPress user and you are using a font that comes with your WordPress theme, You don’t have to worry about browser compatibility as the developer must have already converted them into TTF or WOFF format.
#6. Don’t use too many different font designs
When it comes to web design, less is always more.
Most of the professional designers recommend that 2-3 fonts throughout your website should be a maximum.
- 1 font style for Headline or Page Title
- 1 font style for body content areas
- 1 font style for quotes (Optional – you can use the same font for your body content as well as quotes.)
Always remember that too many font styles can make your website or blog look unprofessional. Users will have hard time figuring out the real content you are trying to communicate.
So, it is better to keep things simple and limit the number of font styles to 2-3.
Best Fonts For Blogs & Websites:
From the past few days, I have researched various sources like Google Fonts Analytics, usage statistics, awwward fonts, and analyzed popular sites in different niches.
With all the resources combined along with my personal design experience, I have prepared the list of best Google fonts for WordPress websites and blogs.
Why Google fonts?
Well, first thing first it is the most popular font repository for web usage. At the time of i am writing this post (9 March 2020), they have over 36 trillion total font views.
the best thing is all typefaces of Google Fonts are free for commercial use which means you’ll not have any trouble with licensing.
On top of that Google fonts are very easy to implement on any website. In fact, most of the free and premium WordPress themes comes with an inbuilt option to implement Google fonts on your website.
All these things make them an obvious choice among webmasters when it comes to font selection.
Now, without further ado let’s have a look at some of the best Google fonts for blogs.
Lato is an open-source font family which pairs well with almost all of the fonts for blogs which is mentioned here.
This font was created by Warsaw-based designer Łukasz Dziedzic in 2010.
The Lato font family is very diversified with more than ten different styles which makes it perfect for use anywhere on your website.
You can use the normal style for your blog body and the bold style for your website heading.
Note: I also use Lato font for both the body and heading on Bloggingnova.
Popular website using Lato font – Expert reviews, Moz Blog, Elegant themes, Website Builder expert, YNAB and WPForms.
Roboto is a sans-serif font offering from Christian Robertson that was developed by Google as the system font for Android.
It is now hugely popular, comes in more than 12 styles and makes multiple appearances on Google Fonts’ analytics.
For example, Roboto is currently the most popular font on Google font with more than 10 trillion views while Roboto Condensed is also the sixth most popular font and Roboto Slab also comes as the 13th most popular font.
Popular website using Robot font – AliBaba, YouTube, Vice, NDTV, Kinsta, TMZ and Start Sports
After getting inspired by Old posters and Signage, Julieta Ulanovsky created one of the best Google fonts named Montserrat.
This bold and modern looking google font has excellent readability and best used for heading and titles of page.
You can pair it with Raleway or Open sans font on your blog.
Popular website using Montserrat font – Movie Pilot, TomsGuide, NBC & Leadpages.
Oswald is a wonderful font for the web because it was formed to fit the pixel grid of digital screens.
This sans-serif font was initially created in 20111 by Vernon Adams and was updated till 2014.
The font looks impressive in its bold weights and makes a perfect combination with open sans.
Popular website using Oswald font – WWE, PhoneArena, ClickBank, and CreativeBloq.
5. Open Sans
Open Sans is a humanist sans serif typeface developed by Steve Matteson.
Thanks to its clean and neat strokes that makes it highly legible on screen and at small sizes.
As of Feb 2020, it is the seconds most served font on Google font used on more than 23 million sites with over thirty billion views.
Google itself uses open sans font on some of its own webpage as well as in its print and web advertisements.
Popular website using Open Sans font – WordPress, Cointelegraph, Dollar sprout, Modest Money, and Venturebeat.
Raleway is one of the most elegant font initially created by Matt McInerney as a single thin weight.
Later it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012.
It also has a sister family Raleway Dot which offers unique styling with a dotted approach that can work for big headlines.
Popular website using Raleway font – AliBaba, YouTube, Vice, NDTV, Kinsta, TMZ and Start Sports
7. Nunito Sans
Nunito is well balanced sans serif typeface which comes in 2 versions “Nunito” and “Nunito sans”
Nunito was initially developed by Vernon Adams as a rounded terminal sans serif for display typography.
Later it is extended into a full set of weight and an accompanying non-rounded version, Nunito sans.
It is a popular option for user interface and fits perfectly for things like dashboards, restaurant menus, and price listings.
Recommended reading – How to make money blogging in 2020
Verdana is considered as one of the best web fonts because of two reasons: (1) the simple sans serif lines and (2) it’s super large size.
This sans-serif typeface was designed by Matthew Carter for Microsoft Corporation.
This font was designed to be readable at a small size on the low-resolution computer screens of the period.
Popular website using Verdana font – Quora, Ebay, Pinterest, Apple & Flipkart.
Georgia serif typeface was designed in 1993 by Matthew Carter and currently it is one of the most used font on the web.
It was intended as a serif typeface that would appear elegant but legibly printed small or on low-resolution screens.
The font will perfectly fit for your blog body content as it is easily readable. However you can also use it for your heading, but I would recommend better pair it with a sans-serif typeface to have some contrast.
Popular website using Georgia font – Forbes, BBC, Business Insider and copyblogger.
9. PT Sans
This font is available in eight different styles and perfectly paired with PT serif and Roboto.
This is one of the best google fonts for blogs and widely used for headings and Title of the page.
Popular website using PT Sans font – Ahrefs blog, Hollywood life, ClickFunnels, Story Pick, Social Media Examiner,etc.
If you are a fan of one of the most popular premium font “Proxima Nova” then you’ll definitely love Gotham as it is very similar t Proxima Nova.
Gotham’s letterforms were inspired by examples of architectural signage of the mid-twentieth century.
It suits well for both body and heading text, but I’d recommend better pair it with a serif font like Georgia or Pt-serif.
Popular website using Gotham font – Upwork, Hostgaror, Dropbox, The Verge, Rolling stone, Vox and many more.
Merriweather is the perfect choice for someone who wants to give geometric feels to their site.
It falls under Sans serif typeface designed by Eben Sorkin especially for the use on the web.
Available in eight different styles, Merriweather is a good font for heading and title. Although it can be also used as a body font, but it may cost some stress on eyes for long reading.
Popular website using Merriweather font -GoodReads, Bored Panda, Harvard, Daily Dot, and Encyclopedia
12. Helvetica Neue
Helvetica is probably the most famous sans-serif fonts.
It is a widely popular font in all over the world because of its more than 100 different styles.
As it is a multipurpose font that can be used anywhere on the web. You can use the bold variant of the font for headings of your blog post and Regular variant of the font for body text.
Popular website using Helvetica Neue font – GitHub, StackOverflow, Whastapp, SlideShare, Yelp, Vimeo, Pandora & Mashable.
13. Source Sans Pro
Source Sans Pro is Adobe’s first open source typeface family designed by Paul D.Hunt.
All thanks to its width, which is higher than normal which makes it one of the best google font for blog content.
Source sans pro is available in ten different styles which can be used anywhere on the website and give pleasant readability.
This font has been featured on more than 4,200,000 websites.
Popular website using Source Sans Pro font – Sallys Baking Addiction, Bakers Royale, WebMD.
As you may have already guessed with its name, Ubuntu is a very popular font used by one of the most popular operating system Ubuntu.
This font has thick edge which looks cool on technology-oriented websites.
It is a sans-serif font most suitable for titles, headlines, buttons and body text alike.
It pairs very well with Oswald and Open sans and gives an elegant appearance.
Recommended Reading – How to increase website traffic fast?
15. Josefin Sans
Josefin Sans is a sister font of Josefin Slab (also an amazing font) which is widely used for graphics related works.
However due to its elegance look can be also used on any type of website.
This font comes in ten different styles and looks good for heading and sidebar titles.
However, it is always recommended to use a large font size since it can be harder to read in smaller variants.
Recommended Reading – 25 Secret I wish I Had Known Before I Started Blogging
Muli is a versatile sans- serif font designed by well-known font developer prolific Vernon Adams, who is the creator of numerous other open-source fonts on Google Fonts.
It’s every letterform has a very smooth edge that can make your content look adorable.
It is best suited for body content, but one can use it for heading as well.
Popular website using Helvetica Neue font – Masterblogging, Thimgrill.
Lora is a popular serif font that was designed by Cyreal to work well both on the digital screens and in print.
It’s typography and memorable appearance with brushed curves makes it appealing and sophisticated at the same time.
It is available in four different font-weight only, but that is enough for storytelling.
Lora is best paired with Lato, Montserrat and open sans font.
Popular website using Lora font – Bloggingwizard.
How to Add Google Fonts to WordPress?
Well as I mentioned earlier, it is pretty easy to implement google font on a WordPress website.
All thanks to numerous free WordPress plugins that have made Goole font embedding on WordPress pretty easy.
One such plugin is “Easy Google Fonts Plugin” which you can download from the WordPress repository.
From your WordPress dashboard, Go to Plugins > Add New and then just search for “Easy Google Fonts” for quick and easy installation.
Once the plugin is activated, you will see a new “Typography” tab added to the WordPress customizer.
To access typography settings, go to Appearance > Customize and finally you’ll have the different option to set google fonts for your blog heading, body, sidebar, etc.
WordPress Themes with in-built Google Fonts
You must be thinking that is it necessary to download separate plugins and then install google font on my website?
Is there any theme that has all the fonts pre-installed?
Because having the font pre-installed not only gives you the flexibility to customize your website appearance in real-time, but it also saves your server space which a plugin occupies.
Well, there are numerous premium theme which has inbuilt functionality to change and customize fonts.
But one that I personally use on Bloggingnova is Generatepress premium.
Generate press one of the most popular theme for WordPress, I personally use this theme on my all website.
They do have a free version which gives you basic functionality to customize whereas their premium version (which I use) gives you a hell lot of customization option to customize your blog
This theme gives you the freedom to access all the Google fonts as well as any third party font.
Want to know more about why I use the Generatepress theme for my site? Check out my detailed Generatepress review here.
What’s Your Favorite Font at Google Fonts?
Picking the right font for your website is one of the tiny details that could potentially have a major positive impact on your website branding – with relatively less effort on your part.
Here I have shared some of the best fonts for blog which are hugely popular and used by most of the big websites.
If you are still confused, here is my top recommendation for you.
Best serif font for blog
- Pt serif
Best sans – serif font for blog
- Open Sans
- Source- sans pro
Now it’s your turn… What is your favorite font for the blog?
Let me know in the comment section.