Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome

This site may contain affiliate links for which a small commission is received.

Best Font For Your Website 1
Best Font For Your Website 1

You’re putting in the effort to create the best website possible; part of that process is finding the best font or fonts for that website. While you could just pick a couple of fonts you like, think again. Those nice font pairs you choose should work together to focus the reader on your message. Plus, good fonts that look awesome together make your website easy to read and professional looking.

That seems like a no brainer but deciding on which fonts look good together and fit your style requires a bit of research.  You want your text to look beautiful on your laptop, but is it also readable on mobile?  Because if it’s not, you’re losing valuable traffic even with an engaging image.   Picking the right font or fonts and in particular, the best complementary font pairs will make a difference. After all, you went to a lot of work to research your niche, create your website, and write great content so selecting the best fonts is just one more step in the process.

WP Rocket - WordPress Caching Plugin

Be Sure To Test Your Font Choice(s)! (See how at the bottom.)

First, picking readable fonts isn’t something most people actually think about. With all the mobile devices today, choosing font combinations that are easy to read on small mobile devices is more important than ever.  Hard to read fonts or fonts combinations that don’t look good together will turn away viewers.  You want them to visit and hang around on your website longer so here’s how to help do that by looking at the criteria for a) nice fonts that will work well on a website and b) how to find those nice fonts you’ll eventually select.

What About Fonts For Non-Web Designs?

If you’re working on a design, logo or printed media project you may find that fun, feminine, manly, grunge or fat fonts are perfect instead of the typical stylish well-known fonts and font combos that you would find on the web. These other types of great fonts make for fantastic digital designs as well as printed ones. And many of the fat, fun, feminine, manly or grunge fonts have anywhere from 50,000 to 1 or 2 million downloads so they are truly as popular as the more typical stylish fonts that you’d see on the web or in news articles. In fact, print-on-demand designs typically use one of these type of popular fun and very eye-catching fonts. Some designs incorporate a combination of complementary font styles that really look fantastic together. Because printed fonts can end up on anything from T-shirts to jewelry, I personally think picking good fonts for print is both easy and fun. But still, make sure that any font or font combo you ultimately use is readable for the chosen purpose (web, print, or project). Now, let’s focus on web fonts in particular because those are viewed on many different sized devices and picking good fonts for the web takes a bit more thought.

What makes a good font choice for a webpage?

Nice Fonts Are Mobile Friendly

1 – Those font combinations should be readable on desktops, tablets, and mobile devices.  I discovered that simply by testing font combinations on a test page for my website and then trying to read it on my iPhone and iPad.  Much to my dismay, I found that the first font combination I ever used on the first website I ever built sucked!  It stunk on the small display screen of my smartphone. 


Nice fonts are readable, even when at a small size, while not distracting or competing with each other. I suggest after you pick a font you like, test how your font looks on your smartphone because going back to redo font combinations on your website, social media or graphics is a) painful and b) close to impossible to completely clean up.  Plus your fonts are an integral part of your brand; viewers recognize you by both fonts and colors as well as your website design. 

There are a lot of beautiful fonts available. Some are perfect for jewelry or caligraphy but I would not recommend them for webpages. many of these are impossible to read when overlaid on an image.

Remove Any Background For Free:  5 Lesson Video Mini-Series

Learn how to easily remove any background online for free in about 30 minutes with PixlrX  >>>> CLICK TO GET ACCESS

Realistically, most fonts are easy to read as black on a white background.  Like “duh” you say.  Now slap that font on an image or graphic. It still should be readable, even on a small screen.

IMPORTANT TAKEAWAY: Make sure all your fonts that are readable no matter what size.

Want the perfect fun, feminine, manly, grunge, fat or stylish font? Hey, I’ve got 105 you can pick from and they are all popular downloads! (Keep reading if you want to find your own.)

Nice Font Pairs Complement Rather Than Clash

2 – Nice font pairs complement rather than clash. They “flow” and when you read the words it’s easy to follow the message. Good fonts or font combos help highlight the point of the message. So, what makes a font complementary? Let’s review the criteria.

As mentioned, one primary font type is used for website headlines, paragraphs, or in sidebar widgets, but sometimes multiple fonts work even better for highlighting a message or call to action on images, graphics, and social media content.  When you use font pairs in this way they need to focus attention to the message or CTA.

That is exactly what complementary fonts do; they “flow” together and don’t compete. 

Let’s take an example.  Using 2 or 3 heavy big bold fonts will get someone’s attention. It’s like someone typing a letter in all caps or shouting but if done incorrectly it’s also a bit overwhelming. Look at the images below.  I’ve made the exact same content except the font combos are different.  In both cases, the fonts are 56 pixels and 14 pixels. However, in the first image, it’s hard to read and the fonts don’t “flow”.  They fight for attention, almost like putting together 2 very clashing colors.

Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome

Here in the second image, I’ve chosen fonts that complement.  You actually read the message and the text goes well with the graphic.  The whole image reinforces finding the “best java on the planet”.   Plus, this font combo doesn’t overwhelm, look too busy or is difficult to read.

Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome

In fact if the image is shrunk, envision what might show on a phone, the image and text still look good.

Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome

3 Ways For Finding The Perfect Nice Font Combinations

While Google works for many searches there are a few great ways to find font pairing guides. So let’s cover both methods to show how you can find exactly the best font for you website.

Method#1 Trusty Google Searches

Yup, like any search on Google, you can find nice fonts that look good and more importantly are very readable on a webpage. One way to do this is to use Google image searches as a “font finder” method. Be sure to use Google images rather than just Google. It’s not the quickest most effective way but it does work. On the plus side, searching for fonts lets you see quickly how a lot of fonts look. In fact, you can search for complementary font combinations with this method. The time-consuming part is the manual search of results until you find the font or fonts you like. If you do decide on a font combo, pick only one complimentary pair for consistency.

  1. Open Google, click on “images” to use Google Images. In the search box, type “complementary font” or “best fonts combinations images”. The resulting images will show fonts that look good together. For each font combination or nice font pairing you like use the test step listed at the bottom to confirm that the font pairs are readable on both desktop and smartphone.

Method #2 Using Canva To Search For Nice Font Combos.

Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome
  1. All you need to is open a blank workspace and then click on text. Right there on the side are font combinations. Just drag and drop them into the workspace, look at each font type and size combination. Do this until you find font combinations you like.  You’ll probably want to try placing these on an image or two just to see how they look

Method #3   Get the Ultimate Font Cheat Sheet and pick from 105 Fabulous Fonts including perfect Complementary Font Pairs

This is even easier than the Google image search because these nice font combinations are tried and true.  All you have to do is decide which font combination to use on your blog or website.  Many of these fonts are popular Google Web safe fonts and the popular listed ones are from free font sites like 1001Fonts, DaFonts and more. The non-Google fonts listed are truly popular with anywhere from 50,000 downloads to over 1 million. You really can’t go wrong. Pick a good font or perfect font pair from the list and skip the search altogether.

Again, for any font pairing or font combination you are interested in use the test step to confirm that you like the look of the font pair.

Looking for an easy way to find your perfect font or font pair? Just download the Ultimate Font Cheat Sheet with 105 Fabulous Fonts and pick from these font categories:

  • fat fonts
  • feminine fonts
  • fun fonts
  • grunge fonts
  • manly fonts
  • stylish fonts

Important : Test Your Font Combinations On Screen And Mobile

It might seem like overkill but the extra five minutes it takes to check that the font or fonts you’ve decided to use really are readable on mobile. That beautiful script font you like on jewelry might just suck on a small screen so unless you’re using block fonts take the time to try this. Create a private test page on your website and type in some text or you can use lorem ipsum text*** (see below for what that is).  Make the heading one font type and the text the other.  Switch it around. View it on your monitor and on your smartphone.  If you like how it looks, then you’ve just determined the best font for your website.

***Note: If you don’t know what lorem ipsum text is, it is just placeholder text you can use during tests on your blog or website.  Use it as a placeholder for text in widgets, headlines, or whenever you’re testing the look of a layout or in this case the font combinations you want to use.  To get lorem ipsum text just use a lorem ipsum generator.  You can Google for one or use the provided below.

Lorem Ipsum:     Generator1 Generator2

If you’re still stuck and haven’t found anything you like then subscribe and get my 25 Font combo Guide that will give you more great ideas for nice font pairs that look freakin’ awesome.

If you loved this post consider sharing it.  Thanks!

Good Fonts For Websites
Good Fonts For Websites

Best Font For Websites And Blogs | How Choose Nice Fonts That Look Awesome

If you found this useful, consider sharing. Thanks

Make a cool logo in less than 5 minutes with Inkscape. Here's 24 ways to do it. >>> 24 Inkscape Filter Effects With Text

>
Scroll to Top