One of the first things visitors notice on a website is its typography. Many well-designed and effectively structured websites miss out on a host of traffic due to not-so-perfect typography. When a user accesses your website, he or she should be allowed to read, navigate, and perform tasks without any obstacles. If the font you have chosen is difficult to read, the visitor might leave without getting your website’s message.

To make it simple and avoid errors, designers usually use one type of font with a few size differences, but this can create a very dull look, which can also cause visitors to leave. At the other end of the spectrum are the designers who experiment with different types of fonts, using multiple fonts throughout the website to avoid tedium. However, this can lead to a real mess, creating an untidy-looking website. This article discusses the common errors in typography and how to avoid them.

Before discussing common errors of typography, let’s first take a look at the importance of typography for a website and its business.

Importance of Typography on a Website

Imagine you are a user who has just landed on a website. You see gorgeous graphics and calming colors and sit back to take it all in. However, when you try to read the content, you cannot move forward. Various reasons can affect our ability to read the text: the content is boring, the font is not readable, the font is too small or too big, or the font irritates your eyes. As you can see, fonts play a significant role in engaging website visitors. When it comes to selecting a font, the family is not the only important factor; you should also consider font size, variation, and color. When designing a website, you will use more than one font typeface in order to highlight certain features with headings and sub-headings. However, the selection of each font is not a separate exercise; rather, the selection should be coordinated. All types and sizes of fonts should complement each other and be attractive yet be clear enough to read, thereby serving the main purpose of a website (i.e., to share information).

Designers should be careful with shapes, sizes, and proportions. Few designers create beautiful design with the use of just one or two fonts; some create wonders using multiple complicated fonts. Regardless of your approach, you must have an understanding of typography. To avoid major blunders, familiarize yourself with the 10 most common errors when combining typefaces in design.

1. Scale and Proportion

One of the most common errors that designers commit while using typefaces in design is missing out on the scale and proportion. Understanding the scale and proportion of the font is as important as considering the family and type of font. If you choose multiple fonts with different scales and proportions in a design, the entire design will look like a mess and visitors will be confused.

A design with multiple fonts of similar scale and proportion is much cleaner looking and easier for visitors to read. Some fonts of similar proportion that look good and work best when brought together are Georgia and Verdana or Times New Roman and Arial Narrow. Georgia and Verdana are two different fonts from different font families, but both are of similar shape; therefore, putting them together in a design maintains the standard of the design and keeps it looking unique, yet simple and elegant. Similarly, Times New Roman and Arial Narrow are of the same proportion; when you put them together, you create an elegant and clean look. Fonts need not be completely identical nor necessarily be completely contrasting. Identical fonts can create confusion whereas extremely different fonts look messy. Focus on the style and proportion of the fonts and consider the theme being used. For example you can use similar fonts for headings but completely different ones to highlight certain areas or emphasize specific points. Just keep in mind the proportion and scale.

2. Color and Style

Another common error that designers commit while designing a site is with colors and style. Human eyes love colors, but that doesn’t mean you should include every color of the rainbow in a design—unless you want your audience to suffer from color attack. Imagine using two or three types of fonts, four or five colors, and six or seven styles. Visitors will leave your website with a headache! Therefore, it is better to avoid using too many colors. When using more than one color of font, be careful about choosing the design color. Try to select colors that are in the same hue or saturation level so that the colors complement one another and don’t look like a war of colors.

Another important consideration is styles. The style you have chosen should go well with the weight of your design and suit the emphasis of the font you have chosen. One of the simple ways to create a balance in this case is by making big fonts italics. Large fonts in italics lose a bit of their weight and create a balance with your design and template. Similarly, you can use bold for fonts in order to increase their weight and create balance with heavier fonts. Underlining emphasizes both types of font without playing with the weight. Therefore, underlining can be used to emphasize areas with appropriate fonts.

3. Emphasis of Fonts

Designers often use different types of fonts for a design, considering the size, proportion, and shape, but due to carelessness they might ignore the emphasis of a particular font. If you visualize different types of font of the same size, you will notice that a few types of font are more striking than others. These types have a different amount of emphasis and priority. Users tend to visualize words with more priority or emphasis more than others. Even same-sized fonts might create different emphases due to their style or family as well as the colors used. In such cases, the use of multiple fonts is critical. As mentioned earlier, you can make use of bold, italics, and underlining as well as play with the sizes of fonts in order to increase and decrease their weights. Even changing the color of font might help. For example, you can use a lighter shade of color for heavier weighted but less important areas and a brighter shade with lighter weighted but more important areas. You can also use a highlight color in text to emphasize a portion of your content without making any changes in the font. This keeps your design simple and clean.

4. Too Similar is Not too Good

You might think that using similar fonts might help you avoid messy complications in your design. However, using overly similar fonts might be tricky. You use different types of font to create a unique design and highlight certain areas. But if you use exactly similar fonts, the difference is not noticeable. For example, fonts like Georgia and Garamond are very similar; including them together in a design will make it difficult to distinguish them and the look will be something incomplete for the audience.

Users with less experience with designs and fonts will feel the difference in the design without being able to identify the reason behind it. Verdana and Helvetica as well as Aria and Helvetica are also too similar to one another. To avoid this error, try to use at least slightly different fonts so that they serve the purpose of differentiating the two.

5. Too Different is too Complicated

Whereas overly similar fonts lose the distinguishing effect, overly different fonts create too much of a difference, which will confuse visitors. Although designers can create good designs using very different font families, it is tricky and you might end up creating a mess. To be safe, use fonts that complement one another and are not too contrasting. If choosing different types, balance their weight and attributes using bold, italics, underlining, size, colors, and so on. Don’t be confused about being too similar or too different: The trick is to find a balance. Avoid extremes and choose mild differences that will maintain your requirements without creating a mess.

6. Text Readability

Another common error designers make is losing the sense of readability from the text. While trying to create a unique design that looks beautiful, designers miss out on the most important factor: text readability. You display content using different or similar fonts to serve one purpose: to make your users read the content. The main purpose of any website content is to make the information engaging and readable to your users. If you fail in this factor, the whole design work will be worthless. Therefore, the first aim of every designer in combining typefaces in design is to keep the text readable. Be it larger or smaller font of any style and proportion, the font used in your design should be clear and clean enough for your visitors to read the content. In the body of the website, headings and sub-headings tend to be larger and more readable, so you can play with funky typography; however, when selecting fonts for the body, make sure they are readable. Avoid complicated fonts in the body because you cannot add weight to them or make then larger to make them clear enough to read.

7. Consider Family Values

One thing that designers usually do not consider when combining typefaces is the family of fonts; as a result, designers create an overly similar and dull design or an overly different and messy design. To avoid this error, always consider the family of fonts, which will help avoid other problems as well. For example, to avoid using overly different or similar fonts, use variants of the same family. This will help you maintain the required difference without creating a messy look—although it depends on the size of the family. If you are looking for more fonts, look for larger font families; if you have a simple design, start with smaller font families. Also make sure that the font family is large enough to serve your requirements.

8. Keep Large Content Blocks Simple

Another common error that designers usually commit is using different fonts for larger blocks of text. Here larger blocks mean areas that have more readable content. You are already using different styles, sizes, and shapes for your fonts in your headings and sub–headings; therefore, do need be extravagant in the wider content as well as this might make it disturbing for users. Try to stick with single or simple combinations of typefaces within larger content areas, such as paragraphs and larger chunks of content.

9. Quality Over Quantity

Although there might be a huge list of fonts available, that does not mean you need to make use of every single font in one design. When designing a site, the number counts: The lesser the better (not the reverse). If combining typefaces, make sure that you are doing so due to your requirements and not for the sole purpose of using them all. Using different types of fonts for no reason is another common error that should be avoided.

10. Review your Design

The last but not least issue—and one of the most common errors made by designers—is skipping the review process. When you create a design that you like, you need to review it from the users’ point of view. It is very difficult to find mistakes in one’s own work. In terms of website design, you can ask both subject experts and non-experts to review users’ approach to the website. Experts will let you know the mistakes made in the design or technical terms while non-experts will provide feedback of layman users. These reviews will help you to understand your users’ point of view. Therefore, after creating a design, always give it a second thought and review.

Based on these 10 common errors of designers, we can understand the need to make minimum use of font differences, maintain a balance of weight among different fonts, use balanced color, and finally review the final design. The following rules will help you avoid all 10 common errors:

Important Rules for Combining Typefaces

• Consider font family: Using different fonts from same family is a good idea if combined properly.
• Understand the emphasis from the font’s origin: Balance the fonts according to the emphasis being created at a glance.
• Combine similarly proportioned fonts: Make use of similar proportions in fonts when combining typefaces.
• Limit combinations to requirements: Limit your combinations to only those required and avoid using combinations for vague reasons.

Every designer should follow the four rules to avoid the 10 most common errors in combining typefaces.

Examples

Some great examples of effective use of typography in web design.

HappyCog

PulpFingers

Tim Roussilhe

Harlo Interactive

Web Typography for the Lonely

Miiks

Krystalrae

Denise Chandler

Fffunction

The UK Energy Consumption Guide

DesignZoom

Tokio Lab

Austin East Ciders

Talent Garden