When you're creating a blog, one of the most important design choices you'll make is what fonts to use. But how do you know how to choose the best fonts for your blog? Different fonts can convey different messages, so it's important to choose the right ones for your blog.
It's not just a matter of finding “good fonts.” You've got to think about things like font design, website design, your own brand, font readability, and more.
In this post, we'll discuss the different types of fonts, some tips for choosing the right fonts for your blog, and how to go about picking fonts that suit your brand.
I'll also provide a few suggestions for some great fonts that you can use on your blog (both free fonts and premium fonts).
So whether you're just starting out with blogging or you're looking to refresh your blog's look, read on for some helpful advice on choosing the right fonts for your blog!
Note: This post may contain affiliate links, which means that if you click a link and make a purchase, I may receive a small commission at no extra cost to you. I appreciate your support! You can read my full disclaimer here.
Let's talk typography (the fancy name for fonts). Typography is a major part of graphic design and web design, so it's important to know how to pick the right fonts.
Let's get into it…
The different types of fonts
Before we talk about how to pick the best fonts for your blog, we need to talk about what type of font you should use.
There are lots of different font styles (and some even have multiple names *cough display text *cough.
So let's talk about the different types of fonts.
Serif fonts + serif typefaces
Serif fonts are the ones with the little feet (or tails) on the end of each letter.
Times New Roman is a classic example of a serif font.
Here are some more serif fonts:
Serif fonts are generally seen as being more traditional, serious, and formal. They're often used in print media, like newspapers and books.
Because of their associations with seriousness and tradition, serif fonts may not be the best choice for a light-hearted blog. But if you're blogging about topics that require a more serious tone, then a serif font could be a good pick.
Sans serif fonts + sans serif typefaces
Serif fonts are the ones with the little feet (or tails) on the end of each letter.
Times New Roman is a classic example of a serif font.
Serif fonts are generally seen as being more traditional, serious, and formal. They're often used in print media, like newspapers and books.
Because of their associations with seriousness and tradition, serif fonts may not be the best choice for a light-hearted blog. But if you're blogging about topics that require a more serious tone, then a serif font could be a good pick.
Sans serif fonts + sans serif typefaces
Sans serif fonts are the ones without the little feet (serifs) on the end of each letter. Open Sans is a classic example of a sans serif font.
Sans serif fonts are generally seen as being more modern, casual, and informal. They're often used in digital media, like websites and apps.I
If you're looking for a font that conveys a more modern or casual tone, then a sans serif font could be a good choice for your blog.
Script fonts + script typefaces
Script fonts are the fancy fonts that look like they were written by hand. The cursive ones. They're often used for things like wedding invitations.
But on a blog, they can be used as an accent. You should never use them for a big line of text. But with just a few words, they can look great.
Here are two examples my homepage to show you how to use script fonts as accents.
While script fonts can be elegant, they can also be hard to read (especially for larger blocks of text). So if you're looking for a font that's easy to read, then a script font might not be the best pick.
Handwritten fonts + handwriting typefaces
Handwritten fonts are the ones that look like they were, well, handwritten. They can be used for accents, like with script fonts.
Like script fonts, they're best used as accents and not for large blocks of text. But when used sparingly, they can add a nice touch to your blog design.
What's the difference between script fonts and handwritten fonts? This quote explains it well:
As the name suggests, handwritten fonts are fonts that look like they were written by hand, usually with a pen or marker. Within that broad category you’ll find a range of styles that reflects the variations and subtle differences found in actual handwriting. The difference between script and handwritten fonts is perhaps a bit pedantic, but is based in the fact that script fonts are decorative or calligraphic in nature, while true handwritten fonts reflect the penmanship one would use in a letter.
myfonts.com
Display fonts (or decorative fonts) + display typefaces
Display fonts + decorative fonts
Display fonts (also called decorative fonts) are the ones that are designed to be used for headlines and other large text. They're often very bold and can be hard to read.
While display fonts can look great, you should use them sparingly. If you use them too much, your blog will become difficult to read.
Web-safe fonts
Web-safe fonts are default fonts that are preinstalled on most web browsers.
Web safe fonts include:
- Helvetica Neue
- Arial
- Verdana
- Tahoma
- Trebuchet MS
- Times New Roman
- Georgia
- Garamound
- Courier New
- Brush Script MT
How to pick the right font for your blog
Now that we've talked about the different types of fonts, let's talk about how to pick the best fonts for your blog.
When choosing fonts for your blog, you should look for font families. A font family is a group of fonts that all share the same basic design but come in different styles (like serif, sans serif, and script).
This is important because you want to have a variety of options to choose from. You don't want to use the same font for everything on your blog. That would be boring!
Instead, you want to mix and match different fonts to create visual interest.
Here are some great examples of font families:
- Open Sans (sans serif)
- PT Sans (sans serif)
- Roboto (sans serif)
- Merriweather (serif)
- Georgia (serif)
- Playfair Display (serif)
- EB Garamond (serif)
It's important to make a good choice here.
They have personalities, you can understand the message or branding before you've even comprehended the words- they set the stage for the words the reader is about to process. Fonts are the first impression for your possible future clients, so finding fonts that portray the company's brand is important.
hyperchatsocial.com
So let's talk about the most effective way to choose the perfect fonts for your blog.
Figure out your brand identity
Before you start picking fonts, the most important thing to do is figure out your brand identity. What tone do you want to set for your blog? This is a key part of web design and achieving a unique look.
Are you looking for a modern font with a modern look? A simple font? Or something in between? Using Times New Roman says something different than using Open Sans.
So who is your target audience? The psychology of fonts tells us that this matters.
Your answer to this question will help you narrow down your options and choose the best font for your blog.
You want a really excellent choice with a unique character. Your use of typography speaks volumes about your blog.
What are the different types of fonts you need for your blog?
You need several types of fonts for your blog.
The first font, or your primary font, is for the body text. That's going to be most of the text on your site. The sentence you're reading right now is body text. This will be a smaller font than the others, but don't make it too extra light.
Second, you need a heading font. The typeface design on this should be significantly larger than your body font and should be bolder. The text above that says “What are the different types of fonts you need for your blog” is header text.
Third, and optionally, you may want a third font for accents. Accents are very small lines of text in places like your homepage or about page. This isn't necessary, but it's nice to have. Often accent fonts are script fonts, but they don't have to be.
Font pairing
After you've chosen your fonts, the next step is to start pairing them together.
You want to make sure that the different typefaces you choose go well together. That means they should have a similar feeling and complement each other.
For example, if you choose a modern sans serif font for your body text, you might want to pair it with a rustic serif font for your headings.
If you're not sure how to pair fonts, there are some great resources out there that can help you. Here are a few great sites:
Use fonts from the same family
One option is to use fonts from the same family. For example, your headings might be Poppins Bold 42 px and your body text might be Poppins regular 16 px.
Font families (serif, sans serif, slab serif, script, and decorative) were created as a way to classify fonts that are meant to complement each other. Sticking with fonts from the same family not only helps you narrow down your font choices but also ensures you have a cohesive look across your design.
tailorBands.com
Professional look
Make sure that your fonts look professional. A bad font choice can really bring down your blog.
How many fonts should you use?
When it comes to fonts, less is usually more. You don't want to use too many different fonts and different styles on your blog because it will become confusing and difficult to read.
A good rule of thumb is to use two or three different fonts total. One for your body text, one for your headings, and optionally one for accents.
If you're just starting out, it's best to keep it simple and just use two fonts. You can always add more later if you want to.
Hierarchy of fonts
When you're using multiple fonts on your blog, it's important to create a hierachy. That means some fonts are more important than others.
Proper hierarchy adds structure, creates visual organization, reinforces brand recognition, and makes it easier for people to read your content.
selahcreativeco.com
Your body text font is going to be the most important font because that's what people will be reading the most of. After that, your heading font is next in line. And lastly, if you're using an accent font, that would be third in importance.
This hierarchy should be reflected in the size and weight of your fonts. The body text font should be smaller and lighter than the heading font, and the accent font should be even smaller and lighter than that.
You can also use color to create hierarchy. For example, you could make all your headings one color and all your body text another color. Or you could make your accent font a different color than the other two.
What font weights should you use?
When it comes to font weights, again, less is usually more. You don't want to use too many different weights because it will become confusing and difficult to read.
A good rule of thumb is to use three different weights: light, regular, and bold.
Your body text should be the regular weight. The headings can be either light or bold, depending on what you want. And the accent font can be either light or bold as well.
If you're just starting out, it's best to keep it simple and just use two weights: regular and bold. You can always add more later if you want to.
How to use different fonts in blog posts
There's no one right answer for what the “best blog fonts are.” But following the guides in this post will help.
For your blog posts, you need:
- A body font
- A heading font for H1
- A heading font for H2
- A heading font for H3
(You can use H4, H5, and H6 too, but it gets complicated, so I generally don't recommend it).
You're going to have much text in your body font, so make sure that it's very easy to read. The right typography can make a big difference, regardless of your writing style. That's the great thing about great fonts.
Web-safe fonts
Web-safe fonts are fonts that are pre-installed on most computers. These fonts are a good choice for your body text because they're easy to read and they'll look good on any device.
Some common web-safe fonts are Times New Roman, Arial, and Helvetica.
You don't have to use web-safe fonts (I don't), but it will improve your site speed, which is important for search engine optimization.
What font size should you use?
Body fonts
The best font size for your body text will depend on the font you're using. A good rule of thumb is to use a size that's easy to read without being too small. Small sizes can be difficult to read.
For example, if you're using a sans-serif font like Arial, you could use a size between 12 and 16. If you're using a serif font like Times New Roman, you could use a size between 14 and 16.
Of course, you can always experiment with different sizes to see what looks best on your blog.
Heading fonts
For your headings, you want to use a font that's easy to read and stands out from the body text. That way, people will be able to quickly scan your blog posts and find the information they're looking for.
Some common heading fonts are Playfair Display Bold, Montserrat Bold, and Poppins Bold.
When it comes to font size, you want to use a size that's big enough to be easy to read but not so big that it's overwhelming. A good rule of thumb is to use a size that's two or three times bigger than the body text.
For example, if your body text is size 12, your headings could be size 24 or 36.
Accent fonts
An accent font is a font that you use sparingly to add visual interest to your blog. You might use an accent font for your headings, subheadings, or in special cases like block quotes or image captions.
The size here will really depend on the font. Many script fonts need to be in a much larger size than regular fonts. So experiment and see what looks right.
Bottom line, using different sizes is a good idea.
Leading, kerning, and tracking
Leading is the space between lines of text.
Kerning is the space between letters.
Tracking is the space between words.
You want to make sure these values are set so that your text is easy to read. If the leading is too small, your text will be difficult to read. If the kerning is too big, your text will look spread out. And if the tracking is too small, your text will look cramped.
A good rule of thumb is to use a leading that's 1.5 times the font size. For example, if your font size is 12, you could use a leading of 18.
As for kerning and tracking, it's best to experiment with different values to see what looks best on your blog.
Things to keep in mind when choosing fonts
Readability of fonts
When you're choosing fonts for your blog, it's important to consider the readability of the fonts. The best fonts are easy to read, even when they're used at small sizes.
Some factors that affect the readability of fonts are the x-height, stroke width, and contrast.
The x-height is the height of the lowercase letters. A font with a large x-height is usually easier to read than a font with a small x-height.
The stroke width is the thickness of the lines making up the letterforms. A font with thin strokes is usually harder to read than a font with thick strokes.
The contrast is the difference in lightness and darkness between the letterforms and the background. A font with high contrast is usually easier to read than a font with low contrast.
When it comes to readability, sans-serif fonts are usually best for body text. And serif fonts are usually best for headings and subheadings.
But ultimately, the best way to determine if a font is readable is to experiment with it on your blog. Try different fonts and see which ones are easy for you to read.
Does your font look good on mobile devices?
One thing to keep in mind when you're choosing fonts for your blog is how they'll look on different devices—mainly on mobile. More and more people are reading blogs on their phones, so you want to make sure your fonts look good on small screens.
Some fonts are designed specifically for mobile devices, so that's something to keep in mind when you're choosing. But even if a font isn't designed for mobile, it can still look good on a small screen.
To test how a font looks on a mobile device, you can just pull out your phone and type out some text in the font you're considering. Or, if you have an iPhone, you can use the built-in system font called San Francisco. This is a great way to see how a font looks on a small screen.
When you're choosing fonts for your blog, keep in mind that less is usually more. You want to use a limited number of fonts so that your blog is easy to read. And, make sure to test how your fonts look on mobile devices before you finalize your choices.
Serif fonts versus sans serif fonts
When choosing the best option between a serif and sans serif font, it's important to keep in mind how they are both perceived.
A study published by the Psychology and Marketing journal looked, among others, at the relationship between serif/sans-serif styles and certain affective descriptors. In general, subjects rated serif typefaces as more elegant, charming, emotional, gentle, and rich. In turn, sans-serif typefaces were perceived as fresh, high-quality, vital, smart, and readable.
creativemarket.com
Large font families
While it's not necessary to use a font with a large family, it can be a good idea.
Large font families, such as Roboto or Baskerville, that have multiple weights and styles can make it easier for designers to create complex typographic designs without the stress of figuring out which typefaces work well together. Some large font families even include both serif and sans serif versions, which offers even more flexibility to the designer.
On long-term projects like a brand’s visual identity, larger font families also offer more versatility. Being able to switch between multiple weights or styles based on the exact project needs offers designers more flexibility without having to deviate from the brand’s established identity.
toptal.com
Personal preference
Your personal preference is important too. Don't choose a font you don't like just because someone but it on a list of “good fonts.”
Take your time and look around at different font options.
Fonts for commercial use
When you download a new font, make sure to check if it is licensed for commercial use. Many, if not most, fonts are, but sometimes they will only be licensed for personal use, which means that you can't use them for something like a blog.
Other factors
This infographic from toptal.com summarizes how to choose a font for your blog well.
Infographic by Toptal
Google Fonts
One of the best places to find fonts for your blog is Google Fonts. Google Fonts is a free library of high-quality fonts that you can use on your website.
To use Google Fonts on your blog, you'll first need to choose the fonts you want to use. Then, check if your theme already has the font. Many themes come with Google Fonts, so always check first.
If your theme doesn't have the Google Font you want, you can either download the fonts from Google Fonts or embed them using the CSS code provided by Google. We'll talk about how to do this below.
If you're not sure which fonts to choose, you can use the “Recommended” section on the Google Fonts website. This section will show you some popular font combinations that you can use on your blog.
Best Google Fonts
There are tons of great fonts and popular fonts on Google Fonts, but these are some of my favorites:
- Open Sans (sans serif)
- Lato (sans serif)
- Lora (serif)
- Garamond (serif)
- Poppins (sans serif)
- Source Sans Pro (sans serif)
- Playfair Display (serif)
- Slabo (serif)
- Noto Serif (serif)
- PT Sans (sans serif)
- PT Serif (serif)
- Arbo (serif)
- Baskerville (serif)
- Oswald (sans serif)
- Roboto (sans serif)
- Raleway (sans serif)
- Montserrat (sans serif)
Other free font websites
If you don't find something you like on Google Fonts, there are lots of other free font websites, including:
What's the difference between a “font” and a “typeface.”
The terms “font” and “typeface” are often used interchangeably, but there is a difference. This quote is helpful:
A typeface is a set of characters of the same design. These characters include letters, numbers, punctuation marks, and symbols. Some popular typefaces include Arial, Helvetica, Times, and Verdana. While most computers come with a few dozen typefaces installed, there are thousands of typefaces available. Because they are vector-based (not bitmaps), typefaces can be scaled very large and still look sharp. The term “typeface” is often confused with “font,” which is a specific size and style of a typeface. For example, Verdana is a typeface, while Verdana 10 pt bold is a font. It's a small difference, but is good to know.
techterms.com
Where to purchase the best fonts
Adobe Fonts (formerly Typekit)
If you're looking for high-quality, professional fonts, then Adobe Fonts is a great option.
Adobe Fonts is a paid subscription service that gives you access to over 16,000 fonts. Adobe Fonts has a wide selection of both sans-serif and serif fonts. And all of the fonts on Adobe Fonts are compatible with both Mac and PC.
Adobe Fonts can be used on the web or on your computer for software like Apple Pages or Microsoft Word. You cannot download them though.
If you have an Adobe Creative Cloud subscription (to use software like Adobe Photoshop, Adobe Illustrator, or Adobe InDesign), Adobe Fonts is included.
Alternatively, if you sign up for a free Adobe ID, they will give you access to 1,000 fonts for free.
Another great thing about Adobe Fonts is their “font packs.” These are small collections of fonts that all pair well together. It can be a great way to start out.
Best Adobe Fonts
There are lots of great Adobe fonts, but here are some of my favorites:
- Brandon Grotesque (sans serif)
- Learning Curve (script)
- Hoeffler (serif)
- Futura (sans serif)
- Sofia (sans serif)
- Moret (serif)
- Merriweather (serif)
- Trade Gothic (sans serif)
- Nobel (sans serif)
- Gopher (sans serif)
- Museo Slab (serif)
- Operetta (serif)
- Franklin Gothic (sans serif)
- Utopia (serif)
- Gill Sans (sans serif)
- Kepler (serif)
Creative Market
Another great place to buy fonts is Creative Market. As of today, they have 59,146 fonts to choose from. That's amazing.
Creative Market is a great place to find any kind of font, but I use them especially for script or handwritten fonts. They have a huge variety (20,762 to be exact).
There are obviously way too many great ones to name, but here are a few of my favorites:
- Better Times (script)
- Losta Masta (serif)
- Wonderful Branding (script)
- Supa Mega Fantastic Font Duo (script and display)
- Buffalo (script)
- August Boy (display)
- Argent CF (serif)
- Sans Serif Handwritten (handwritten/sans serif)
You can also purchase huge font “bundles” where you get dozens of fonts for one price. Here are some examples:
- Cute Handwritten Font Bundle Volume 2 (20 script/handwritten fonts)
- Font Bundle Sale (30 fonts of various types)
- Angie Makes Fonts Bundle of Glory (21 script/handwritten or display fonts)
Other font websites
There are tons and tons of other font websites out there, but a few good ones are:
How to install custom fonts on your blog
How to install custom fonts on your WordPress website
WordPress theme fonts
First, check out the fonts that come by default with your WordPress theme. What fonts are included totally depends on the theme, but many themes include quite a great deal of fonts (often Google Fonts).
If the font you want is already available on your theme, you're all set.
Installing custom fonts with WordPress plugins
If your font is not available on your theme, you can use a WordPress plugin to install it.
A popular choice is the Use Any Font plugin. You can upload your font file and it will be available just like any other font.
Installing Adobe Fonts
You can also install your own font from Adobe Fonts. To do this, click “add to web project” when you're on the font page. It will then give you a code to insert in your header (use the Header & Footer Scripts plugin for this).
This process is the same for other blog platforms too, so I won't repeat it over and over.
So there you have it – a comprehensive guide to the best fonts for your blog.
Hopefully this has given you some ideas and helped demystify the process of choosing typography for your website.
If you’re still feeling lost, don’t worry! I’m a nerd for this stuff and would love to hear from you in the comments about what fonts work well for your blog or website.
Happy blogging (and font-choosing)! Good luck!
More blog tips you’ll love:
- The Best Tool for Viral Giveaways
- Thrivecart Learn Review: Is it the Best Option for Digital Course Creators?
- How to Write a Killer About Me Page For Your Blog
- Pin Inspector Review: The Best Pinterest Keyword Research Tool
PIN IT!
What does it mean when a font is free for personal use?
A lot of free fonts online are labelled as “free for personal use” or “for personal use only” and can only be used on documents/designs/invitations/social media graphics which are made by you or by someone who is making it for you for free.
Fonts Bee