fbpx

Best Fonts for Websites for Better Readability

Disclosure: This page may contain affiliate links. When you click an affiliate link and make a purchase, we get a small compensation at no cost to you. See our Privacy Policy and Disclaimer for more info.

Along with images and videos, fonts of your websites are one of the most important aspects which affect the overall appearance and readability of your website or blog.

But choosing any font will not do. In this article I will tell you about some of the best fonts for websites for better readability.

Your font must appeal to your website or brand. You must be selective while choosing fonts for your websites.

Because every website is different. Websites based on tourism, lifestyle, fashion, education, food, news or sports must use fonts which goes with the contents and theme of your site.

Even if your blog content is good but if it has bad font, it will left bad experience for your visitors.

Let's see an example.

For a website which mostly talks about blogging, seo, backlinks, etc. which one of the following fonts would you prefer?

TechnicalWall

Blogging and SEO Tips

TechnicalWall

Blogging and SEO Tips

If you choose the first one, you are right. In fact most people will agree it. In my opinion first font is suitable for blogs which talks about blogging, tech stuff, etc. where as second font is most appropriate for blogs related to fashion or lifestyle.

Also, you may want to use different combinations of a particular fonts for different areas of your website such as Heading, Sub-heading, Paragraphs, etc.

If you don't know what font to use you may first visit some of the most popular websites in your niche and check what fonts they are using in their websites.

After going through these websites you may have experienced some awesome fonts. And you may also have decided that okay now this is the font which I would want to use in my website. But what if you don't know the font name.

Don't worry!

Earlier identifying font was a little tough but now a days there are many online tools available which can identify the font used in any websites.

How To Identify Fonts Used In A Website?

Let's see what are the tools available which can show which font a website is using.

The tool is WhatFont by Chengyin Liu.

You can use WhatFont tool to inspect any font on a popular website.

whatfont
  • First go to this link - https://www.chengyinliu.com/whatfont.html
  • Here you will see three option to find a font - Bookmarklet, Google Chrome extension and Safari extension. As I mostly use Chrome browser for writing my blog content so I use WhatFont chrome extension.
  • You can install chrome extension by visiting this link -  WhatFont
  • After adding the extension you may see that WhatFont is added at the top right of Google Chrome browser.
  • In Google Chrome, now go to the website where you want to know the font they are using. Click on the WhatFont extension.
  • After selecting WhatFont extension, move your mouse around the text on the site and click on any text to start discovering the fonts being used. To see detail of the font just click on any text either in the Heading or a Paragraph and it will popup the entire details of the font.

Now let's see what font some of the top bloggers of the world are using in their blogs.

Fonts Used By Top Websites

NEILPATEL.COM

neilpatel

Font used: geomanist - 600

Family: geomanist, Helvetica, Arial

Style: normal 

Weight: 600

ESPN.COM

ESPN

Font used: Georgia - 400

Family: Georgia, "Times New Roman", Times, serif

Style: normal 

Weight: 400

BACKLINKO.COM

backlinko

Font used: Gotham

Family: Gotham, sans-serif

Style: normal 

Weight: 400

SEMRUSH.COM

semrush

Font used: Ubuntu

Family: Ubuntu, sans-serif

Style: normal 

Weight: 500

COXANDKINGS.COM

coxandkings

Font used: Arial

Family: Arial, Helvetica, sans-serif

Style: normal 

Weight: 400

DISNEY.IN

disney

Font used: NotoSans

Family: NotoSans, NotoSerif, Matterhom, Helvetica, sans-serif

Style: normal 

Weight: 600

HUFFINGTONPOST.COM

huffingtonpost

Font used: ProximaNova

Family: ProximaNova, Helvetica, Roboto, Arial

Style: normal 

Weight: 400

MOZ.COM

moz

Font used: Lato

Family: Lato, Helvetica, Arial, sans-serif

Style: normal 

Weight: 400

YOURSTORY.COM

yourstory

Font used: PT Sans

Family: PT Sans, sans-serif

Style: normal 

Weight: 400

SHOUTMELOUD.COM

shoutmeloud

Font used: domine

Family: domine

Style: italic

Weight: 400

Hope that by seeing above example website you may now have some understanding about different types of fonts that are being used in top websites. 

Also what are some of the best fonts for websites for better readability. Above websites may provide some inspiration in selecting font for your website.

Before selecting any font just remember that it should enhance your website look and feel.

Now, question comes from where to get these fonts.

If you have a WordPress blog and you are using any popular WordPress theme there is great chance that your theme comes bundled with FontAwesome or Google Fonts.

If you are using premium WordPress themes like-

then you can use all the Google fonts, third-party fonts and even the fonts uploaded by you

You can also download typography plugins like WP-TypographyFont Awesome, Easy Google Fonts and Custom Fonts to use font of your choice.

Tips

  • Always try different combinations of fonts in your blog post such as serif and sans serif fonts. 
  • While using a particular font try to use its variations in Heading, Sub-heading and Paragraph.
  • Before publishing always check font size on different devices like desktop, tablet and mobile.

Conclusion

That's it! Try to find some of the best fonts for websites for better readability by implementing the above strategies.

I have tried to highlight some of the best fonts in the business which you can use in your blogs.

Whether you have a blog related to graphic designing, business, eCommerce, fashion, medical or even personal sites, you can use the tips provided in this article to choose some wonderful fonts for your website today. 

What fonts you are using on your site, please leave your comment below.

Sharing is Caring! If you like this article, please share it now.

Best fonts for websites
>
Share via
Copy link