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 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 type 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 which 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.
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.
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.