4 Common Typography Mistakes to Avoid on Your Website

Typography as a general concept is centuries old, dating back to even before the advent of the first printing presses. It is an art form with a vast body of theory behind it. However, in the digital age, where so many organizations and individuals are involved in, “publishing,” via the internet, what typography represents has undergone great evolution. To nutshell it, we are talking about the art of using text in the most clear, aesthetically pleasing, and in many cases functional way possible. Interestingly, every website in existence that has text within its content makes use of typography. Not always necessarily good typography, but typography nonetheless. So I wanted to examine a few of the most common errors website publishers make as it relates to their text and typography.

Mistake #1:  Planlessness Punished

The first, and perhaps most overall important, error to avoid is not being 100% deliberate and strategic about every typographical decision you make. If you’ll excuse a brief digression for analogy’s sake, one of my favorite hobbies is playing and teaching chess. And when someone is first learning chess, invariably they will make moves for no reason beyond, “it’s my turn so I have to do something.” I always tell these players, “never make a move that you can’t justify with a sentence.” Returning to the subject of your site’s typography, every decision you make should be deliberate and strategic. You should be able to justify it with a sentence.

Making a sentence red? Justification: I want to get your attention.
Using a 24 point font size? Justification: I want to steal attention from the red sentence.
Writing using a bullet list? Justification:

• Really
• Desperate
• For
• Attention
• It
• Seems

Effective typography is planned and is backed by explanation. And that explanation is backed by the plan. Below we’ll be talking about some of the specific decisions about which you’ll want to be deliberate and strategic. But for now, one last piece of advice ported from chess strategy: usually even a bad plan is better than no plan.

Mistake #2:  Lacking Empathy

Congratulations! Someone is on your website and reading your text. And if you want to increase the odds that they stick around, you will need to cater to your reader and make your text content as effortless to consume as possible.

Notice how we are into this section’s second paragraph already? The transition might have been a bit premature, but served to illustrate the point that readers are off put by giant walls of text. Many people would skip over a paragraph offering eternal life and endless riches if they didn’t see a paragraph break. So mind the perceived digestibility of your text.

Additionally, your choice of font and font size speak to your text’s legibility. In the older school typographical arts, before everything became computerized, legibility was the name of the game. And the secret to keeping your readers is to realize that it still is. While not so popular with college professors, a 16 point type size seems to be the accepted mean among internet browsers (the people browsing, not the programs displaying the pages). Likewise, shorter line widths and liberal spacing between lines are appreciated by readers, whether they realize it or not. Keep your readers comfortable with your text before they have a chance to be uncomfortable!

Mistake #3:  Failing to View Through Brand-Colored Lenses

By now it should be evident that your typographical choices should be deliberate and strategic, especially since the whole first Mistake section stated so explicitly. That’s all well and good, but what should be the overall strategy (aside from legibility of course)? Your website exists to be representative of something. It could be anything from the carbonated beverage conglomerate of which you are the CEO, to a collection of photos of what you’ve eaten for lunch. No matter what your website serves to represent, it has a distinct identity. Or, to put it in buzz-word terms, it has a unique brand.

This brand identity should be what your deliberate strategic typographical decisions serve to adhere to. In viewing the websites of successful companies and/or people, one will note that their choices of type-face, color, placement, and content tend to be consistent with their respective brands. This is not accidental. Color, for example, is the number one thing consumers mentally associate with brands. If I say, “Coca-Cola,” odds are your mental image projects their signature red, as opposed to a glass of brown liquid. This is not accidental either. Likewise, a small square of royal blue with a very specifically type-faced lowercase ‘f’ occupying its right half, has been so deeply ingrained to say, “Facebook” to people, it’s on a fully subconscious level. And at the risk of sounding repetitive, I feel I should mention this is not accidental.

So when making your typographical decisions, it is strongly advised that you keep front and center in your mind the specific brand identity of your website (or more specifically, what your website represents). And from there each choice should stay consistent to the Pavlovian association you’re ideally cultivating.

Mistake #4:  Choosing Color Haphazardly

Color is functional. And not just to force brand associations. Color conveys mood and tone. Color elicits emotions, either subtly or overtly. Your website that sells automotive parts most likely does not have a yellow and pink based color scheme. There is an abundance of theory regarding each color’s specific functionality, both from a typographical and fine arts standpoint. And when making color-based decisions, knowing some of this theory can help in being deliberate and strategic about it.

Typographically speaking,

• Red tends to express urgency.
• Blue tends to garner trustworthiness.
• Yellow tends to project happiness and excitement.
• Green tends to instill a sense of value.
• Orange tends to call for action of some kind.

From the fine arts side of things, the functionality of color is a vast topic that, to go into in great detail, would not only be beyond the scope of this article but would also be a significant example of Mistake #2 above. However, in the interest of not leaving you hanging, I will note that the concept of color temperature is key to evoking mood and emotion when creating a work of art (which is, of course, what your website will be). Reds, oranges, browns, and yellows are the warmer colors, while blues, greens, and purples are traditionally the cooler colors. But then a purple that is closer to red than to blue would be said to be a, “warm purple.” Likewise a yellow that is closer to a green than to an orange is a, “cooler yellow.”

You can see why I wanted to spare you going too far down this rabbit hole. But the takeaway here is that you would be well advised to use color in your typography, and overall website design, in a strategic functional way. Experiment. Have a goal in mind and use your color choices to achieve it.

Maximizing the X of your U’s

This is certainly not an exhaustive list of typographical errors. For example, bonus Mistake: failing to edit and remove typographical errors (aka. typos). But hopefully this served as a helpful primer for deliberate strategic decision making as it relates to your website’s text-based content. Typography is typically a very subtle art form, so rarely will a reader leave your site in disgust over a line of 18 point green text. However, your business and/or readership can very much rely on the comfort level of your visitors, both consciously and subconsciously. In web development we often speak of a User Experience, or UX. And typography in no small part speaks directly to the effectiveness of your website’s UX. So when you’re plotting out your site’s content, keep the above Mistakes in mind, try to avoid them when possible, and if you must for some reason commit one, make sure you can justify it with a sentence.