Why is Typography Important in Web Design?

There’s no way to skirt around it: typography is crucial for good web design. It’s common knowledge around the industry that 95% of web design is typography, and we think that statistic alone speaks for itself.

Think about how much you’d be missing out on if you decided to ignore or just gloss over 95% worth of anything. Could you say you’ve seen The Sopranos if you’ve only watched 5% of all the episodes? Not a chance!

So, grab a slice of gabagool, and carry on reading to discover how to design a website layout while focussing on typography.

What is typography?

Many people think that typography is simply what font you use. While font is a part of typography, it isn’t the be all and end all of it.

We could give you the boring dictionary definition of typography, but we find that the words of our Creative Director (and office waste-management consultant), Josh, provides a much more helpful insight to understanding typography:

“Being able to manipulate the written content of your design using layout, colour and font style is a powerful tool in your visual language. Typography is used to display text in a way that is in keeping with the other visual elements around it. The importance of typography is often overlooked; however, it can make or break a design. Good typography will use visual language to convey a particular message before the viewer has even read the text.” A good way to quickly demonstrate the importance of typography is with this image below:

See how the text on the top looks positive and friendly, while the text on the bottom sends shivers up your spine! That’s typography right there, folks.

The elements of typography

Font/typeface: you’re more than likely aware of what a font is, but did you know that all fonts fall into one of three categories? These categories are serif, sans-serif, and decorative.

Serif fonts feature embellishments at the end of each letter while sans-serif fonts don’t. Decorative fonts are those that don’t fit into the serif/sans-serif categorisation and are usually a bit whacky or creative.

Typeface and font aren’t strictly the same thing. A font is a specific typeface and the size and style elements attached to it, whereas a typeface is just the name for what family of font is used.

For example, Calibri, 12 pt., underlined, is a font. Calibri on its own is a typeface.

Alignment: this relates to how the text in your web design is positioned in line with other text or images being used. When writing text, you can left align, centre align, or right align your text.

Imagine you’re holding a ruler over your screen. By doing this, you’d be able to see if your text is aligned and what it’s aligned to.

Colour: there’s more to colour than meets the eye. Hue, saturation, and value are components that dictate the colour of your typography.

Consistency: this one should be easy enough to understand! Consistency is very important for web design because if your typography isn’t consistent then you’d struggle to create a brand identity and you may even alienate visitors from your website.

Contrast: you can use contrast to hold the reader’s hand and guide them through your text in order of importance.

As a general rule of thumb, we are more instinctively drawn to things that stand out. That’s why people use headings in a bigger font, often in a different colour to the main body of text.

Hierarchy: this refers to the following of widely accepted practices regarding how typography is categorised.

There are so many visual signals that websites give to their visitors to help them navigate their site. Usually, the website title is separated from the rest of the text, as is any navigation buttons. This is so that readers can quickly scan your webpage and know where the main body of text is that they should be reading.

Whitespace: the unused space surrounding your text, for example in a margin.

Don’t worry, backgrounds don’t need to be white all the time. The name whitespace has just stuck around from print into the digital age.

How does branding relate to typography

The biggest brand names in the business world all have their own custom typeface. Netflix, Google, and Samsung are just some examples of brands that have their own typeface.

Having a custom typeface is amazing in terms of branding. It exemplifies the point that your brand is unique and individual, and allows you to personalise how your brand promotes itself.

For example, take a look at how the Welsh Government commissioned a rebrand that included the creation of their own font that they could use for all of their tourism promotional materials. Their font utilises traditional Gaelic and Celtic lettering to pay a respectful homage to Welsh history.

While requiring a steep initial investment as part of your website design cost, paying for a bespoke typeface means you get to avoid having to pay long-term licensing fees for typefaces behind a paywall.

The unspoken rules of typography

Now that you know all about typography, we’re sure that you’ll want to rush into work and tell everyone about how you need a typography redesign. But wait! Before you do that, here are some of the unspoken rules regarding typography so you don’t make a fool of yourself at the next team meeting

• The internet has developed into a mobile-first space. You should make sure that your web design is responsive and can adapt to different platforms on mobile.
• Linked to the above point, you can set back-up typefaces that will automatically be shown if your #1 typeface isn’t compatible with a specific device or platform.
• Serif is great for use as a heading, but don’t use serif for the main body of a text. Use sans-serif for this as they are easier to follow.
• Font size has multiple units of measurement. Points, picas, and pixels are all unique ways of measuring font size. Beware, some browsers show points differently to others. Pixels are generally a better tool for web design typography.

Typography design agency

If the idea of managing your own typography seems a bit daunting, don’t worry! It’s a very big job so if you’re feeling at all concerned about doing it yourself then we definitely recommend that you approach an agency for website design in Liverpool, like us at Blaze Media, to take care of it all for you.

Get in touch if you want your website’s typography in safe hands.