DEV Community

Cover image for Learn Typography and change the way you design
Paul
Paul

Posted on • Originally published at Medium

Learn Typography and change the way you design

A website isn't just about colors and color pallets, its also how your provide the information, 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 :)

Typography facts

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 vs typeface

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.

Type faces

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.

Serif fonts

✨ Brands using Serif

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

Brands using Serif


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.

when to use Sans serif

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

Brands using sans-serif

Here's a fun fact

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

Google tech

Google logo using serif and then switching to sans-serif

Yahoo using 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 🔥

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.

Top comments (0)