How To Choose The Perfect Font From A Typographic Angle

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

Source: Creative Market

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

Source: Scale & Perspective

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)

Source: Creative Market

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.

Source: Google Fonts

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.

Source: Creative Market

Source: Creative Market

Some fonts will have versions like Expanded (greater character spacing) and Condensed (lesser character spacing).

Source: Google Fonts

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.

Source: Google Fonts

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?

Source: Google Fonts

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.

Source: Wikipedia

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

Source: Fonts.com

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?

Source: Google Fonts

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’.

Source: Identifont

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.

Source: Identifont

Center Vertex

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?

Source: Identifont

Bar

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.

Source: Identifont

Tail

The tail of uppercase ‘Q’ might or might not cross the circle for different fonts.

Or the tails could be straight or curvy.

Source: Identifont

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.

Source: Identifont

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.

Source: Identifont

Bar

Again, numbers also have this bar difference.

Source: Identifont

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.

Source: Identifont

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).

Source: Identifont

Line Crossing

If you look at the dollar sign, there are some fonts where the single line crosses the ‘S’ and some fonts that do not.

Source: Identifont

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.

Source: Codrops by tympanus

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.

Photo by NikolayFrolochkin on Pixabay

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.

Check out online business classes and marketing and sales classes for more branding tips. Or watch streaming broadcasts of free online classes at CreativeLive! You can also join online courses at Fiverr Learn~

Are there any other factors that you take into consideration when choosing a font?