[1] Choosing Correct Line Heights and Letter Spacings — Intro
Setting the correct line heights and letter spacings for your designs makes a huge difference. These two things make your designs look professional and make you stand out from amateur designers.
I have watched thousands of YouTube videos on Typography, and nobody speaks about how vital these things are unless and until I search for them in particular. It really surprised me that how much difference it makes after fixing custom line heights and letter spacings, and nobody talks about it.
I have divided the article into three parts, Introduction (current article), Basic method and Advanced method. In both methods, we will be using Baseline grids which we’ll be discussing in this article. You’ll be learning how to create a baseline grid and what baseline grid to use. Now let’s see what the other two parts include.
Basic Method — Designers who are just starting in design and don’t want to spend too much time deciding line heights and letter spacings. It is recommended for faster deadline projects.
Advanced Method — For designers who have a keen eye for typography and value every pixel. It takes time to master it. It is recommended when building design systems or more extensive projects to have time to spend.
Now before knowing how to define custom parameters, you should know about Baseline grids. If you already know what baseline grids are, you can directly jump to the following article.
What are Baseline grids, and why use them?
In typography, the baseline is a line upon which the text rests. Aligning baselines to a specific absolute grid establishes a vertical rhythm — a pattern that is easier for the human brain to scan, especially useful with multiple-column content. [Taken from this article.]
As simple as it sounds, you know what baselines are. Let’s take you back to the childhood days where you have used a ruled notebook. Remember those lines you used to write on? Those are called baselines. Refer to the below picture to get a closer idea.
You will be writing on those blue lines with constant line-height. Now, why am I showing this? Okay, let us remember the time when you wrote on an unruled paper. Yeah, compare your writings on an unruled paper and a ruled paper. The ruled paper written content should be looking good because there is consistent line height and a base to write your content, unlike an unruled paper.
As you can see in the first case, where the text is not sitting on the baselines, it is very hard to read, and all the data looks, I don’t know, not professional? But in the other case, when the text is naturally sitting on the baseline grid, everything looks perfect, and we somehow know that it is better. The text has its own breathing space, which makes it more likely to be read. I guess at this point; you know why we use baseline grids.
Which Baseline grids are to be used?
The most popularly used baselines are 4-grid and 8-grid. I personally prefer to use 4-grid since it provides more flexibility. Since all the numbers divisible by 8 are divisible by 4, the 4-grid baselines give you that extra flexibility to place your content where it feels good.
[Figma] How to create Baseline Grids? — Video Tutorial
I will now show you how to create baseline grids (4-grid in this case) in Figma. You can use the same process in any design tool.
Step 1: Create a frame (if there is not one yet), it can be of any dimensions
Step 2: Click the plus icon on the layout grid in the design panel. By default, a grid is produced base on the nudge amount you have kept in your preferences. I kept mine at 8 since I use 8 grid nudge for designing.
Step 3: Click on the Grid icon and set the grid to Rows.
Step 4: Count: Auto ; Type: Top ; Height: 4 ; Offset and Gutter: 0
Now you have created a baseline grid where your text will be sitting on.
FAQ — Why create a 4-point baseline grid when we can only create baselines that of line height?
We can create baselines that are as same as Line heights but we have different font sizes in our typography to satisfy hierarchy. For example, I have a body text font size of 16px with a line-height of 24px. Now if I put the height 24 when in Step 4, everything sits on the baseline. But what if I have a different font size of 12px and a line height of 20px? In this case your text will not sit on the baseline of 24px height.
But 24px and 20px, both are divisible by 4, which is why we always create line heights that are divisible by 4 such that everything sits on the baselines. It gives you that neat and polish look with so much consistency.
Well, if you have made it this far, congratulations. You took that first step in changing the way you design. In the next article I’ll be writing on how to define correct line heights and letter spacings for your typography. Happy Reading.
Also, self promotion, follow me so you will not miss the upcoming articles. Peace.
