Not sure which font to use for your website, blog or eBook?
Choosing the right font is crucial in ensuring that your text is readable: whether your content is easily scannable and digestible.
You don’t want your audience to be frustrated over your font’s illegibility. Or worse, leave your site.
Here are some key factors you can consider when choosing the perfect font (plus some typography jargon for the tech-savvy people who want to research more on the precise terms).
Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!
Line Spacing: Leading
If your content has lines of text like in a paragraph, you want to make sure that you have sufficient spacing between each line. This makes it a more comfortable read for your audience.
Leading determines the amount of space between lines of text.
Whether you’re using WordPress or Microsoft Word, you can simply adjust the line spacing.
Letter Height & Letter Extension: x-height, Descenders, Ascenders
Leading amount depends on
- x-height: distance between baseline & meanline (eg. lowercase v, w, z fit x-height perfectly)
- Descenders: parts of alphabets that are longer and fall below (eg. lowercase g, j, y)
- Ascenders: parts of alphabets that are taller and rise above (eg. lowercase b, d, h)
Hence, when you choose a font, consider these letter height and letter extension.
Take Josefin Sans for example. Its x-height is exactly half of the cap height. Yet, when I look at it as a paragraph, the x-height seems small, the descenders are short and the ascenders are long. For me, it’s too heavy at the bottom. Doesn’t it look like musical notes with the black dots at the bottom? Thus, I don’t really like it but others might find this cute and youthful.
Letter Spacing: Kerning, Tracking
You will also need to take note of the spacing between letters.
- Kerning: spacing between 2 individual characters
- Tracking: uniform spacing over a range of characters
If characters are too close to each other, it feels cramped. If they’re too far apart, it feels like two words rather than characters of a single word.
Some fonts will have versions like Expanded (greater character spacing) and Condensed (lesser character spacing).
You can choose to use these versions or just stick to the default then manually adjust letter spacing in WordPress or Microsoft Word.
Boldness or Thickness: Font Weight
Do consider the letter thickness too.
Some fonts by default have thin lines while others have thick lines.
Oswald, for instance, is quite thick by default. In fact, it seems bold when it’s not.
Also, consider the various styles or font weight. A font weight of 400 is normal or regular. 200 would be extra-light while 700 would be bold.
Thicker fonts are more suitable for headings. But you’ll also want to choose a font that is neither too thick nor thin for your body font.
Round vs Squarish
Compare the ‘o’ of Montserrat and Titillium Web.
Notice how the former has smooth circular edges while the latter has sharp square edges?
This is more of a personal choice like how I prefer circles to squares.
Serif vs Sans-Serif
Based on Wikipedia’s definition,
- Serif: font with small lines attached to the end of strokes in a letter
- Sans-Serif: font without small lines attached to the end of strokes in a letter
Serif is designed for print while Sans-Serif is designed for the web.
Which is why I use Georgia (Serif) for my books and Poppins (Sans-Serif) for my site.
However, you don’t have to strictly abide by this rule.
Just look at Forbes! It uses Georgia (Serif) as its site’s body font.
Ultimately, it’s up to you to decide which font you prefer. And whichever font makes your text more readable.
Perhaps you prefer the elegant and formal style of Serif or the modern and minimalist style of Sans-Serif.
Text vs Display
Text font is designed to be legible at small sizes. Hence, it’s more minimalist and usually used as body font.
On the other hand, display font is more elaborately designed and stylish. It arrests your readers’ attention hence, it’s best suited for attention-grabbing headlines.
Script, Brush & Calligraphy Fonts
These handwritten fonts are aesthetically pleasing. And you’ll probably find them in blogs with feminine themes.
Used sparingly, it can help highlight certain words or phrases.
I use Playlist Script (brush script font) in my social media graphics. This beautiful font has helped highlight the keywords so that my followers know exactly what this new blog post is about at a glance.
Nuances: Subtle Differences
Okay, I’m not really sure what the typography jargon is. But there are some small tiny things that you might have noticed in certain fonts.
Raleway, for example, stands out to me because of its unique ‘w’. Notice how ‘w’ crosses in the center? Like 2 ‘v’s stacked together?
When you compare 2 fonts closely, you might notice even more subtle differences.
Lowercase: Single-Story vs Double-Story
The easiest way to spot this is by looking at the ‘a’ and ‘g’.
Single-story is the one we learn when we are young because it’s much simpler to write.
However, most fonts use double-story which has an extra loop. This is due to legibility where single-story ‘a’ might be misread as ‘o’, ‘d’ or ‘q’.
Round vs Sharp
As I’ve mentioned earlier, some fonts are rounder than others.
Just look at the lowercase ‘y’ which can be round U-shaped or sharp V-shaped.
Another subtle difference is whether the center vertex of uppercase letters is level with the other strokes.
Take ‘M’ and ‘W’ as examples. Do you prefer them to have equal height?
Take a look at the uppercase ‘G’ and ‘J’.
Some fonts will have the horizontal bar while others do not. Again, this is personal preference.
The tail of uppercase ‘Q’ might or might not cross the circle for different fonts.
Or the tails could be straight or curvy.
Numbers, Punctuation & Symbols
When you are choosing a font, you shouldn’t be looking at the alphabets only. You also need to consider numbers, punctuation and symbols.
Here are some ways how your font will affect the style of numbers, punctuation and symbols:
Balanced vs Dangling
Most numbers will sit on the baseline, making them aligned with the other characters and hence, having the same height in a row.
But for Proxima Nova, some of its numbers descend below this baseline such that they are dangling.
The same applies to alphabets too.
Curved vs Straight
Some fonts are more curved while others are more straight.
For me, the curved ones feel friendly but also slightly hard to read. Straight ones might feel cold but they make scanning easier.
Again, numbers also have this bar difference.
Gap: Open vs Closed
Some numbers and punctuation have gaps in them like ‘4’ and ‘&’. These gaps might remain open or closed depending on the type of font.
Round vs Squarish
Remember how I said some fonts are round while others are squarish?
Well, this also applies to that tiny dot in ‘?’ and ‘i’. Which we obviously won’t notice unless the font size is super large (like in the headlines).
If you look at the dollar sign, there are some fonts where the single line crosses the ‘S’ and some fonts that do not.
Style, Mood, Feeling
Different fonts will create different moods and evoke different feelings in your audience. Its style will also say something about your brand’s image and personality.
So if you want to attract a younger audience, you might choose a chic, quirky or cute font. If you’re targeting an older audience, you might want to stick to a classic font like Arial, Times New Roman or Helvetica. If you’re targeting female readers, you might choose an elegant and cursive font.
Free Font vs Paid Font
Last but not least, you have to decide whether you want to use a free font or purchase a premium font.
Free fonts are definitely more common since everyone would be using them.
Paid fonts will be more complex and elaborately designed. And you won’t see as many people using the same font as you (unless you’re using a popular paid font).
I recommend that you use a free font when you just start your business. There’s no need to waste your funds on this unless font is essential to your business (like part of your products or services). You can always upgrade to a paid font when you break even and start earning a profit.
Creative Market, for instance, has countless paid fonts that are affordable. Plus, you can get fonts for free in their weekly freebies! However, do read through the instructions like how to use this font on your website, social media graphics etc.
Now It’s Your Turn
For branding purposes, it’s better to consistently use the same font across your website, social media graphics and email newsletter. If you use too many fonts, it will confuse your customers.
Are there any other factors that you take into consideration when choosing a font?