A Complete Introduction to the Fascinating World of Typography for Web Design

When it comes to web design, the devil is in the details. In other words, to make your site really great you need to pay attention to every last aspect and put real thought into everything you do.

Take your choice of font for example. This is something that you may not have even noticed when browsing the web but the reality is that every page you visit will have put painstaking thought into their choice of font. And there’s so much to consider when choosing just the right typography. Read on and we’ll take a look at some of those things…

What is Typography?

To start with, did you know there’s a difference between font and typeface? Essentially, the typeface is the ‘category’ of text style whereas the font is the precise choice. For instance, Arial is a typeface; whereas Arial Narrow and Arial Bold are fonts.

Both typefaces and fonts were originally born out of necessity with the emergence of analog printing. Back then, letters were laid out in frames that could be rolled in ink and then pressed onto paper (hence printing press). Typefaces and fonts dictated the shape and style of these letters with the aim of ensuring maximum readability and legibility.

Today that is still the aim of typography – to ensure your text is comfortable and easy to read – but it also has an impact on the overall look and feel of your web design.

Aspects of a Typeface

To these ends, there are numerous ‘aspects’ of a typeface that you need to consider…

History

The history of typefaces is a fascinating one and in many ways mirrors the history of our culture and the printing press in particular. Over the years many different styles have come in and out of fashion but generally there are three main categories that you can pick from: Old Style (Geralde), Transitional and Modern. They are defined by the thickness of the vertical and horizontal lines as well as their use or lack of serifs. The era or flavor of your font can also be divided further however: ‘humanist’ typefaces for instance tend to have more prominent curves. Check out this excellent video for more on where typography comes from and how that has literally shaped it over the years.

Serif

A ‘Serif’ is the little flick on the ends of a letter. For instance, the feet on the bottom of a capital A. As a general rule, Old Styles are more likely to feature these than Modern styles. Today they are more common in print than online, though they may be used in web designs that are trying to mimic the feel of the printed word or in headings and article titles. A typeface without a serif is called ‘sans serif’.

Kerning

‘Kerning’ describes the relative distance between letters which is important for legibility. This too is more complicated than you might at first suspect as different letters require more space depending on the letter they’re next to. So if you’re going to design your own typography for your website there’s a lot you need to consider! ‘Monospace’ is any font designed to ensure the space between letters is consistent which has a very ‘source code’ look to it.

Rules for Web Design

So now you know some of the basics, you’re ready to learn some of the rules that web designers need to stick to…

No More Than Three Fonts

In any web design, you shouldn’t use more than three fonts. Ideally you should have two (one for headers and one for body text) with a third used sparingly.

Choose Fonts That Are Similar…

Avoid picking typefaces from entirely different eras. A gothic typeface for instance and a modern typeface can look jarring next to each other. This infographic can help you through the process.

But Not too Similar…

That said, there should be some distinct difference between your fonts. Using Arial and Arial Bold for instance won’t have much of an impact and can lead to your site looking a little bland.

Choose Fonts Fit for Purpose

Some fonts are designed to be ‘display fonts’ (think impact) whereas others are designed for paragraphs. Choose the right font for the situation.

Never Use Comic Sans

‘Nuff said!

Top Tips

Finally, the following are not ‘rules’ so much as useful tips that can help you to make the right typography decisions.

  • Remember that different typefaces will say different things about your site. Modern fonts are good for modern businesses.
  • Narrow fonts can be useful if you need to make use of a narrow space while wide fonts work well for centered text that you want to spread out across the available space.
  • The color of your typeface will have a big impact on the impression it creates and its legibility
  • Bear in mind for responsive website development that your text may have to grow and shrink to adapt to display size
  • Take a look at Font Squirrel to find some great free typefaces and to get started!
Sankarnarayan. R
About the Author - Sankarnarayan. R

The founder and mastermind behind ColorWhistle is Sankarnarayan, a professional with over fourteen years of experience and a passion for website design services and digital marketing services. At ColorWhistle, our team has a wide range of skills and expertise and we always put our clients’ satisfaction first. This is what sets us apart from the competition – an eye for detail and the best website development services from the start to the completion of your project.

Ready to get started?

Let’s craft your next digital story

ColorWhistle Experts Certified
Go to top