Whether you’re looking to improve the aesthetics of your website or to increase conversions, choosing the right fonts can make a big difference, especially in the user experience.
When it comes to choosing fonts for your website, there are a lot of factors to consider: color, size, weight, style, and even the language you’re writing in. But, if you want to choose the perfect font for your site, there are a few things you should know before you start.
In this article, I’ll list my top 10 easy to read google fonts that are perfect for your website and can also be used for content marketing and emails. Plus they will look great on desktop, tablets and mobile devices. You’ll also see some examples of the fonts in use to save you some time in researching them.
tip: make sure that the fonts you choose look good on a website navigation menu.
Have you ever searched for fonts? Just visiting the Google Fonts website can be overwhelming. With so many options available, how do you know which ones you should use?
You’ll start by keeping things simple, the fonts you choose should fit your brand and be readable at all sizes. For example:
- If you’re an accountant, you wouldn’t use a delicate and frilly font for our website.
- if you’re a designer of baby clothing, you wouldn’t use a font that has an overly corporate look to it.
- if you’re a doctor’s office, you don’t want to use a font that is so bold and flashy that it doesn’t look professional.
As for the readability of the text, you want to make sure that the font you choose is legible. If you have a large amount of text on a page, you want to make sure that the font is large enough so that the text is easy to read.
You want to make sure that your font is consistent throughout your site. If you have different fonts in different places on your website, it can be confusing for users and it makes it harder for them to navigate. So keep your font choices to two. One for headlines and titles and one for the body of your text.
Side Note: Fonts can be a personal preference, but there are a lot of opinions out there about which fonts are the best and which ones are the worst. In this article, I’m going to focus on readability only and the fonts I’ve actually used not only for my website, but for client websites as well.
You won’t find any frilly or fancy fonts on this list because they’re just too hard to read and if people can’t read your content, it’s see you later alligator!
I’m also not going to go into the technical details such as who designed the font, the year it was designed etc. If you’d like all this nitty gritty detail, you can check out the Google fonts website.
Font Lingo
Now, before you get to the list of fonts, let’s get some lingo out of the way:
- style: refers to the font style as thin, light, regular, medium, bold, black and italic
- san-serif font: generally more readable than a serif font, because the serifs (the small lines at the end of strokes) are often omitted from them. This makes them easier on the eyes and also gives them a more modern, friendly and minimal look.
- serif font: typography designs in which the strokes that make up the letters are “serifs”, which are little projections from the main strokes. Serif fonts tend to be easier on the eyes and look more classic, formal and professional than sans serif fonts. They’re also popular for body text because they can handle a lot of copy without looking too busy.
- Font pairing: the use of two fonts together on a web page or design. A good font pairing is one that is easy to read and looks good. Some popular font pairings are Raleway/Open Sans and Lato and Oswald.
- Body text: the text that appears on the body of a website, below your website menu, below headers and above the footer. It’s typically written in a plain style so it stands out from the rest of the content on a site.
Here we go:
Roboto
Roboto is a sans-serif font which has 12 different styles making it a very versatile font to use. The font is easy to read and perfect for displaying body text on your website. According to Google Fonts analytics, Roboto is their most popular font.
Pairs with Montserrat and Oswald
Open Sans
Open Sans is a sans-serif font. It’s designed for easy reading on websites. The font is available in 12 different styles and is one of the most versatile and popular fonts available, making it perfect for any website.
Pairs with Roboto and Lato
Lato
Lato is a sans serif font that pairs so well with many other fonts. With 10 different styles, it’s sleek and classic. Great for body text, but use it in all caps, it’s fantastic for headlines.
Pairs well with Oswald and Open Sans
Montserrat
Montserrat is a sans-serif font that has rounded edges. With 18 different styles, this font is great for websites that need to look professional and have a modern feel. It is also easy to read, so your website visitors will be able to navigate easily. Use the regular style for body text or extra bold or black for headlines that demand attention.
Pairs well with Lato and Oswald
Roboto Condensed
Roboto Condensed is the condensed version of Roboto, which was designed for readability and legibility. It’s good for body text or for headlines and sub-headlines on your website.
Pairs well with Roboto, Open Sans and Raleway
Oswald
Oswald is another condensed font which has a classic feel to it. It’s perfect for use on websites that need to look professional and timeless. Its condensed letterforms and 6 styles make it perfect for headings and titles that need to be easy to read.
Pairs well with Lato and Raleway
Source Sans Pro
Source Sans Pro is a sans-serif font that comes in 12 different styles. This makes it perfect for use on websites that need a versatile font that can be used in a variety of contexts. Additionally, Source Sans Pro is highly legible and easy to read, which will make it ideal for use on websites that are meant to be accessible to a wide audience.
Pairs well with Open Sans and Raleway
Poppins
Poppins is a sans serif font with 18 different styles.
Poppins is a sans serif font with 18 different styles that are perfect for your website. Poppins is easy to read and can be used for a variety of different purposes, including branding and logo design, headlines, and text. Each style is unique and perfect for a specific purpose.
Pairs well with Roboto and Open Sans
Merriweather
Merriweather is a serif font which is slightly condensed and it’s easy to read on small devices. The numbers 3, 4 5, 7 and 9 are dropped lower than the other numbers which is why this font is at the bottom of my list. In the video below, I demonstrate what the numbers look like.
With 8 styles available, I prefer to use this font for headlines and titles only.
Pairs well with Montserrat and Open Sans/Open Sans Condensed
Lora
Lora is a serif font which reminds me of calligraphy. I’ve use it for body text on websites that needed a romantic feminine feel to it. I prefer this font for headlines and titles. It’s available in 8 styles.
Pairs well with Raleway and Open Sans.
How to Test a Font Before Committing to a Font Choice
Now that you know what to look for in a font for your website, you’ve seen examples of the top 10 google fonts I’ve used not only for my website but for client websites as well, it’s time to put things into practice.
If you’ve found a font pairing that you like and want to see it in practice, follow these steps:
- Head on over to Canva.com. If you don’t have an account, you can signup for a free one.
- Create a blank letter sized design.
- Press the letter T – which should being up a text box. Type a sample headline.
- Click in a blank spot on the canvas, press the letter T again. Type at least 3-4 paragraphs of text.
- Tip: copy existing text from your website to make a true comparison
- Format the headline and body text with your font choice.
Here is a video demonstration to show you exactly how to do this.
Captions are available.
How to Use Your New Fonts on Your Website
When it comes to using Google fonts on your website, the popular page builders and Themes for WordPress such as Elementor, Divi and Astra have Google fonts already connected, so you just have to choose what you want to use.
Conclusion
Now that you know what to look for when choosing your fonts, use this list of top 10 google fonts for website, test the look on Canva and compare it to what you’re currently using.
The goal is to have a font that represents your brand and more importantly, is readable on desktop, tablets and mobile devices.
When you’ve narrowed your choices down to one font for headers/titles and one font for the body text, update the settings in your website and you’re good to go.
So appreciate this blog. So helpful and I’m saving it. Some I’ve known and have used some of these pairings. The examples are great especially since I am a visual learner.
Glad you enjoyed it Roz!!!
When my website was first set up, I didn’t have a clue about fonts, and trusted the designer and his team but fortunately it worked out well. The designer was also the creative head for one of the biggest media companies in India and captured the formal nature of my business.
I did learn a bit about fonts much later and even asked my new IT support company a few years later if we could increase the font size but apparently that would have then involved a lot of work fixing each and every page etc.
Knowledge is power though and I put it to use when I created my Mom’s website. I’m going to have to pin this for future reference.
If your website runs with a “stylesheet”, it just needs to be changed there and all your pages are updated automatically. Otherwise, yes, you’d have to update each page.
Glad your using that knowledge for your Mom’s website!
Personally I prefer sans serif fonts and I guess my go to is often Arial. A lot of people use Calibri and I like that one as well. I’ve been experimenting in the graphics I design with some new fonts and like the clean uncluttered look. My website has an embedded font and isn’t easy to change size without disrupting the entire site apparently. I don’t have a lot of choices in my blog to change fonts so for now, am using the overall design, including fonts, that my graphic designer created for me when we did my newest website. I enjoyed reading and seeing the pairings you featured, as it gives some new font ideas to try in designing graphics. I generally go by my visual eye as to want works. What is clean and easy to read and compliments the quote and graphic. Appreciate the insights in this post Joe/Gisele!
Glad you enjoyed this Beverly. With technology now, you can have access to a wide variety of fonts using Google Fonts and since the font is on a Content Delivery Network, it won’t put any load on your website and you won’t have to worry about the user having the same font on their system.
Good blog Gisele – I think a lot of us forget that people are making judgments about our businesses based not only on the words we use, but the typeface that appears before them. Great examples to underscore the importance of good font choices. Like Beverley, I tend to stick with calibri and arial.
Hi Deb, thanks!!!
Calibri is a very simple font, same as Arial. I’ve seen posts online though about issues with Calibri. So if you run into an issue, you’ll find tons of stuff online about it.
I for one push against Microsoft for forcing users to use Calibri as a default font. Arial is a great choice for documents and a webpage when you don’t have the ability to use Google Fonts. They should have left things alone.
Very informative blog. This confirms the importance of being detail oriented down to the fo t we choose to reach our target audience. My go to font is usually Times New Roman because it’s easy to read.
Glad you enjoyed it Sharise!