What is leading in typography? Tips for leading in graphic design
What is leading? We’re not talking about leadership – when you guide other people to victory. For this definition of leading, we’re looking at leading in typography, so let’s get started…
Fonts or “type” are a huge element of branding. The kind of text you use in your website, logos, publications, and blog posts says something crucial about your business.
However, there’s more to typography than many people realize.
Sending the right message doesn’t just mean choosing between a friendly sans serif font or a more professional serif type. Designers working on branding also need to consider the space between letters, and how characters relate to each other in a visual sense.
Today, we’ll be looking at leading in typography, and how it impacts design.
What is leading in typography? A definition of leading
So, what does leading mean in typography?
Leading (pronounced “led-ing”) is the spacing between different lines of text.
In the early days of typesetting and printing, all of our typography was created by hand, with individual blocks of wood for each letter. To adjust the position between lines so the design could have more space, people would add strips of lead between the blocks: hence leading.
Since digital typography emerged, leading started to be confused with “line height”. The line height in a piece of text addresses all the space from one baseline to the next. On the other hand, leading is the space from the bottom part of a letter on one line, to the top part of a letter on the next.
The use of leading in a block of text significantly affects readability.
Most leading practices today are based on two concepts:
- X height: The x-height of a typeface demonstrates the base height of each character.
- Ascenders and descenders: The elements extend below or above the x height of the character, such as the bottom part of a lower-case “y”.
Define leading: What is the space between lines of text called?
Understanding leading doesn’t just mean having a good leading definition. It’s also important to know why leading is so important in graphic design. The spaces between lines in a blog post, piece of advertising collateral, or even a shareholder report make a huge difference to the text’s legibility.
If you’ve ever added extra space between lines when writing yourself a note, or creating an essay, you’ll notice how the right amount of distance can transform the entire page.
The tricky part of leading is getting the balance right.
Too much leading between letters and you end up with excessively spaced-out content. Too little, and you risk cluttered looking text.
There are three common styles of leading most designers use when creating content:
- Normal leading: Normal leading is usually represented as [font name] 10/10 or [font name] 12 / 12, the leading number is the same as the font size.
- Tight leading: Tight leading makes the leading number smaller than the font size, such as [font name] 10/8. It pulls the text together.
- Loose leading: With loose leading, the leading is larger than the typeface’s size, such as [font name] 10/14.
As the following demonstrates:
So, which leading is the most effective? As with most things, it depends on what you’re trying to do. Leading in typography influences the impact of the text as you present it to your audience.
Tighter leading can make text look more fast-paced and chaotic, while looser leading is airy and casual, allowing more space to breathe between lines.
There’s no perfect formula for the kind of leading you need for each text. Additionally, leading is often influenced by other elements of the typography. Type size, color and context all make a difference.
What is leading in graphic design? Good leading examples
Finding examples of good leading can be complex.
Provided your leading choice supports the legibility of the page, there’s no rule to say one form of leading is better than another. Sometimes, looser leading looks best, while other times, you may prefer a tighter appearance (see below).
In printed publications, it’s more common to see tight leading. There are various reasons for this, one being printed newspapers and magazines are stuck at a set size. The less paper the publisher needs to use, the cheaper it is to create the content.
Online, we’re not paying for each extra page we use. This means we can be more generous with leading. A larger amount of space makes it easier for customers to read your content, which means they’re more likely to stay on the page.
While there’s one-size-fits-all strategy for what good leading should look like, there are some golden rules you should consider.
Examples of good leading often start with a leading size at the same number as your point size. If you want to spread your content out a bit further, you can take it up two points, such as 10-point text with 12-point leading.
To tighten the text, you scale back slightly, by another 2 points.
Looser leading is easier to read
In general, looser, or neutral leading is better for legibility. When letters are too close together, they appear cluttered and overwhelming. You also miss out on some essential white space so crucial in web design.
Consider your font
Certain font types are more likely to demand looser leading. Handwritten fonts are often more flamboyant, with large flourishes and differences between letters. Extra space is necessary to ensure each letter is clear.
What is leading? Examples of bad leading
In general, leading is only genuinely “bad”, when it negatively influences your content’s legibility. Content with lots of lines of text needs to be evenly spread out to help guide the eye comfortably down the page.
Good leading also helps to separate body text from headlines and subheadings.
Bad leading often fails to take legibility into account properly. This could mean descenders and ascenders sit too closely together, causing lines to blur into one muddled mess.
Sometimes, even if your leading doesn’t mash various letters and characters together, it can still send your potential reader away. We perceive tight blocks of text as being more difficult to read in general.
Usually, tighter text reminds us of broadsheets, and reports, while well-spaced text feels more natural and airier – like handwriting.
Examples of bad leading would include:
Problems with legibility
Like other aspects of typography design, problems with leading can often affect readability. If lines of text are almost overlapping, they’ll be much harder for your readers to understand.
In the past, leading often suffered in many publications, because companies only had so much space available to them. Today’s digital environments mean you can use as much page space as you like.
Failing to use space appropriately could make a website or blog look less professional and amateur.
Problematic brand image
Every design asset you use as a business is crucial to showcasing your brand identity. Tighter leading automatically conveys a quite different personality to looser leading.
Tips for leading in graphic design: Using leading space
Now you know what leading is, let’s explore some of the strategies you can use for successful leading in graphic design. Although this strategy might seem straightforward enough, designers have various techniques and tricks they use to ensure they get the right results.
Let’s explore some leading tips.
1. Use the right software
Leading used to be a lot more complicated than it is today. Digital software ensures you can adjust your leading in seconds, with minimal headaches. Choose a design software which gives you granular, high-level control over your leading space.
You should be able to experiment with manual leading (dragging the space between lines), and even auto leading.
Be careful not to let auto leading make all of your decisions for you. Software can give you some useful guidance on how to use leading as a beginner. However, it’s up to you to use your creative skills, and knowledge of a brand, to choose the right leading.
2. Differentiate between header and body copy
As you continue to explore leading text, you’ll discover you generally use looser leading between header and body copy. Leading can be an excellent way to show your readers the natural breaks between chunks of text. This is why we often see bigger spaces between paragraphs.
Looser leading in the right places will guide your customer or reader through the text and help them to scan through chunks of information.
The space between paragraphs should be greater than the space between lines in the same paragraph. The distance between your header lines and your body text needs to be greater still. This will help your content to look professional and well-formatted.
3. Know your reader
Understanding your audience is an essential part of any design strategy. As mentioned above, leading in graphic design doesn’t just improve the legibility of your text, it also sends an important message about your brand, and your company’s personality.
To ensure you’re sending the right message, start by thinking about what kind of leading your customers are going to be used to. Look at your competitor’s approach to leading and ask yourself whether your customers are more likely to expect tight, or looser leading from you.
If all of your competitors have very tight leading, and yours is loose, you could leave customers wondering about the legitimacy of your business.
4. Experiment with how leading makes you feel
Looser leading is often associated with cleanliness, clarity, and breathability. More space between lines is similar to having a website with more white space around design elements. Nothing feels cluttered or chaotic – everything fits into its space comfortably.
However, you can take this “loose” experience too far. Extremely loose leading forces a disconnect between sentences, like the spaces between paragraphs. Go over the top with this strategy, and you risk making you message look disjointed.
Tighter leading in graphic design makes content seem professional, sophisticated, and direct. Think about the difference between the paragraphs on a newspaper, and the ones you see online. Tight leading can create a feeling of constraint. Used too heavily, however, and it also creates chaos.
Tighter leading can make your content seem rushed or crammed together. Alternatively, you can reduce the space between lines to show the direct connection between different ideas and concepts.
A heading and a subheading in quick succession would have tighter leading than a heading and body copy, for example.
5. Look at the bigger picture
Leading is only one aspect of excellent typography. To make your font as legible and engaging as possible, you need to think about the bigger picture.
For example, what does your kerning look like? Tighter kerning (letters closer together) combined with tight leading can seriously damage legibility.
You’ll also need to consider the style of font you’re using. Most designers use looser leading when using sans-serif typefaces, and modern type. Serif fonts often have a distinct stopping point above and below the x-height.
More modern, creative fonts are likely to have greater flourishes with their ascenders and descenders, making the need for loose leading greater.
Even adding elements to your font like bolding or italics may create a need for different levels of leading. Bolder fonts take up a lot of visual space already, so it makes sense to spread them out a little more:
6. Know the connection between color and leading
Contrast and color are extremely important when choosing line heights, and distance between letters. On darker backgrounds, most professional designers will recommend using more leading than on a lighter background.
Dark colors can add weight to a design, like tight leading. Try to avoid jumping between different leading options from one part of your webpage to the next.
Using the same amount of leading throughout your page will help to create a sense of balance. Remember, the contrast between your background and text colors should be high to support better readability. Although, if you’re using two colors closer together in shade, a greater amount of leading may improve legibility.
7. Don’t forget to design for different screens
Making the most of leading means understanding how your customers are going to view content in different environments.
On a website, there’s generally more space for you to work with when your customers are looking at your blogs and content on a desktop or laptop. On a smartphone, you’re dealing with smaller fonts, and smaller screens.
If you’re designing a website with a responsive or dynamic design, it’s best to think about how the font sizes, and leading should change when switching between a large and smaller screen.
Generally, upgrading your leading by a small amount to give words more breathability will make it easier for people to scroll through your page.
Just remember going too loose with your leading in graphic design can also cause confusion. You don’t want your customers to stop scrolling because they think they’ve come to the end of a paragraph.
Mastering the art of leading space in graphic design
Font leading is just one of the many skills designers need to develop when building beautiful projects. Knowing how to leverage leading space correctly ensures you can create blogs, web pages, and other font-based designs to engage an audience.
Alternatively, if you rely too heavily on auto leading, or struggle with leading text, you may also have a hard time getting your message across.
The most complicated thing to remember about leading is there’s no checklist of specific rules to follow for every piece of text. You can’t just pick a number one “best” leading size for every campaign.
Like font kerning or font style, you’ll need to choose your kerning based on what you know about the project.
To get started, experiment with different leading designs. Look at how different statements and paragraphs look with specific amounts of space between them, and ask yourself what looks and feels best.
Fabrik: A branding agency for our times.
Now read these:
—The difference between leading and kerning
—The fine line between kerning and tracking
—Confused about leading and tracking?
—What is kerning in typography?
—Tips for tracking in graphic design