What is Leading in Typography? Its Importance in Typography

This is a guide covering everything you need to know about leading in typography.

Let’s dive in!

What is Leading in Typography?

Leading is a distance between two lines of text, and it’s important because it helps to polish your content piece and make it more successful. Specifically, it is the line spacing in the vertical direction. It’s also called the distance that a line has from another line vertically.

Leading is a term you’ll often hear in typography along with kerning and line-height. However, to better understand its use, you need to know the difference between leading and kerning and leading and line-height.

Leading is a great tool to make your content stand out and engage readers more since it improves legibility.

While you usually don’t need exact measurements in leading, there is still a way to calculate leading based on the font size of your text.

When we write a line with words, there is a baseline where all the letters and characters sit.

The leading in typography starts from this baseline.

For example, in the above line, all the letters sit on an invisible baseline.

However, some letters like t and g fall above or below the invisible lines that hold the other letters. One of these lines is in the baseline, and the other is above the letters, but it’s not a baseline.

Instead, it’s the x-height – height of lower-case letters.

For example, in abcdefgh, there is a base starting below a, not g, and the x-height is above a, not for h. In the example, g is called a descender – letters that have a part that falls below the baseline – and f and h are ascenders, whose parts go above the x-height.  

These ascenders and descenders need to be taken into consideration when we calculate leading in typography.

The correct use of leading helps make the text more readable, especially on digital media, making the project look more polished and professional.

Why is Leading Important?

Leading in typography is essential because it can help to make the text more legible and easier to read.

However, the lines may overlap if the leading is too short, and the text will become tangled.

In the same way, if the leading is too much, the lines may look too far apart – too much space will be left unfilled, which isn’t good visually. Both of these are extremes detract readers from your work.

The success of your work depends on the leading, too, along with font, color, and size.

In software like MS Word, the default leading is usually fine, but in web pages, it’s usually best to increase it since, on the screen, tight spacing can irritate your readers’ eyes.

Likewise, your content won’t be a success if no one can read it.

Why is it Called Leading in Typography?

Long ago, when digital printing and the web were unimaginable, people used to typeset by hand.

Typesetting refers to composing words or text with physical letters and symbols. In those days, typography was composed in a typeset using hand.

Metal or wood was used to make characters, and often lead was used to separate text blocks from each other. Old print shops used lead strips between lines of text to make the vertical distance more.

It allowed the text or the design to have more breathing room and look more open. Since then, the term lead stayed, and even now, the line spacing is called leading, pronounced as ledding, not leading.

It’s why leading is called leading in typography.

Leading vs. Kerning: What is the Difference?

Leading in typography and kerning are terms we often hear in typography and typeface, and they refer to the spacing.

But, here is where the similarities end. Kerning and leading are both different processes related to adjusting different spacing types, and they help polish the design.

Kerning is the space between individual characters while leading is the space between lines of content, and it starts from a baseline.

They are very different from each other, but they both work to improve the legibility of a piece of content and graphics by adjusting the spacing.

Too tight or big spaces between lines can make reading the content and understanding the message difficult, and that’s why leading in typography is used.

In the same way, if the spacing between the letters is too tight or too loose, it can hinder reading – kerning helps here.

Kerning is the spacing between different characters, and each letter takes up a different amount of space, and we can adjust where the spacing seems too loose or too tight.

On the other hand, leading is the line spacing, and we need to take the ascender, descenders, x-height, and the baseline into account.

Leading vs. Line-Height: What is the Difference?

You might be thinking, aren’t leading and line-height the same? Leading and line-height are both different.

Line-height is different from leading even though some consider Line-height as the same as leading in typography. 

Leading

As the leading definition states, leading is the line spacing from the baseline of one line of text to the baseline of another line.

Line-Height

In contrast, line-height refers to the height both above and below the line of text.

Thus, they both may be about line spacing, but they both pertain to different types of line spacing.

Another way to look at line-height is that it adds space below and above the text, and it’s primarily a CSS property.

At the default setting, line-height is around 20% bigger than your font’s size, e.g., if the font is 14px, the line height should be 16.8px.

Here the line-height is 1.2 times larger than the font size.

Line-height can even be 130% or 150% larger than the font size, but it depends on what you’re using it for. Line-height is calculated differently for different designs.

In web paging, you can even go for 200% – 2 times the font size. On the other hand, designers often use a line-height of 1.5 times greater than the font size to start with – 150% of the font size – and you can change the ratio according to the design and the font size.

Leading is calculated a bit differently, but the math behind it is the same.

If you want to learn more about line height, we recommend this video by Full Stack Coding Tutorials:

How is Leading Calculated?

Similar to line-height, leading is calculated per the font size of your content or design. Moreover, we measure leading in typography in pixels.

While the leading can vary from project to project, the optimal leading is usually between 120%-145% of the font size. In other words, 1.2 to 1.45 times the font size works well for most content.

On a digital screen, 110% or less like 90% of the font size will make the text look too tight and hinder legibility. Similarly, leading of about 160% or 170% will make the text look very loose.

However, the results can be different for the same leading values since other software use math differently. Also, for different fonts, the line spacing is liable to change.

So, for example, it’s less for small-size fonts and more for larger fonts. 

Like other software, Photoshop has a default setting for leading for about 50px for a 40px size font. Leading is calculated by multiplying 125% with 40px.

You can increase or decrease the leading using the Leading Setting.

MS Word, like other text editors, uses 1.2 times the font size as the default setting for the leading, but it can be a bit tight for the web. Leading values closer to 1.45 work better for digital media.

To see leading be adjusted in real time, we recommend this video by Jason Ford:

Examples of Leading in Typography

Examples of leading include the various sizes that work and how they work. We write leading with the typeface size. For example, look at Arial 12/14.

The first number is the font size, and the second number is the leading point size.

In most design software such as Illustrator and InDesign, the default leading size is two points greater than the font size.

There are three terms you need to know in leading: Normal, Positive, and Negative leading.

• Normal Leading: The leading is the same as the font size, for example, Arial 12/12.
• Positive Leading: The leading is greater than the font size, for example, Arial 12/16.  
• Negative Leading: The leading is less than the font size, for example, Arial 12/10.

Positive and normal leading work well in body text, but the negative leading works well with headings in all caps.

Likewise, long blocks of text will require more leading, Sans Serif fonts, and bolded typeface.

Small-size fonts, around 8pt, also need extra or more leading. Also, use extra leading in typography if your background is black. It will increase legibility.

Moreover, In MS Word, you can access the leading or line spacing section by right-clicking your Word document. Then, click the Line & Paragraph Spacing option.

The line spacing options in Word are Single (equals to 117% of the font size), 1.5 lines (175% of font size), and Double (233% of font size) – they are way out of the optimal range, so avoid them. 

Multiple is the only one that works but select 1.03 to 1.24 leading there, not 1.20 to 1.45. At least is another option but avoid it since it allows Word to change the leading automatically.

It’s best to adjust the leading based on your content type and where it’s used, for example, is it a heading or a body text, etc. 

Final Remarks

Leading in typography is an effective tool to increase the space between the lines of text and make your content easier to read on-screen.

You can calculate the leading using basic math and estimated optimal leading percentages.

Leading is necessary, and you need to use it to polish your content correctly. If you don’t use it correctly, it can destroy the legibility and decrease traffic to your website.

Usually, 150% to 200% of the font size is a leading size for web paging, and you should adjust based on the font size, font type, and background color – with black, you need more leading than white.