Hello! Welcome back.
In our last lesson, you learned how to identify the four main categories of typefaces: serif, sans-serif, script, and display. This is the first step in making intentional font choices. Now that you can choose your tools, it's time to learn how to use them with precision.
Today's lesson focuses on a crucial aspect of typography that separates amateur from professional design: spacing. You will learn how to adjust typographic spacing—specifically leading, tracking, and kerning—to improve the readability and visual appeal of your text. Mastering these skills will allow you to transform a simple block of text into a well-crafted, easy-to-read, and professional-looking composition.
The Three Dimensions of Typographic Space
Good typography isn't just about the letters themselves; it's about the space in and around them. There are three fundamental adjustments you can make to control this space.
Let's define these three terms:
- Leading (or Line Height in digital design): This is the vertical distance between lines of text. Proper leading prevents text from feeling cramped or disconnected, making paragraphs comfortable to read.
- Tracking (or Letter Spacing): This is the process of creating a uniform adjustment to the horizontal space between all characters in a word, sentence, or paragraph.
- Kerning: This is the adjustment of space between two specific characters to correct for visually uneven spacing. It’s a fine-tuning process, unlike tracking, which affects a range of characters.
To better understand these concepts and why they matter, we'll watch a few short clips from the video we used in the last lesson.
The ULTIMATE Guide To Typography For Beginners
The video 'The ULTIMATE Guide To Typography For Beginners' by DesignSpo offers concise explanations of leading, tracking, and kerning.
Please watch the following three segments in order: Leading/Line Height: Watch from 08:45 to 09:28. Tracking/Letter Spacing: Watch from 09:28 to 10:04. Kerning: Watch from 10:04 to 10:35. Pay attention to the rules of thumb mentioned, such as how spacing should change relative to font size.
Now that you have a conceptual overview, let's solidify the distinction between these three terms.
What is Kerning & Why it Matters in Font Design
This article from the Figma blog, 'What is Kerning & Why it Matters in Font Design,' clearly explains the difference between leading, kerning, and tracking.
Read the section titled 'The difference between leading, kerning, and tracking.' This will reinforce the unique purpose of each adjustment.
Adjusting Spacing in Figma
Understanding the concepts is the first half of the battle. The second half is knowing how to apply them in your design tool. Let's open up Figma and see how to control these properties. In Figma's Design panel, when you select a text layer, you'll find these settings in the Text section.
The Figma Text properties panel. Line height (Leading) and Letter spacing (Tracking) are the primary controls for adjusting typographic space.
1. Leading (Line Height)
As you saw in the video, default line height often isn't optimal. Adjusting it is one of the quickest ways to improve readability.
- Rule of Thumb: For body text, a good starting point for line height is 1.4x to 1.6x the font size. For example, if your font size is 16px, a line height of around 24px (1.5x) is common. For larger headlines, you can use a tighter line height, sometimes as low as 1.0x to 1.2x the font size.
Let's watch a practical demonstration of setting a base font size and line height in Figma.
Typography Scale and Line Height Web Design Figma (1/2)
This video, 'Typography Scale and Line Height Web Design Figma' by 404roy, demonstrates how to set up text styles with appropriate line heights using a professional workflow.
Watch from 04:22 to 05:22. The creator sets up a base paragraph style. Notice how he chooses a line height (24px) that is a multiple of 8, based on a 16px font size. This practice of using an 8-point grid is common in UI design for creating visual consistency.
2. Tracking (Letter Spacing)
Tracking is used to adjust the overall density and texture of your text.
- Rules of Thumb:
- Loosen tracking (increase spacing) for text set in all caps and for very small font sizes. This makes the letterforms more distinct and easier to read.
- Tighten tracking (decrease spacing) slightly for large headlines. The extra space that is default in fonts becomes more noticeable at large sizes, so reducing it can make the headline feel more cohesive.
This next clip demonstrates this principle in action.
Typography Scale and Line Height Web Design Figma (1/2)
Continuing with the same Figma tutorial, let's see how to apply tracking adjustments to different text sizes.
Watch from 08:59 to 10:20. Observe how the creator decreases the letter spacing for large display text and increases it for small text to improve legibility and visual balance.
3. Kerning
Kerning is the art of manual refinement. Most modern fonts have auto-kerning built-in, but for large, prominent text like in a logo or headline, manual adjustments are often necessary to fix awkward letter pairs (e.g., 'A' next to 'V', or 'T' next to 'o').
- How to do it in Figma:
- Select your text layer.
- Place your cursor between the two characters you want to adjust.
- You can either change the value in the Letter spacing field or use the keyboard shortcut: Alt + < (to decrease space) or Alt + > (to increase space).
For a more detailed look at the why and how of kerning, this article is an excellent guide.
Understanding typography: character space, kerning & tracking
This article, 'Understanding typography: character space, kerning & tracking,' dives deeper into the visual principles behind kerning and provides clear instructions for adjusting it in Figma.
First, read section '2. Kerning' to understand the visual logic behind it. Then, jump to the 'Try it yourself in Figma...' section at the end for the specific keyboard shortcuts.
Test your understanding!
Let's put this into practice in Figma.
- Create a new text box and type the word WAVE in a bold, sans-serif font like Inter or Montserrat. Set the font size to something large, like 96px.
- Look closely at the spacing. Do you notice the large gap between the 'W' and 'A'? And between the 'A' and 'V'?
- Adjust the kerning: Place your cursor between 'W' and 'A' and use Alt + < to tighten the space until it looks visually balanced with the space between 'V' and 'E'. Do the same for the 'A' and 'V' pair.
Challenge: Now, create another text box and type "A small caption in all caps." Set the font size to 12px and use all capital letters. Is it easy to read? Try increasing the Letter spacing (Tracking) to 5% or 10%. Does that improve its legibility?
Show answer
For the "WAVE" exercise, you should find that bringing the 'W', 'A', and 'V' closer together makes the word look more unified and professional. There's no single "correct" value; the goal is to make the perceived space between all letters feel consistent.
For the all-caps caption, increasing the tracking should make the small text significantly easier to read. The added space helps your eyes distinguish the individual letterforms, which all have the same height and can otherwise blur together.
Conclusion
Great work! You've just learned one of the most impactful skills in typography. By thoughtfully controlling the space between letters and lines, you can dramatically improve the clarity, professionalism, and aesthetic quality of your designs.
Here are your key takeaways:
- Leading (Line Height) controls the vertical spacing between lines. For body text, aim for 1.4x-1.6x the font size to ensure readability.
- Tracking (Letter Spacing) adjusts the uniform horizontal space in a block of text. Loosen it for all-caps and small text; tighten it for large headlines.
- Kerning is the manual adjustment of space between two specific letters, essential for refining display text and logos.
In our next lesson, we will combine this knowledge with other typographic variables. You'll learn how to apply typographic hierarchy using font size, weight, and style. This will enable you to guide a viewer's attention and communicate information more effectively.