Have you ever entered a website and struggled to read the content? Or had a feeling like “something isn’t working” without being able to figure out why? The reason, often, is a common typographical errors in web design.
Most websites out there are made by people with little knowledge of typography. And that’s fine, of course, but it often leads to a whole series of errors that are absolutely avoidable. In practice, these errors are all elements that, on a website, reduce its usability.
Think that even sites and portals with millions of daily visitors, like Wikipedia, make exactly the common typographical errors in web design that I’m going to tell you about!
Most Common Typographical Errors
1- The text column is too wide
Have you ever noticed that 99% of existing books have a text column layout that is generally always the same? That is, with very precise proportions between width and height?
This happens because hundreds of years of publishing history have taught us that there are text widths that are more or less optimal. More or less comfortable to read .
A column of text that is too wide is difficult to read (as is a column that is too narrow. But this is rarely seen online). If the paragraph you just read, for example, had been written on a single line, you would probably have lost the thread of the conversation before halfway through.
An example of this type of error comes from one of the most visited websites in the world: Wikipedia.
The columns of text on Wikipedia, especially when read on a very large monitor,such as a 4k. Are definitely too wide and unnecessarily strain the reader’s eyes and mind.
Because when the lines are the right length, the path our eyes take from the end of one line to the beginning of the next is not complex. If the line is too long, however, it is difficult to find the beginning of the next one .
The rules of readability that apply to books obviously also apply to the web. Always try to set a good width for the text column.
What text column width should I choose?
To summarize, it depends on the number of columns:
- Column of text inserted in a grid with other columns of text (so more than one column): approximately 7-8 words per single column.
- Single column of text (like for books or blogs like this one): about 50-75 characters .
2- The bad use of bold and italics
Bold, needless to say, is used to highlight a key concept and to make the reader immediately focus on a series of things you are trying to communicate. The moment you decide to write an entire paragraph in bold, you defeat the very purpose of bold.
A paragraph written entirely in bold and one entirely without bold are exactly the same thing in the eyes of the reader. Since highlighting everything or highlighting nothing are equivalent actions.
- Use bold and italics only to emphasize that part of the speech that really deserves to be underlined.
- Use bold and italics only to emphasize that part of the speech that really deserves to be underlined.
Do you see the difference between these two paragraphs? Which one seems more readable to you?
How to use bold and italics in texts
Bold should only be used for expressions or words that need to stand out in the text. While italics should be used for set phrases, quotations, speeches, scientific expressions or foreign terms .
Just as you would never draw a red heart on a red background, don’t highlight words or phrases within sentences or paragraphs that are already highlighted, because then no one will ever notice them.
3- The bad use of capital letters
The third most common typographical errors in web design is a bit of a variant of the previous one. Even CAPITAL LETTERS, like italics and bold, have a precise function and are not simply a decoration!
Capital letters should only be used in special cases, such as titles or subtitles. If you WRITE ALL YOUR TEXT IN CAPS… well, that’s the equivalent of shouting.
This is because uppercase letters are more difficult to read than lowercase letters due to the well-separated and detached shapes between one letter and another.
So writing an entire text or even just an entire paragraph in capital letters is equivalent to making it less readable. As mentioned before, uppercase letters should be reserved only for titles or subtitles. And even then, only if you really can’t do without them.
4- Poor visual contrast between text and background
Many websites have started to insert dark gray text on light gray backgrounds. Or light gray text on white backgrounds! Thus causing a decrease in contrast and, therefore, readability.
But to ensure adequate readability, the words must stand out to the eye, be legible, defined and perfectly outlined.
If I am interested in information, I want to read it clearly and cleanly: it is the text that must harmonize with the human eye, not the other way around!
So don’t try to emulate the Apple website, which was one of the brands that started this “trend”. But keep in mind the basic optical laws that regulate the contrast between text and background.
More precisely, the minimum contrast , to ensure readability, should be equal to or greater than a ratio of 4.5/1 , below which, the text becomes increasingly illegible as the ratio decreases.
5- Background color too bright
What could be worse in the world than a text written in total absence of contrast? Simple: a colorful background, especially if it’s very bright or too saturated.
Since sites and pages with fuchsia backgrounds really exist, not just in urban legends. Before you get such an idea, take a good look at the final effect and be properly horrified. Bad taste aside, you may have noticed that many websites display system error messages using a red pop-up with white text.
I explained to you once how all the colors we use leverage a specific psychological component to convey a message. Road signs that refer to danger are red, because we associate red with strong emotions and therefore, we are more likely to stop or pay attention when faced with a stop sign.
But this doesn’t mean that everything has to be red! It’s much better to try to optimize the graphics of an error message like this by inserting the “right amount” of red.
6- Excessive use of centered alignment
In the Western world we write and read by moving from left to right. Written texts, therefore, must respect the natural flow of the gaze and must be aligned in this way.
That’s why texts should almost always be left-aligned or left-justified. And only in rare cases use different alignments (right, center, etc.).
Trying to be original at all costs and centering your text doesn’t make your work more creative, it just makes it, well, boring.
A centrally aligned headline can make a difference, depending on the effect you’re trying to achieve; a quote or an excerpt from an interview, too; entire paragraphs, no! Centrally aligning entire paragraphs of text simply doesn’t make sense, because, once again, it reduces the readability of that paragraph.
Centered alignment can be useful for singling out parts of speech, for drawing attention to a short aphorism, but certainly not for convincing the reader that the content of entire paragraphs should occupy a central place in his mind.
7- Line spacing too thin or too large
Here we are at the last of our 7 typographical errors that are seen on the web: line spacing that is too thin or too large. If you’re wondering what a leading is in a text, let’s take a small step back.
The leading , in a text, is nothing more than the height of the line of text and therefore the management of the space between the lines of text. It serves a bit like the lines in notebooks that were used in elementary school. There were those with giant lines and those with small lines.
The line spacing, being modifiable both on a website via CSS and on any program that manages text, can be more or less large. And so you have to set it up right.
In fact, a line spacing that is too thin tends to bring the lines of text too close together. While a line spacing that is too large risks dispersing the parts of the text and giving the mind an unjustified break between the various lines of the paragraphs.
To obtain a balanced and harmonious text. It is therefore necessary to set the line spacing between 120% and 145% of the height of the body text.
That is, if your text has a hypothetical height of 10pt. The optimal line spacing is between 12pt and 14pt, as is the default in almost all page layout software .
This is a general rule that does not take into account the differences between the various fonts and typefaces used, but as a general rule, it is a rule that always guarantees you will be protected from common typographical errors in web design, whether by excess or by defect.