If you want to change the way your website and brand is perceived, it's not too hard.

A website isn't just about colors and color pallets, it's also how you present the information to your visitors, Typefaces and fonts can change the way your brand is perceived. It can tell a lot about you and your brand. However, with an overwhelming variety of typefaces available, it’s easy to feel lost.

By the end of the blog, you’ll learn the difference between Typography, Typeface, Fonts and learn when to use which fonts.

Plus, if you stay till the end, I’ll share a secret tool that can simplify selecting your web fonts.

So, make sure to bookmark it and like it so it can reach others :)

So, what is Typography?

Typography is simply arranging text in a visually effective way, which includes selecting fonts but also involves adjusting spacing, alignment, hierarchy, and other elements to enhance readability and aesthetics.

Typography Vs Typefaces Vs Fonts, what’s the difference?

First thing to keep in mind is that Typography is not Fonts.

Typography is a broader art encompassing typefaces and fonts, focusing on elements like line spacing, letter spacing, alignment, and layout to create visually appealing and readable text.

Typeface: Typeface is the overall design or the style of the character, for example, Times New Roman is a Typeface, Helvetica is a different Typeface

Fonts: Fonts are a subset of fonts, e.g. Times New Roman, Bold, 12px is a typeface

Typefaces

Typefaces are broadly classified into two categories, Serif and Sans-Serif (aka without serif). Serif fonts have something called foot or lines as shown in the below image.

Quick Exercise

Now that you have learnt the difference, take a moment and tell us which typeface the Dev.to logo is using. Is it Serif or Sans-Serif? let me know in the comments.

Everything about Serif

This section we’ll see when to use serif fonts and brands using the serif fonts

So, when should I use Serif fonts?

Serif fonts are ideal for print media, Headings, Luxury items.

✨ Brands using Serif

Here are some popular brands using Serif fonts in their logo.

Everything about Sans-Serif

Now let’s talk about Sans-serif, also referred as without Serif.

When should I use Sans-Serif?

Sans-serif are said to be more readable in digital devices such as computers, smart phones and more. So, if you want something more minimalistic, modern go with Sans-serif fonts.

✨ Brands using Sans-Serif

You’ll see Sans-serif more popular among Tech companies. It’s used to give a modern and minimalistic perception.

Some popular brands using Sans-serif logo include Apple, Spotify.

Here's a fun fact

Popular Tech companies such as Google, Spotify and Yahoo changed their logo from Serif to Sans-Serif

Google logo using serif and then switching to sans-serif

Same in the case of Yahoo

The secret Extension

So, now that you have read till here, you have obviously understood the importance of Typefaces and Fonts and the impact it can have on your brand.

You definitely want a tool that can make it easier for you to pick and test fonts on any website.

So let me introduce you to Font Tester, a very powerful chrome extension that can help you test, preview and find fonts on any webpage. It comes with 1000+ pre-installed Google fonts, plus, you can upload and test your local fonts and copy the code for the fonts directly from the modal.

Get Font Tester 🔥

Thank you for reading. If you liked it make sure to share it. Oh! and don’t forget to tell us about your favourite font in the comments.