Understanding typography: Character space, kerning & tracking
Welcome to my first blog of the understanding typography series where I’ll be explaining type or typography concepts to you in a simple way. I hope you find the information helpful for improving your typography or type compositions.
Let’s get started!👇
1. Character space
Whenever you type (for instance in Figma or Ai) a bounding box appears around the letterform. The box is the combination of the character width and left & right side bearings.
Side bearings: Consider them as the left & right margin type designers give to each glyph to prevent them from running into each other when they are written to form a word.
A combination of right-side bearing & left-side bearing is called metrics. Metrics define the space between two adjacent characters or how far the letters will be from each other, which we refer to as character spacing (not word spacing, which is the space between two words).
Before we move on to kerning and tracking, it is important to understand the negative space around basic geometric shapes (square, circle, triangle).
As compared to squares, circles & triangles have a smaller surface area, causing more negative space around them and making themselves appear smaller. To restore the visual balance, we slightly increase the size of circles & triangles.
An increase in size increases the height of the shape. The degree to which the height is increased is called overshoot.
The same overshoot principle is applied to the letterforms to counter visual imbalance which resembles circular & triangular geometry, e.g., a,o, b, d, A, V, W, M, O, C, and Q, etc.
2. Kerning
Kerning is the process of adjusting the space between two specific characters to promote a visually pleasing and rhythmic flow between letters.
Kerning is generally used in logos, posters, headlines, and other places where the irregular spacing between the letters is evident.
But how is it done?
You are familiar with the negative space that geometric shapes create around themselves, so kerning shouldn’t be too difficult to figure out. It is that negative space that defines whether the kerning will be normal, open, tight, or very tight.
- If you place straight edge letters, for example, H next to round letters, for example, O, this is usually considered normal kerning. We use this as the basis for adjusting the kerning between other letters.
Let’s illustrate other kernings by placing two squares and two circles adjacent to each other.
- The spacing between shapes 2–3 is normal kerning. Hence, no change should be made between them.
- The space between 1 and 2 is less than our reference kerning (2–3), so we need to open up the space between 1 and 2 to visually balance out the space between them. This is known as open kerning.
- In the same way, the perceived space between 3–4 is greater than the space between 2–3, so we reduce the space between 3–4. This is called tight kerning.
Wait! What about triangular shapes? 🤔
Let’s understand this by going back to the shapes again and placing circles and triangles next to each other at equal distances.
In the above image, you can see that the negative space around the triangles is so large that the space perceived between the two triangles is even larger than it is between the circles.
Consequently, letters that feature triangular designs should be placed much closer together, requiring very tight kerning. For instance, this can be seen in letter combinations such as “wx” and “vx.”
Sometimes, while kerning, they run into each other and form a ligature.
Ligature is simply the act of tying up. During the writing and typographic arts, ligatures occur when two letters are combined to form one. E.g. Ampersand(&) is the ligature of E and T.
👉 Here’s an image from Netflix. The movie is called THALAIVII. The text is so tightly kerned that I V I looks like M. Decisions like these alter the meaning of the text as a whole. These should be avoided.
3. T R A C K I N G
Tracking (also known as letter-spacing in CSS) is defined as adjusting the horizontal space between letterforms over a range of characters.
Tracking adds or reduces the same amount of spacing as opposed to kerning, where you adjust spacing individually.
If we reduce the spacing between letterforms, we call it close tracking and if we increase it, we call it open tracking.
TEXT SET IN ALL CAPS IS DIFFICULT TO READ AS COMPARED TO TEXT SET IN LOWERCASE. 😥
The text set in all caps is difficult to read as compared to text set in lowercase.💕
Therefore, all caps words have open T R A C K I N G to increase the space between the letterforms and facilitate our eyes’ movement through the increased space and understanding of the shape.
Why does this happen?
In the words of Ellen Lupton, “ Capital letters being square, prefer to keep a little distance from one another”.
In addition to that, we tend to recognize letterforms by their shape. Since all caps letters have the same height, there is less shape contrast when compared to lowercase letters, and therefore all seem the same. E.g. AMNWXYZ or CGOQ or BDPR.
Shape contrast: The difference in the shape a letterform w.r.t. each other.
👉 All caps have one top edge and one bottom edge, whereas lower case letters have two to three top and bottom edges depending on ascender and descender. Hence, there is more shape contrast.
👉 Letters in all caps have similar shapes and contours, making them difficult to recognize with ease in running text at a small point size, whereas lowercase letters have a distinctive shape and height that make them easier to comprehend despite having the same contour shapes. Below is an example:
👉 All caps or small caps text set in small point sizes requires open tracking. The following examples of two books; The Boy, The Mole, The Fox, and The Horse, and The Little Book of Comfort, where the titles of the books are given open tracking.
👉 Big and bold headings: It is not always necessary to use open tracking for all caps, for example in big and bold headings. In the Swiggy’s and The Prestige’s examples below, the text is set in all caps for the heading, and the title has almost no tracking. It seems like they are tightly kerned.
👉 Condensed typefaces: As their names indicate, condensed typefaces require intimacy. However, we need to take care when using them. They can work well without open tracking for titles with little text and heavy font weights, such as the Money Heist title, which is depicted below.
However, they are difficult to read at small font sizes and regular or light weights, so it is required that they are given open tracking. For example, the PART 5 text that appears underneath the title has open tracking.
If you’re curious about condensed typefaces, check out Bebas Neue and Akrobat by FontFabric.
👉 Large font size: With large font sizes, the lowercase letters need to be negatively tracked to compensate for the extra space between the letters. See the example below from the Apple website where they have added the negative tracking to the text set at 80px font size.
👉 Here is another example from Netflix where open tracking is applied to the text set in all capitals and at the small font size.
Try it yourself in Figma or Adobe Illustrator
- Kerning: Select the space between the characters that you wish to change and use the Alt + right or left chevron key (for Figma) or Alt+right or left arrow key (for AI) to increase or decrease the kerning.
- Tracking: Select the whole word and then use Alt+Right or Left chevron key (for Figma) or Alt+Right or Left arrow key (for AI) to increase or decrease tracking.
That’s all for today.
Thanks for reading. Feel free to share.
💬 Let me know in the comments if you have any questions or suggestions. :)
👉 Hit me up: LinkedIn, Twitter, Instagram
▶️ Play KERNTYPE- A letterspacing game
