In the early days of the Web, designers were far more limited by technical constraints than they are now, particularly with regards to the various typographic styles that they had available to them. However, instead of having to choose from a small selection of Web-safe fonts and relatively simplistic design styles, designers can now use typography to give their websites a more unique and artistic style.

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 Size

While 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 Contrast

Most 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 Hierarchy

Having 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 Whitespace

One 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 Help

Given 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:

Adobe Typekit

A highly versatile and scalable solution for both Web and software developers, Adobe Typekit is a subscription-based service that provides access to a vast library of more than 4,200 Web fonts depending on the package you go for. With a Typekit account, Web designers will have the ability to use any font from the library without actually having to embed it on their own websites. A 30-day trial is available too.

Font Squirrel

A free alternative to the popular Adobe Typekit, Font Squirrel contains an extensive and constantly growing database of license-free fonts that are free for commercial as well as personal use. While some of the fonts are hosted on the website itself, others are hosted off-site, and accompanying the previews are rows of symbols detailing what the font may be used for.

Typecast

Typecast is a highly effective tool designed to help designers to actually define a suitable visual style for their projects. It checks your designs for any potential issues with rendering and readability across the full range of Internet-enabled platforms, and it allows you to experiment with more than 90,000 fonts to help define a unique style, and it allows you to create a working prototype before actual publication.

Written By: Scott Whitehead