Everything you need to know about website typography (with examples).

Website typography is underrated, perhaps because when it’s done well you don’t always notice that it’s there. One thing’s for certain. Bad web typography sticks out like a sore thumb. And it can drive website users away from your website.

So here we’re going to give you the full lowdown on typography in web design – what it is, why it’s important and what you should look for when designing or updating website typography – so you can be confident that your website is getting it right.

Contents

• What is website typography?
• The importance of typography in web design
• Some useful terms for talking about web typography
• Web typography best practices
• 5 inspiring website typography examples

What is website typography?

Website typography is the art of arranging and styling text on a webpage. Good web typography supports the user experience by

• making every word on the page easy to read
• enhancing the visual appeal of the website

Website typography differs from print typography because of how users consume text content online. When reading a website, people tend to scan and skim. They also access the internet using a range of devices. Web typography takes all of this into account.

The importance of typography in web design

This element of web design may not shout loudest. But while it’s doing its thing quietly in the background, typography in web design performs a couple of vital functions.

It makes text readable

First on the list. A pretty obvious point – but an important one.

The text on your website should communicate information to your audience in a clear and easy-to-digest way. This helps readers to stay engaged with your message and more likely to hang around on your website.

Choosing the right words is a big part of readability. But presenting those words in a way that allows readers to scan, skim and find exactly the info they’re looking for is impossible without good typography.

That’s because some text styles are much easier to read than others. And we’re not just talking about flowery cursive fonts versus a minimal sans serif. Subtle typographic details – like letter spacing and text alignment – affect the time it takes for a website visitor’s brain to compute what’s on the page.

We know that website users have a short attention span. They want information as fast as possible. So if your typography is slowing down the reading process, it’s a problem you need to rectify.

It supports UX

User experience (UX) design is all about creating websites that are easy and enjoyable to use. Website visitors should be able to navigate your site and find what they’re looking for without ever getting lost or confused.

Carefully crafted website typography contributes to the overall UX of a website. Typeface, font, spacing and font sizing all combine to make text readable and aesthetically pleasing. And when you have top quality typography, you provide an excellent UX for everyone.

That’s because good web typography takes into account visual impairments, making your site more inclusive and accessible. It’s also responsive, so characters scale to fit any device screen and users don’t have to zoom in or squint to read your content.

It establishes your brand identity

Designers use website typography to convey more than just words on a page. By choosing or creating a typeface that reflects the emotions and attitudes you associate with your brand, they help to establish your brand identity.

Is your brand bold and decisive? Classic and elegant? Kooky and creative? Whatever your brand personality, there’s a typeface to match.

Picking the right typeface and using it consistently across your website and other marketing materials helps you to stand out from the competition. It also cements your brand personality (and your offering) in the minds of website visitors.

Some useful terms for talking about web typography

Writing a website brief? Or trying to explain to your web designer what it is about your text that you want them to change? Then check out these useful terms for talking about web typography.

This little bit of jargon will help to ensure that both you and your designer are on the same page – which means you get exactly the web typography you’re looking for.

Typeface

We use the word typeface to refer to a font family. Some well-known typefaces include Arial, Times New Roman and Helvetica.

Font

Each typeface can be presented in a variety of different ways. It can be bolder or lighter, bigger or smaller, and it may have other style features like italicisation or a more rounded form. For example, Arial (the typeface) is available in a standard Word document as Arial, Arial Black, Arial Narrow and Arial Rounded MT Bold and Arial Unicode. These are all individual fonts.

Serif

A serif typeface has short, little lines on the open ends of each letter. Times New Roman is a good example of a serif typeface.

Sans serif

Sans is the French word for without. And in a sans typeface, we lose those short, little lines on the open ends of each letter. The text you’re reading now is presented in a sans serif typeface.

Visual hierarchy

Visual hierarchy means making the most important information on a page stand out. It can be applied to all kinds of communications, including leaflets, billboards and – of course – websites. Typography helps with visual hierarchy because, by making headings more prominent, it helps readers understand which text to read first.

Alignment

A web designer can align text in four different ways – left, right, centred and justified. This again impacts how a reader processes text.

Baseline

The baseline is the invisible line on which all letters sit.

Cap line

The cap line is the invisible line that all capital letters and some lowercase letters go up to.

X-Height

This is the height of the main body of lowercase letters. It’s the height of a lower case a and it doesn’t include the descending and ascending strokes of letters like g, y, h and d.

Kerning

Kerning is a typography term used to describe the space between specific combinations of letters. Typically, these letters become difficult to read when they sit next to each other because they create too much or too little white space. TT and WA are a couple of useful examples.

Tracking

Tracking refers to the space between all letters.

Leading

Leading (pronounced ledding) is the amount of space between each line of text, from baseline to baseline.

White space

This is a term used in all types of visual design. When talking about typography, white space refers to the empty space between letters, between lines and around headings and paragraphs.

Website typography best practices

When using typography in web design, there are a couple of guidelines that will help you to create more impactful, readable and user-friendly text.

Use just two typefaces per site

Less is more when it comes to typefaces. Use too many and your website will be visually confused –and confusing – which isn’t good for UX. So stick to two typefaces per website.

When using more than one typeface, ensure the right level of contrast and cohesion. And don’t be tempted to go too leftfield with your typeface choice. Choose a web-safe font to ensure your chosen font displays correctly on all devices and operating systems.

Pick a sans serif typeface for main body text

Sans serif is the digital world’s go-to for main body text. That’s because it’s easier to read on small screens than serif (which is often used in print publications, like newspapers). While serif fonts can look amazing as headings, steer clear when it comes to the main bulk of your content.

Size and weight your text logically

Website users notice big, bold text first. Designers use this knowledge to create a visual hierarchy. This means making headings and important information stand out so that website visitors are drawn, straight away, to what you want them to read.

To implement a visual hierarchy, headings need to decrease in size. H1 is your biggest and boldest font, H2 a little smaller, H3 smaller still, and so on. Your main body text should be the smallest and lightest font of all (while still, of course, being easy to read across all devices).

Being logical and consistent in the way you use your fonts makes it easier for readers to find essential information about your products or services, and it supports good UX too.

Think carefully about colour

Colour is another key factor to consider when using typography in web design. There should be enough colour contrast between the background, text and hyperlinked text so that text stands out and is readable.

Designers should also take colour blindness into account as per Web Content Accessibility Guidelines (WCAG). Red and green are particularly tricky to distinguish for some web users so, for example, green text with hyperlinked text in red would be a big no-no.

Leave enough white space

White space is as important as the content you put on a webpage. Without it, your website becomes cluttered and difficult to navigate. Nothing stands out and every element clamours for user attention.

When developing the typography of a website, we include white space in several different places:

• Between letters
• Between each line of text
• Between paragraphs
• Around paragraphs

Ensuring just the right amount of white space (not too much, not too little) makes text readable and helps to draw a reader’s attention.

Test your typography

To make sure your chosen website typography fits the bill, you need to test it. First, by ensuring it looks great and reads well across all devices. And then by testing it on (an ideally wide range) of real users. Their feedback will inform any tweaks before you go live with your site.

5 inspiring website typography examples

Here are some website typography examples (a few that we created here at Radical) that show just how much difference good typography makes to your website and branding.

1. SEVEN BRO7HERS BREWING CO.

Seven Brothers Brewery is a beer company based in Salford. When we designed their website we wanted to find a heading typeface that illustrated the brand’s no-nonsense, down-to-earth personality. So we went for a font that is bold and punchy.

2. Innocent Drinks

Innocent Drinks have a distinctive brand personality and this comes through in their web typography. Rounded, lowercase, sans serif characters have an almost childlike quality. The effect is gentle and playful.

3. Tiffany & Co.

On the Tiffany & Co. website the typography is fine and elegant – designed to emulate the jewellery that the company sells. Headings use a classic serif font, while readability is prioritised with a simple sans serif for subheads and main body text

4. B-Fit Gym

Another Radical Web Design client, B-Fit Gym is a fitness centre in Stockport. On this website, heading typography is strong and powerful. Main body text is crisp, modern and easy to read. The overall impression is of a brand that gets to the point and gets results.

5. Who Gives a Crap

The name gives it away. This is a brand that likes to push boundaries and challenge preconceptions. On the Who Gives a Crap website, heading text is bold, unique and playful. It also echoes the brand’s typographic logo.

Want to do more with your website typography?

Whether you want to update your typography to better represent your brand or you want a new website building from the ground up, we can help. Just get in touch with the Radical Web Design team to arrange a chat about your website requirements.