An introduction to typography — part 2
How to create contrast, what font size to use and what is the difference between kerning and tracking?
By Katarina Fegraeus. First published on my personal blog.
This is part 2 in my typography series where I’ll talk about creating balance and contrast, what font size and leading to use and the difference between kerning and tracking. If you’ve missed part 1 about selecting a typeface, you can find it here.
Hierarchy & contrast
After you’ve chosen your typeface(s) it’s time to start creating balance in the text.
Headlines should be bold and visible (also not too long) to capture the reader’s attention. ‘Bold’ doesn’t always mean you have to put the headline in bold, it can also mean making it bigger than all the other text, giving it plenty of whitespace, using a different colour, etc. The options are many.
If your headlines, sub-headlines and other information in your text is too similar to the body text, the reader will be overwhelmed.
If it’s a long text, consider having sub-headlines (they are usually smaller than headlines and sometimes the same font but different style as the body text) to make a pause for the reader.
Long texts can also benefit from a quote somewhere in the middle of the text. Make it stand out (by size, colour, weight) from the rest of the text and don’t make them too long.
The body text (apart from foot notes) should be at the bottom of the hierarchy. If your headlines, sub-headlines and other information in your text is too similar to the body text, the reader will be overwhelmed.
As I mentioned in part 1, if the text appears on a photograph or coloured background, make sure the lines are thick enough to get the right contrast. The colour should also be adjusted so it’s not too similar to the background colour. I’ve seen far too many designers ignore this and what’s the use of a text if it’s not visible?
Sizing
Play around with size, large headlines can look amazing. The body text is more sensitive when it comes to choosing the correct size, since this text mainly is for comfortable reading.
If it’s too large, there will most likely be too few words on each line (more on the line length further down) and if it’s too small, it’ll be impossible to read (especially for older people and young designers tend to have better vision than most).
Sizing & printed text
It’s hard to judge on a screen how big the text will look when it’s printed. Make sure you print it out in 100 % before you send over that final file. This is especially important when it comes to very large prints, I’ve done a few 2000x5000 mm banners and the original text was almost always too small before I printed it out and adjusted it.
Your paragraph text adjusted for mobile can become unreadable on a big screen…
Sizing & digital text
With responsive sites and a million different screen resolutions, web typography requires more attention than on prints. A headline made for desktop can look huge on a small mobile screen and your paragraph text adjusted for mobile can become unreadable on a big screen. Read more about responsive typography here.
Leading
Leading (or “line-height” in the digital world) is easiest described as the space between lines of text. The most common in body texts is +2 points (10 pt font size/12 pt leading) and it’s a good benchmark. However, most texts benefit from manual leading.
Long texts are usually easier to read if you increase the leading. In that way the eye doesn’t jump between lines, which can happen when the leading is narrower. Headlines and display texts almost always need tighter leading because the amount of space between the lines appears larger.
One size never fits when it comes to leading so the best practice is to manually set the leading on each piece of text.
Line length
The length of the line is important for the overall readability and is normally measured by the number of words or characters on each line. Point size of the font affects the number of characters per millimetre, so measuring the line length in mm or inches is less useful.
If the line is too long, your brain doesn’t get the breather it needs to comprehend the text, the same result as a long sentence without punctuation marks.
Aim for an average line length of 45–90 characters including spaces or 15–18 words.
Kerning & tracking
Adjusting the space between characters is called kerning and tracking. The difference is that kerning is the spacing between individual characters while tracking controls the space between groups of letters. Kerning and tracking are the finishing touches and can make a huge difference on the final text.
Widows = final line of a paragraph begins a new column or page. Orphans = paragraphs end in single words or part of a word.
Kerning
Most typefaces have a good default kerning for specific characters, but some free typefaces suffer from poor default kerning, making them difficult to work with.
I think, if you’re using a well made typeface, adjusting the kerning while setting a longer body text is unnecessary. It’s more important when you’re working with display text, headlines or logotypes because the spacing will be more visible.
Tracking
The most common use of tracking is to make the lines even and to eliminate widows and orphans (Widows = final line of a paragraph begins a new column or page. Orphans = paragraphs end in single words or part of a word). Use the tracking on the entire line instead of a single word to make it less noticeable.
Exaggerated tracking has also become very popular when setting headlines in an uppercase sans serif. Whether or not it’s tired and overused is up to you to decide…
Thanks for reading. Hopefully this will help when you’re composing your text. Please contact me with any feedback. This article (and more) can also be found on my personal blog.
If you liked this article, please hit the little green heart at the bottom.
I’m a Freelance Art Director & Designer currently living in Lisbon. Identities & branding, web design and typography excites me. I used to work at Animal Stockholm as an AD & Designer.
