When designing for the web, you have to keep one thing in mind at all times: readability. It doesn’t matter how great the design is, how gorgeous your layout is, or how genius your use of color. If people can’t read the words on the screen (and this is assuming there are words on the screen, of course), the website cannot serve its function. Three of the most important elements of readability for text are kerning, tracking, and leading, though many people either get them confused or simply don’t understand how to use them effectively. We intend to fix that today.
Kerning, Tracking, and Leading
If you boil these three down to the absolute fundamentals, you’re looking at the spacing between characters on both the X and Y axes. Digging in, you’ll see there’s more to it than that, but in essence, you’re looking at the relationship between text characters. It’s important to understand the relationship between these three attributes because good design and readability depend on your using them to the best of your ability.
And that comes with time and practice. But once you start paying attention to them, you’ll notice how kerning, tracking, and leading are used both effectively and poorly on everything you read and see on a daily basis. Let’s dig in.
Adjusting Kerning, Leading, and Tracking (and More!)
Actually, before we dig in, let’s go over how you change and adjust these settings. While most word processing programs have options for adjusting them, most people won’t ever need to when writing copy or typical text. It’s when you’re designing text that it becomes more of an issue, so programs like Photoshop, Illustrator, etc. will have the options you need most.
In the Adobe products, you just have to open up the Text Layer Character Panel, and you have everything you need. The V/A is kerning, the VA in a box is tracking, and the underlined, vertical A’s are Leading. You can also adjust strikethrough, weight, size, super/subscript, and so much more in this panel. It’s worth getting used to keeping this open.
Just place your cursor where you need to adjust the spacing and go.
What is Kerning?
Let’s begin with kerning. Kerning is the simplest of the three, really. It’s the space between two side-by-side characters. In a word, you can have variable kerning because the space between the first two letters may be different than between the last two (and so on).
In monospaced fonts, each character takes up exactly the same amount of horizontal space with no overlap. The A is the same width as the B as the J as the K. Adjusting the kerning between these letters tends to be easier than variable spaced fonts, where the letters might overlap as well as print at different widths.
In the example above, we have three lines that were copy and pasted using the monospace font Courier New. The top row’s kerning is set at 0, which is the default and uses whatever spacing the font designer chose. The second row is set equally between letters (and spaces) at 200. As you can see, the spaces are uniform between characters across the line. Finally, the third line was kerned at random with both positive and negative spacing within each individual word. As you can see, each character can have different kerning on each side.
What is Tracking?
Tracking is similar to kerning, but it’s not kerning. Where kerning is the space between two individual characters, tracking is the uniform space between each individual word or line. Instead of worrying about how things are put together on a letter-by-letter basis as with kerning, you make sure the entire line is uniformly spaced. Looking back at the earlier example image, the second line could have been done in a much easier way.
What I did for the kerning was to place my cursor between each individual character and adjust to 200. I essentially tracked the whole line. Which is what you should do. Simply highlight what you need to track and adjust it in the Character Panel.
Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.
Handwriting fonts and cursive typefaces are set with specific kerning, and if you adjust the tracking, you will get gaps in an otherwise unbroken line. Or going the other direction to compress the lines, you might simply make the script unreadable.
What is Leading?
With Leading, you’re no longer dealing with spacing between characters. Leading is the space between lines.
Effectively making use of leading lets you effectively make use of whitespace in your designs. Cramped lines — even with correct and well-done kerning/tracking — can make a miserable experience for readers.
In some places, you might see leading called line height, but they’re roughly the same thing. One good rule of thumb is to make sure that you leave at least a little space above and below your characters. As you can see in the top example, a 40px font has a 48px line height. That means that no matter what, there will be spacing between the letters. If you set that at or lower than the font size, you will get character overlap.
Additionally, this is the height of the line that the characters sit on. This is not the height of the character. Just as kerning and tracking don’t make the characters fatter or thinner, tracking doesn’t make them shorter or taller. It is simply the space around them.
As you can see, however, the options under the kerning/tracking in the Photoshop Character Panel adjust the width/height of characters independently of kerning, tracking, and leading.
Photoshop/Illustrator Keyboard Shortcuts
The only downfall of the Character Panel is that it gets to be pretty annoying when you’re needing fine adjustment. Thankfully, there are keyboard shortcuts that make kerning, tracking, and leading an absolute breeze to use.
These shortcuts are for the Adobe Creative Cloud suite, so they might be different in Gimp or Paint.NET or another program.
- Kerning – With the cursor between two characters, hold ALT (or Option on Mac) and use the left/right arrows to adjust the kerning
- Tracking – With the word/line highlighted, hold ALT (or Option on Mac) and use the right/left arrows to adjust the tracking of the highlighted text
- Leading – Highlight the lines you want to adjust, hold ALT (or Option on Mac) and use the up/down arrows to adjust the space between lines
While you can place your cursor or highlight the text and type values into the Character Panel, the keyboard shortcuts make the whole process much less tedious and time-consuming. Plus, you get more granular control, so you can make better designs that way, too.
(As an aside, if you aren’t using Photoshop/Illustrator/Premier, etc. keyboard shortcuts regularly, we highly recommend learning, as it makes your workflow much smoother, more enjoyable, and more productive, too.)
Wrapping Up
Kerning, tracking, and leading are fundamentals of readable text in web design (and design in general). Learning the difference and how to use each of them effectively will make you a much better designer. It may seem a little odd that something as simple as the spacing between letters and lines could have such a large impact, but once you deal with it for even just a little while, you will never look at websites, advertisements, logos, or billboards the same way again.
What are your tips and tricks for getting the perfect tracking, kerning, or leading in a design?
Article featured image by BarsRsind / shutterstock.com
Did I miss something…where’s the part that shows me how to apply kerning, tracking and leading with Divi?
Perhaps of interest to your younger readers, the origins of these terms (source: Wikipedia):
KERNING
“The source of the word kern is from the French word carne, meaning “projecting angle, quill of a pen”. The French term originated from the Latin cardo, cardinis, meaning “hinge”. In the days when all type was cast metal, parts of a sort that needed to overlap adjacent letters simply hung off the edge of the sort slug. The bit of metal that hung over the edge was called a kern. At that time, the word “kerning” only referred to manufacturing the sorts with kerns, while adjusting space between letters during compositing was called inter-spacing or letter spacing. ”
LEADING
“The word comes from lead strips that were put between set lines of lead type, hence the pronunciation “ledding” and not “leeding”. When type was set by hand in printing presses, slugs, or strips of lead of appropriate thicknesses were inserted between the lines of type to add vertical space, improving reading. “
I dislike when an author says nothing matters but this (topic). Readability is crucial to a visitor experience online, but so is design, color, website organization and a plethora of other factors that affect user experience. Please don’t demean other important aspects of creating a website.
Secondly I was hoping for more of a discussion of Leading, Tracking and Kerning when using html (Dreamweaver) or WordPress and what editor plugins you would recommend when creating WP sites to control typographic preferences. I don’t see the character tools in illustrator or photoshop being useful in this instance. Why not add in InDesign too, at least it is a layout program.
I am a traditional print designer and find that editors in WordPress are limited. Please provide more information on this. It would be very helpful. Thanks
Hey, Paul! InDesign should work the same as Photoshop and Illustrator. Really, any of the text tools in Adobe software should be pretty similar.
And you’re absolutely right about color, design, organization, etc. being incredibly important, too. I didn’t mean to come across demeaning — I am really sorry if I did.
The primary reason I say that readability is the most pressing concern is because content being accessible is so fundamental to everything. But then again, I’m a big fan of brutalist design and a lot of that eschews aesthetics for function and is pretty text-heavy.
As for editor plugins and HTML to control that stuff, I actually prefer using CSS to hit on anything I can’t get quite right with Divi. I use a lot of text-transform on elements, and text-decoration/font-style, font-kerning, line-height, and letter-spacing are also go-tos for me if I need more granular control. Most of what I do is in the Divi Design tab, but I keep my Custom CSS pretty robust, too.
I am personally not familiar with Dreamweaver at all these days, so I can’t comment to that.
Thanks for the overview on some things non-designers often forget to use. Line-height and tracking (aka letter-spacing) are available in most builders.
I would love to know more about the font-kerning property! I do find letter-spacing and line-height indispensable to creating a well-designed web page. I have not found much on font-kerning with CSS.
Typography on the web has made vast improvements, but is still crude compared to print. But, different media require different strategies. I find there are very controllable things we can do that contribute to the effectiveness of type and design on the web: a clear size ratio(and/or text-transform, color etc.) differentiating hierarchy of headings/body text differences, line-length, and contrast.
One thing I would love to see Divi blog posts do is get deeper into the issues presented. There are ways to allow those who want the simple information to skim headings and first-paragraph content while allowing those looking for the nitty-gritty to dive deep. (You probably don’t need any more SEO but Google likes long articles now.)
A good explanation of what and how.
I would have liked to have seen you do why and why not. Why too much leading is a negative when it comes to readability. Same for letter spacing/tracking. Also, too-tight kerning may not be good but a tightly kerned headline can be.
Just saying.