The Importance of Typography on the Web
The Importance of Typography on the Web

The Importance of Typography on the Web

Typography in Web Design is something that can be easily overlooked, however it is such a fundamental part of a design that it can make or break a website.

What is Typography?

Typography is a way of making type exciting, yet legible. We see it used in both print and on the web and there are huge differences in how typography is used in these formats.

Once printed, what you see is what you get - there is no scope for changing its appearance. On the web, however, the user has the control to alter the size and colours of the fonts, aiding accessibility.

Web Fonts

Web fonts are better for web design than normal fonts. They will appear consistent across all browsers. They load with the website making for faster load times and do not rely on the user having the font installed on their computer. Otherwise, a substitute font would be used, making the site look worse than the designer intended.

For this reason, it used to be the case that we only had a handful of font styles to choose from. These included: Arial, Georgia, Times, Verdana and the hated Comic Sans!

Thankfully, things have moved on in recent years and there are now a number of web font providers available (such as Google Fonts) who offer a much wider variety of types for use on the web. We can now take full advantage of this font freedom and because it is embedded within the web, it means that every browser will be able to display it.

Leading, Tracking and Kerning

Good typography should be unobtrusive, illustrating the content to its full potential whilst making it easy to read. There are ways of controlling type in print that alter the way individual lines, alignment, spaces, words and letters combine with each other to give the best possible results:

  • Leading controls space between the lines
  • Tracking is the space between letters within a whole passage of text
  • Kerning controls the space between two individual characters

On the web, tracking and leading can be controlled in a similar way to print but controlling kerning (known as letter-spacing in CSS) is less exact.

Typographic Alignment

Text alignment is set just the same on the web as in print, with four options: right-aligned, left-aligned, centred or justified.

The text-justify function is available in CSS which allows much finer control over how justified text is spaced to fill a line.

We tend to favour left align for clients who wish to add their own text to their site. This follows the general rule of how we read in all formats, from left to right, and from top to bottom. This helps with the User Experience (UX), making the site legible and easy to read.

Finally…

As you can see, typography is very important. If you can’t read the text, no matter how good the design, then the message will be lost.

Interested in

Web Design & Build

?
find out more