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 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 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 fonts can make a big impact on your overall website.
So, are you ready? Let’s get started…
- 1 Why should you care about font design (aka typography)?
- 2 How To Choose the Best Font For Your Blog?
- 3 #1. Learn the basics of fonts classification
- 4 (A) Serif Typeface
- 5 (B) Sans-Serif Typeface
- 6 (C) Script Typeface
- 7 (D) Modern Typeface
- 8 #2. Choose Fonts That Match Your Brand Purpose
- 9 #3. Master the art of mixing fonts
- 10 #4. Never use more than 3 font families on your blog
- 11 #5. Know the weight (and size) of your words
- 12 #6. Keep Proper Font Spacing And Height
- 13 Websites With Great Web Typography Sizes, weight, and combinations
- 14 #1. Smashing Magazine
- 15 #2. Life Wire
- 16 #3. Nerd Wallet
- 17 #4. Medium
- 18 #5. HubSpot
- 19 #6. Vogue
- 20 #7. Social Media Examiner
- 21 List of Best Fonts For Blogs & Websites:
- 22 01. Roboto
- 23 02. Lato
- 24 03. Open Sans
- 25 04. Montserrat
- 26 05. Playfair Display
- 27 06. Oswald
- 28 07. Source Sans Pro
- 29 08. Raleway
- 30 09. Merriweather
- 31 10. Poppins
- 32 11. Ubuntu
- 33 12. PT Serif
- 34 13. Muli
- 35 14. Nunito
- 36 15. Pacifico
- 37 16. Lora
- 38 17. Josefin Sans
- 39 18. Arvo
- 40 19. Rubik
- 41 20. Domine
- 42 How To Install Google Fonts on Your WordPress Website?
- 43 WordPress Themes with in-built Google Fonts Option
- 44 In Conclusion –
Why should you care about font design (aka typography)?
Successful website & blog owners know that different font styles and designs communicate different messages to their audience. This is why they have carefully selected the font style for their website because no one wants to accidently send the wrong message to their audience base.
Did you know that Steve Job (Founder of Apple) is often called the “Grandfather of Typography“? (Source)
While creating his first mac computer, he also designed and created ten different fonts. I know this will not sound much to you right now, but it was a major breakthrough in digital typography at that time. He was the man who understood the visual power of the written word and sought to maximize it with the newer and better fonts.
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 us could possibly read 10 paragraphs in the same robotic font. Our eyes will get tired and we will eventually lose interest in what we are reading just because of ugly font.
This is the reason why it is said that “Steve jobs revolutionize the world of digital typography by giving is a variety of font style and design that today allow us to visually express ourselves”
Just like computer, 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.
How To Choose the Best Font For Your 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 are 7 different aspects of digital or web typography that will help you improve the readability and user experience of your website and blog.
#1. Learn the basics of fonts classification
There are literally thousands upon thousands of different fonts. Each of them has its own unique personality traits, just like your brand identity does. Yet, when you start, you should focus on the five most common types of fonts and their characteristics.
(A) Serif Typeface
In typography, a serif is a 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.
Though we can use them for both headlines and body text in web design, it is always recommended to use them in heading when you are planning to use a combination of Serif and sans serif font on your website.
Some of the most common serif fonts are Times New Roman, Georgia, Palatino, Bookman Old Style, and Garamond.
(B) Sans-Serif Typeface
Fonts come under this typeface lacks the previously mentioned sheriffs or decorative lines. Therefore these fonts evoke minimalistic and clean feel.
They are widely used on the internet, since reading such a letter on the screen doesn’t strain your eyesight.
Some of the most common sans serif fonts are Lato, Arial, Verdana, Helvetica, Futura, Calibri, and Century Gothic.
(C) Script Typeface
Script fonts are beautiful typefaces that mimic historical or modern handwriting styles.
They can either be formal where they’ll appear elegant or informal where they’ll appear more fun and playful.
The advantage of these types of font styles is their high expressiveness and emotional load that they carry. They attract readers attention and allows you to communicate humorous or serious Content, (Depending upon the font you use)
However, it is always advised to keep this font style limited to headings as reading script font in body text (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.
(D) Modern Typeface
The modern typeface also known as Didone are those fonts that have thin, long horizontal serifs, and clear-cut thick/thin transitions in the strokes.
These fonts create a progressive and stylish mood. They are mostly used in luxury branding, fashion, gaming, photography, and other creative industries.
Some of the most common Modern fonts are Impact, Infinity, Majoram, Rockwell, and Agency.
#2. Choose Fonts That Match Your Brand Purpose
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 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.
Knowing the answer to these questions can make your decisions more precise:
- What is the ideal age group of your target audience?
- What is the preferred gender?
- What profession is he/she in?
- What are your brand values and how you want to convey those values?
Answering these sort of questions will help you understand who you are trying to attract with your brand.
For example, if you are running a lifestyle blog that targets mostly female audience, you might want to use Scripted or handwritten fonts to give a feminine touch to your blog design.
#3. Master the art of mixing fonts
Using the same font on all over your blog will somewhat make your blog design dull. So, you should mix things up, and adequately pair typefaces.
Choosing fonts that go well together will help your blog content to flow nicely, have an aesthetically pleasing look, and ensure that your blog looks professional and readable.
However, it can be tricky to find two fonts that sit together in perfect harmony. If you are not quite sure which fonts complement each other, you can try some of the free online tools such as FontPair and Google Type.
Furthermore, you can also make a small research on Google and find out which are the 2020 web font combination trends and start implementing them on your blog & website.
#4. Never use more than 3 font families on your blog
In web typography, a rule of thumb is that you should not use more than 2-3 font families on your website unless you have a really good reason to.
The use of too many fonts on a single page will leave your pages with no hierarchy or differentiation in format between texts. Each of the font you select for your website will have a different role. In this way, we can distinguish them between primary, secondary, and accent fonts.
1. Primary Font: Your primary font should be most visible on your site because of its application into slogans, titles and header.s Your brand should be identified with it. One more thing, it is worth to match it with the font used in your log (If the logo contains text).
2. Secondary Font: This will be the font that fills in the block of text: Body paragraphs, blog entries, and product descriptions (if available). The main purpose of this font is readability, so make sure it is very simple and minimal – so that your website user can easily read and consume the contents.
3. Accent Font: This font should be used for a very specific purpose. For example, it can be used in call-to-action buttons to differentiate it with other elements present on the web page and generate more clicks. Furthermore, you can also use it to pinpoint the most important part of the text or display quotes to attract the attention of users.
#5. Know the weight (and size) of your words
The size of your font indicates the importance of different elements and allows you to divide your whole text into readable sections.
Though you can select any font size you like for your blog, but before you randomly start assigning sizes to your blog headline and paragraph, let me introduce you to modular scaled font size.
What is modular scaled font size?
A modular scale is a sequence of harmonious font sizes that relate to one another in a meaningful way.
We as a human are drawn to things that are beautiful and appealing and most beautiful things have perfect proportions. The same goes for font size.
So, instead of randomly choosing the size of your font, why not use the following sizes that are said to have the perfect proportion based on some mathematical model.
Recommended Font Sizes: 8, 16, 24, 32, 48, 64, 95 (px)
For example, 16px is the ideal font size for main body text, as it is not too small nor too big. So, it really improves the readability of your main content.
Similarly, you can use 32px for your main heading and 24 px for secondary heading.
Quick Note: Want to use different size that I have recommended above? Modular Scale Calculator tool to create your own perfect font size scale.
#6. 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 font 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 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.
So, stick with this guideline (150% of your font size) and you will always get the perfectly proportioned font height!
Websites With Great Web Typography Sizes, weight, and combinations
Want to get some real life inspiration from website with perfect typography?
Check out these model blogs and websites for some inspiration as to the way they use typography to give a good user experience to their users.
#2. Life Wire
#3. Nerd Wallet
List of Best Fonts For Blogs & Websites:
Why I recommend using Google Fonts on your website?
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.
This collection of fonts focuses on typeface families from reputable designers and foundries that contain multiple weights and styles.
The best thing about their font collections is that all of the fonts are Open Source, which means you can use them in every way you want commercially or privately (For FREE of cost)–You can even customize them for your own use, or collaborate with the original designer to improve them.
On top of that, due to their open-source nature, they are very easy to implement on any website. In fact, most of the free and premium WordPress themes come with an inbuilt option to implement Google fonts on your website.
All these things make them an obvious choice for the webmaster when it comes selecting a good & reputed font provider.
With the sheer number of Google Fonts available (almost 1000 fonts families), it can be overwhelming filtering through so many of the free fonts. So I have compiled 30-35 of the best Google Fonts that you can use on your blog and websites.
When I am writing this blog post, they have almost 1000 font families to choose from. Almost 1,000 font families are available at the time of this article
When I am writing this blog post, there are already 940 font families available on the Google Font website for absolutely free to use. So, it is usual to get confused about which one to choose as there is a lot of choices.
|Category: ||Style: 12||Designer: Christian Robertson||View Font|
Google’s in-house Roboto is by far the number one trending, most popular, and downloaded font in their typeface library.
Clean, smart, and styling while simultaneously professional and friendly, Roboto is the default font on Android, and since 2013, other Google services such as Google Play, Google Map, YouTube, Google Chrome, and Google Images.
Because of its simple and highly readable nature, it is massively popular for web and mobile use with 11,736,720,588,088 😲 views and counting.
Some of the popular websites using Roboto font include The balance, AliBaba, YouTube, Vice, NDTV, Kinsta, TMZ and Start Sports.
|Category: ||Style: 10||Designer: Łukasz Dziedzic||View Font|
Lato is a sanserif typeface family designed by Warsaw-based designer Åukasz Dziedzic.
With updates as recent as 2014, the slightly rounded strokes of the letters give Lato a feeling of warmth. Interestingly, that is also reflected in its name: ‘Lato‘ is polish word which means summer .
Some other popular websites using Lato font include Expert reviews, Moz Blog, Elegant themes, Website Builder expert, YNAB and WPForms.
03. Open Sans
|Category: ||Style: 10||Designer: Steve Matteson||View Font|
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp.
Due to excellent legibility characteristics in its letterforms, it is well suited for print, mobile, and web interfaces.
As of May 2020, it is the seconds most served font after Roboto which has been 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.
Some of the popular websites using Open Sans font includes WordPress, Cointelegraph, Dollar sprout, Modest Money, and Venturebeat.
|Category: ||Style: 18||Designer: Julieta Ulanovsky||View Font|
Birthed from a Kickstarter project in 2011, Montserrat aims to “rescue the beauty of urban typography that emerged in the first half of the twentieth century”.
This attractive font family was designed by Argentinian designer Julieta Ulanovsky, and is named after the Montserrat neighborhood in Buenos Aires where she lives.
It comes in 18 different styles ranging from thin weights to extra-bold and black, that means you have quite a lot of choice.
Some of the most popular websites using Montserrat font include Movie Pilot, TomsGuide, NBC & Leadpages.
05. Playfair Display
|Category: ||Style: 6||Designer: Claus Eggers Sørensen||View Font|
Playfair Display is a stylish serif font designed in 2011 but inspired by eighteenth century typefaces.
Being a Display (large size) design in the transitional genre, It is best suited for headlines and titles, while it may not look crisp and clear in the body text or small-sized letters.
|Category: ||Style: 6||Designer: Vernon Adams||View Font|
Inspired by “Alternate Gothic” sans serif typefaces, Oswald was developed by Vernon Adams. It is optimized for digital use on computers and mobile devices.
This font is best suited for headlines or Pull quotes that need to pop in spaces with size constraints.
Some of the popular websites using Oswald font include WWE, PhoneArena, ClickBank, and CreativeBloq.
07. Source Sans Pro
|Category: ||Style: 12||Designer: Paul D. Hunt||View Font|
Source Sans Pro was originally created for Adobe and was Adobe’s first open-source font.
It’s a sans-serif typeface that is intended to work well in user interfaces, but also works well for longer texts, thanks to its width, which is higher than normal.
The font is massively popular and more than 4.5 million websites are leveraging the typeface currently.
Some of the popular websites using Source Sans Pro include Sallys Baking Addiction, Bakers Royale, WebMD.
|Category: ||Style: 18||Designer: Matt McInerney||View Font|
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.
Some of the popular website leveraging this typeface include AliBaba, YouTube, Vice, NDTV, Kinsta, TMZ and Start Sports
|Category: ||Style: 8||Designer: Sorkin Type||View Font|
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 optimal readability on screens.
Its large x-height boosts the font’s legibility, making it suitable for use in long texts as well as for titles. But i will recommend you to better pair it with a sans serif font like Open Sans or Lato for body text.
Some of the popular website using Merriweather include GoodReads, Bored Panda, Harvard, Daily Dot, and Encyclopedia
|Category: ||Style: 18||Designer: Indian Type Foundry||View Font|
Poppins is a geometric sans serif font with support from the Devanagari and Latin writing systems— which is cool because the Devanagari system is used in more than 150 Indo-Aryan languages including Hindi and Sanskrit.
The accurate geometric design of its characters makes it suitable for both headlines and body text.
|Category: ||Style: 8||Designer: Dalton Maag||View Font|
As you can also make guess with its name, Ubuntu is the default font used in the popular Linux-based operating system of the same name.
This font is a good choice for headings and titles, especially for blogs and magazines, but not recommended to use in body text.
12. PT Serif
|Category: ||Style: 4||Designer: ParaType||View Font|
PT Serif is the second pan-Cyrillic font family developed for the project “Public Types of the Russian Federation.”
The first family of the project, PT Sans, was released in 2009. To date it has been featured in more than 1,000,000 websites and has its well-deserved place in the Best Google Serif Fonts list.
|Category: ||Style: 16||Designer: Vernon Adams||View Font|
Muli is a versatile sans- serif font designed by well-known font developer prolific Vernon Adams, who is the developer 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.
|Category: ||Style: 14||Designer: Vernon Adams||View Font|
Another Vernon Adams creation, Nunito is the perfect web font for creative projects as it comes with unique rounded character design.
|Category: ||Style: 1||Designer: Vernon Adams||View Font|
Getting inspired by the 1950s American surf culture, Vernon Adams designed an original and fun brush script handwriting font named “Pacifico”. It pairs well with Open Sans, Merriweather, Josefin Slab, and Oswald.
|Category: ||Style: 8||Designer: Cyreal||View Font|
Lora is a popular serif font that was designed by Cyreal to work well with 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.
17. Josefin Sans
|Category: ||Style: 14||Designer: Santiago Orozco||View Font|
Josefin Sans is a sister font of Josefin Slab (also an amazing font) which is widely used for graphics related works. The idea of this typeface is to be geometric, elegant, with a vintage feeling, for use at larger sizes.
|Category: ||Style: 4||Designer: Anton Koovit||View Font|
Arvo is a geometric slab-serif typeface family suitable for screen and print. In the Finnish language, Arvo means “number, value, worth.” It has been featured on more than 780,000 websites and has been largely utilised by Fashion and food blogs.
|Category: ||Style: 10||Designer: Philipp Hubert||View Font|
Rubik is a sans serif typeface which was designed by Philipp Hubert and Sebastian Fischer at Hubert & Fischer as part of the Chrome Cube Lab project.
It got a redesign for Hebrew in 2015 by Meir Sadan, followed by a Cyrillic redesign by Alexei Vanyashin in 2016.
It’s rounded edges and large counters makes it ideal font for titles and headings on your website.
|Category: ||Style: 2||Designer: Impallari Type||View Font|
Domine is another stylish serif font commonly used paired with the Montserrat font. The font comes in only regular and bold weight, so it is better suited only for headlines.
How To Install Google Fonts on Your WordPress Website?
Well as I mentioned earlier, it is pretty easy to implement any google font on a WordPress website.
All thanks to numerous free WordPress plugins that have made Google font integration pretty simple and straight forward.
One such plugin is “Easy Google Fonts Plugin“. which you can download from the WordPress repository for FREE.
Once the plugin is activated on your site, 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 Option
Is it necessary to install a separate plugin to implement Google Font on your WprdPress website?
No, many WordPress themes (both free and premium) gives you an inbuilt option to use Google font on your WordPress website.
For example, Astra PRO and GeneratePress premium are two of the theme I am using for my different blogs.
Both the theme have in built option to select and assign Google fonts for different section of your site.
Want to know more about why I use the Generatepress theme for my site? Check out my detailed Generatepress review here.
In Conclusion –
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.
Hopefully, my list of top Google fonts for blog and website will help you find the right pair of the font for your site.
Now it’s your turn… What is your favorite font for the blog?
Let me know in the comment section.