Typography on the Web is not only about choosing fonts for your website; it is also about defining a style that captures the essence of your brand while also helping to enhance user experience. With the large number of tools and possibilities at your disposal, it can be tempting to try something radical, but the results can also end up being counterproductive.
In this article, we will take a look at the various best practices for defining a typographic style for your website including essential factors such as choosing the right text size, colour and contrast and maintaining a healthy amount of whitespace and a typographic hierarchy that helps to a website to maintain its usability. We'll also be taking a look at some of the most useful tools for enhancing typography.
Choosing the Right Text SizeWhile maintaining a hierarchy with regards to text size is important, designers also need to remember that text is there to be read, and using excessively small font sizes will serve only to turn people off. In fact, it is even more important these days to use larger text sizes, since many of your visitors will be viewing your website using the small screens of mobile devices. The absolute minimum font size that you should use for bodies of text is 12-point, although size 14 or even 16 tend to work better.
Text Colour and ContrastMost written content, whether in print of online, is black written on a white or almost white background, and with good reason too. Simply put, the black-on-white standard makes for text that is easier and more comfortable to read, and for text-heavy content such as blog posts or other articles, designers should rarely deviate from this standard.
Placing large amounts of text over a background image or pattern is also something that designers should avoid, since this inevitably leads to contrast issues as well. However, in other cases, you may want smaller text elements, such as titles or buttons and other navigational features to make use of a different range of colours. A little experimentation is fine, but make sure that all text remains easy to read.
Fonts and Typographic HierarchyHaving a consistent typographic hierarchy will help to improve user-friendliness by making it easier to differentiate between the various elements of your textual content. Typographic hierarchy typically refers to varying type sizes, but it also covers the use of different fonts and colours. For example, your titles will typically be larger and more visible than the bulk of the written content, but they may also make use of different fonts and colours. The typographical hierarchy will help to define the look and feel of your website while also assisting in navigation. This hierarchy is even more important with online content than it is in print; Web users typically have a shorter attention span, so more important elements, such as titles and calls to action, will need to be among the most clearly visible elements of the page. By contrast, less important elements should not stand out so much that they draw attention away from what is important.
The Importance of WhitespaceOne of the key concepts of modern Web design and content is that less is more, and while many novice designers are often tempted to deviate from widely accepted standards by introducing unnecessary clutter into their projects, they will only succeed in hindering the user experience. In the case of typography, some designers make the mistake of filling up their pages with walls of text, but doing so can greatly hinder readability.
A good website design should make use of plenty of extra space. With content such as blog posts, keep the written content standing out and clearly readable by using a white background and plenty of blank space either side of it. Note that the columns each side of the text can also contain a background image, pattern or other solid colour; they don't literally need to be blank. Also, to prevent your readers from getting lost as they read you content, be sure to use an adequate line spacing; 50% of the text size tends to work best.
Typography Tools to HelpGiven the vast range of options now available to designers, a little creativity and a solid understanding of what works and what doesn't will go a long way to defining a suitable and effective typographic style for your website. However, there are also many useful tools to help simplify matters. Here are a few of the tools that we use on a daily basis:
Written By: Scott Whitehead