Typography plays a huge role in making designs appealing and legible to users. Whether it be a website or a graphic illustration or a newspaper advertisement, good typography can make the audience fall for your brand, and bad typography can make them develop a negative feeling towards it.
Typography is the arrangement of letters and words to make a given content clear, easy to understand, and visually appealing to the reader. Good typography creates effortless understanding, set the mood and affect emotions, and increases conversions.
Good typography may be something that most users don’t actively notice or appreciate, while bad typography is quickly noticed, and elicit a bad reaction. Many a time, you may have left a website simply because of the font size. Small tiny fonts that are closely spaced together is one effective way to ensure a high bounce rate for your website. Or you may have noticed, particularly in old websites, the use of sharp font colours or shiny background colours. Those websites are quickly noticed.
But at the same time, most people rarely notice that good designs almost never have a pure black font. A well-designed brochure or a pamphlet is easy on the eyes, they present the information much like a calm mentor giving career advice to a student. Bad typography may give the audience the feeling they have when they run away from an aggressive salesperson.
Important elements of typography
Typography has many different elements such as cap height, X height, ascender, descender, etc. Let’s have a look at some of them.
Baseline
This is an imaginary line on which the text sits.
Cap height, Ascent, X-height
Cap height is the height from the baseline to the top of flat capital letters, like M or I. For this font, the cap height is the height of these two letters.
For lowercase letters with an upward stroke, such as ‘d’, the height of the upward stroke is higher than the cap height. These upward strokes are called ascenders.
For the lowercase letters with a downward stroke that extends below the baseline, such as ‘y’ the downward stroke is called a descender.
X-height is literally the height of the lowercase letter ‘x’ from the baseline. It is also the height of most lower case letters in a font.
Typographic trends.
Variable typefaces.
Variable typefaces make it possible to use a single font file for many variations of a typeface. Earlier, if you wanted to use three variants, for example, bold, regular, and italic of a font, you needed separate font files for each of them. With variable typefaces, you can use all the different variants of a font with a single file.
Extreme typefaces
These have to be used extra judiciously, as too much of them can be overwhelming, and make it difficult to understand. The person reading the content must be able to read it effortlessly. When used in a limited manner, extreme typefaces can give your design a bit of flair and make it eye-catching.
Artistic typefaces
These are usually made for one specific event or brand. You can see them commonly in movie posters and all. They often make the brand or the event stay in the memory of the audience, and are easily identifiable.
Top mistakes to avoid in typography
Spacing
If you’re just starting out, spacing is one of the first things that you need to be careful about. This is one mistake that I have often made, and one mistake that I didn’t notice initially.
Tracking
Make sure that your letters are not too close together, particularly when the font is small.
Make sure that the space between the letters is not the same as space between words. This is what happens when they are equal.
Make sure that there is sufficient space between the lines. While adjusting line spacing, you have to look at the readability of the textual content, as well as the overall design. Sometimes, even if the letters are spaced apart enough that they’re readable, increasing the spacing a bit more will make the overall design look less cluttered.
But then again, too much space and the text may look like they’re two different sections.
Line length
Most designers and researchers recommend a line length of around 50 to 70 characters including spaces. This number is somewhat ideal so that a reader won’t have to move their eyes too much to the right to read, and they won’t have to keep moving their eyes to the next line to continue reading. To give you an extreme example,
this
is
what
happens
when
the
line
length
is
too
low.
And when the line length is too long, the reader will have to keep moooooooovvviiiinnnngggggg their eyes the way you tried to read that word. It’s uncomfortable.
Wrong font choices
For someone who is new into designing, looking at a whole lot of fonts available in tools like Photoshop, or Canva, you may feel like a kid in a candy store. You’ll want to try all the different fancy fonts available, but it will be wiser for you to stick to commonly used fonts.
Font choices also depend on the medium. If you’re designing a greeting card you can go for elaborate fonts, as people will take their time to read them. But also, set the mood and tone.
But if you’re designing an ad to be put on the roadside, you should use a font that is easy to read in a glance. You don’t have to be a Monet on the sidewalk.
Comic Sans: the font that is mocked. Using Comic Sans is one of the most effective ways to be mocked at your next professional meeting. But, to make your design accessible, Comic Sans is the way to go. In Comic Sans, no two letters are mirror images of each other, d and b are not the same. So dyslexic people find Comic Sans much easier to read than others.
Wrong font colours
Here also, the kid-in-a-candy-store effect is very much possible. If you’re a beginner, just go for soft colours, instead of bright colours. Use softer shades. And as mentioned above, as a rule of thumb, don’t use pure black or pure white colours.
The colours used in a design should complement each other and there should be sufficient contrast so that the text is readable, but not too much contrast that it just blows out the reader’s eyes.
