10 Tips On Typography in Web Design

by Nick Babich

Communication plays a vital role in design —it’s essential to establish a clear connection between the website and user and to help your users accomplish their goals. When we talk about communication in web design context, we usually mean text. Typography plays a vital role in this process:

More than 95% percent of information on the web is in the form of written language.

Good typography makes the act of reading effortless, while poor typography turns users off. As Oliver Reichenstein states in his article “Web Design is 95% Typography”:

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.

In other words: optimizing your typography also optimizes your user interface. In this article, I will provide a set of rules that help you improve readability and legibility of your text content.

1. Keep The Number of Fonts Used At a Minimum

Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.

In order to prevent situation like this one try to limit the number of font families to a minimum

In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire website. If you do use more than one font, ensure the font families complement each other based on their character width. Take the example of fonts combinations below. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Baskerville and Impact (right) where the heavy weight of Impact vastly overshadows Baskerville.

Ensure the font families complement each other based on their character width

2. Try To Use Standard Fonts

Font embedding services (like Google Web Fonts or Typekit) have a lot of interesting fonts that can give your designs something new, fresh, and unexpected. So what can go wrong? Actually, this approach has one serious problem— interesting fonts can distract users from reading. Users can spend time thinking about the fonts that designers used rather then reading the text.

Unless your website has a compelling need for a custom font, such as for branding purposes or to create an immersive experience, it’s usually best to stick with the system fonts. Keep in mind that good typography draws the reader to the content, not to the type itself.

3. Limit Line Length

Having the right amount of characters on each line is key to the readability of your text. It shouldn’t be your design that dictates the width of your text, it should also be a matter of legibility. Consider this advice on readability and line length from the Baymard Institute: