Usually, we start to notice typography in two situations: when it’s very bad or when we have to make a decision on which font to choose for our project. It’s not easy to find good inspiration if we don’t know where to look for it, who to treat as a role model, or what are the rules. What makes typography bad and how to avoid it? You will find out from the below list of 11 common mistakes and, at the same time, rules.
1. Ignoring important details
It certainly isn’t comfortable to read a monotonous text, with too long or too short text lines, too little or too many characters in a line. The perfect amount of signs in a line is 45 to 75. Another problem is a too tight or too wide letter or word spacing, a font of low readability, and poor letter construction.
2. A font without diacritics
If we design a document for the language with diacritics, it’s very important to check if the font contains all the necessary characters. The program will exchange letters into default ones, sometimes very similar but looking a bit different — catching our attention, making us pause. Below are a few examples of fonts that are not well-suited to long texts.
3. Ignoring rules specific to certain languages
I’m familiar mostly with Polish typography and I must admit that we have a lot of rules specific to our language. Similar can be found in Czech and Slovak languages. For example, so-called “orphans”, i.e. lonely vowels at the end of the line, make for a glaring mistake. There is even a WordPress extension called “Sierotki”(Polish for orphans)and a special script for InDesign that quickly solve that issue.
4. Whole words written in script typeface with caps lock on
One of the other common and incorrect tendencies is to use script typeface to create words or sentences that contain only uppercase letters. Swashes could seem to be interesting but it’s better to use them wisely and with deliberation. They badly influence text readability might be disturbing or even irritating. These typefaces are designed for totally different purposes, they imitate handwriting.
The lowercase was developed for fast writing. If we tried to write the same text in uppercase and lowercase, we would notice that the first one takes much more time. Currently, this pattern has a huge impact on our letter perception habits, as well as the attitude to designing. I personally don’t know any script typeface that would look good in a text containing only uppercase letters. If we want to highlight some words with this kind of font, it’s better to check if it contains some nice swashes. Usually, we add them at the beginning or at the end of the word. In the middle of the word, we could potentially consider adding more decorative ascender or descender in the following letters: p, g, d, t, j, or y. They look very natural, interesting, and simply correct with a swash. The general rule is that the first letter should be big and the following ones small, even in names on the invitation card.
5. Letter shapes borrowed from other languages
Another issue related to script typeface is a commonly used French “z” and “r” or even uppercase “G” resembling “J”. If we have two very similar typefaces, it is definitely better to pick the one with more regular shapes. With script typefaces, it’s not easy because those letters are in the majority designed in this borrowed shape. It results from the fact that the French “z” and “r” are easier to write and connect with other letters in handwriting.
Regarding the above-mentioned uppercase “G” looking like “J” in digital text, it looks quite eccentric. We are not used to it. I was surprised myself when I saw it in a font, so I decided to investigate where it came from. I asked people on one of the typography Facebook groups. It turned out that in the USA they are taught to write “G” in this shape in calligraphy classes.
6. Fonts that don’t fit the character of the content
We divide fonts into a display, body text, and cursive/italic. Using them in unsuitable places could also strongly affect text readability. Display fonts perfectly fit titles, headlines. Body text, as the name suggests, is best to used to create a bigger piece of content, more elaborate information. We should use this font when we attempt to keep someone focused. These fonts are made with the intention to provide the main information and are highly readable. Cursives are better to use in headlines or highlighted text. If we used it in longer parts of the text, it would be exhausting to read it. If we put text into those categories, it’s easier to create the optimal information architecture. The headline is properly highlighted, the main text is well-arranged. The position of the headline part and body text is very important in the SEO context.
In professional typography, there are other variations too. If you are interested, I recommend this book to see more examples of them: “The Geometry of Type”, S. Coles.
7. Complicated composition
An equally important rule is “less means more”. We create content with a specific purpose, so let’s plan the page in a way that makes the intention obvious at the first sight. It doesn’t matter whether we want to promote it mainly on social media, with help of an e-book, blog, flyers, banners. If we use a strong pink color, we should make sure we don’t overuse it. On the landing page, for example, the most important, eye-catching element would be the “call to action” button(e.g.buy, order, read more), something that we want to be particularly highlighted. In case of doubts, it’s always better to pick a simpler arrangement, test a few solutions, and remember to be consistent in all the materials.
8. Too big or too small font size
The letter sizing for a website and for print differs. In most of the sources, the most common font body size for a print is 12 but I designed books with the font in size 10 and flyers in size 16, so it could vary in real life. Same with text for the internet. The range is sometimes even between 14 and 22. The most common size, typically used in books or blog posts, is 16. But it’s just an approximate size because fonts and screens may vary. Before we choose the perfect font size, we should pay special attention to x-height values.
In the first picture above it’s Verdana. It was designed for internet purposes. It will be more readable in a smaller size. The next one is Baskerville, it will be less readable in a smaller size and it’s better to pick a little bigger size for it. That’s why giving a precise number doesn’t always work. A lot of various factors influence the perfect font size in the project. It’s well worth considering where our audience will mostly watch our graphics, whether they will be older people, possibly with poor eyesight, and soon.
Despite the fact that Verdana was designed for the internet, I recommend looking for another typeface. The amount of good fonts on the market is enormous and Verdana as a default browser font won’t make your project unique. In addition, its most important feature is readability on screens, not a good or interesting look. It was released in 1996 and screens are much better now, image quality has improved greatly.
Sometimes, out of curiosity, I check the name, size, and font-variant on a page using a Chrome extension called Font Ninja. Thanks to it, you can compare how different sizes look on pages.
9. Pairing two similarly looking fonts
As I mentioned, fonts are divided into three main categories: display, text, and cursive. They may also occur in different weights and different slant amounts, like regular, italic, slanted, bold, thin, light, heavy, and medium. If we pick the font wisely, we will be able to build reasonable and consistent information architecture within the scope of one family. Two similar fonts next to each other will be misleading, boring and additionally, someone might think that we made a mistake. With the current huge amount of possibilities, the choice of two similar fonts seems to be unjustified.
10. Using more than two different fonts
On the other hand, one of the most common rules is not to use more than two fonts. It’s hard to disagree with it. This kind of attitude organizes the text. In a simple project, two nicely composed fonts seem to be the maximum. If we choose more, we risk that it results in chaos in our publication. If you have good reasons, you can obviously use more than two. Rules are made to be broken but it should be done mindfully. In more complex projects it’s best to pick one font that has a big family. It’s called a superfamily. It means that it contains a lot of variations under one font name. The simplest solution is to pick one display and one body text typeface.
11. The worst fonts in the world
Fonts that are commonly deemed “the worst” aren’t really always that awful. As the best example, we could use the hero of countless memes: Comic Sans. It’s not an extremely bad font. It’s just a font that was used multiple times in an incorrect way. How would you perceive some serious text written in a child’s handwriting? Sounds ridiculous, right? That’s how it’s bad reputation was created. Many people think it looks “friendly”, that’s why they use it randomly and make it look unprofessional. However, just because it is known as one of the worst fonts, it’s best to avoid it. To me, the list of fonts best to be avoided should also include Papyrus, Arial, Verdana, Times New Roman, and Curlz. Besides, you can find a lot of lists of this kind on the internet. The arguments against them vary. The most common ones are: the font being overused, using it for a different purpose than the one it was made for, bad design, or construction. Most people don’t pay attention to typography, which is why they have no idea that some fonts are being overused. It’s always better to google the typeface and check it’s “safety level”, make sure it was designed for our specific needs.
Sticking to the rules and the sense of it
As you can see, the rules or directions are not only about aesthetics. It’s not only: “I like it” or “I don’t like it”. The way in which we perceive the text as well or badly-arranged was repeatedly tested and has a huge impact on whether our reader will be willing to read the entire message. Our sight jumps through the text by so-called fixations and saccades, and its path has been well-researched with eye-tracking devices. The fewer stops our customer encounters, the higher the chances that he will do it till the end.
Bad typography is also a signal for Google browser. When our text looks bad and has a high bounce rate, we will get a lower position in the search results. Even if the text is valuable, our reader might get tired too fast with a text written in cursive or display font, or in weight heavy bold. It is said that good typography is invisible, meaning not intrusive, readable, adjusted to a place, style, and customer. Applying the above principles will simplify your pursuit of a perfect design, allowing you to create content that pleases the eye, instead of bothering it.