Tracking In Typography: Best Practices To Improve Readability On Your Website

Brian Bojan Dordevic
About The Author

Brian Decoded

President at Alpha Efficiency

Join me at the forefront of web design and digital marketing innovation. I am obsessed with web design, business philosophy and marketing performance.
I write Conversion Insider newsletter.

Have you picked the perfect typography for your brand and the right color and size, but something still looks off? Then perhaps it is time to check tracking in typography.

Tracking typography, also called letter spacing or tracking in type, is a subtle yet crucial technique that can make or break your website design look. So, if your design includes text, you want to pay close attention to this one.

Tracking in type involves adjusting the horizontal space of the letters or words in a line. How you arrange typography spacing plays a key role in the visual appeal and legibility of your text and web design.

In today’s article, I will show you how tracking in typography works. You will learn what inadequate letter spacing looks like and how to ensure optimal readability and aesthetic appeal. Plus, I will give you the 5 tracking in type tips I use at my Los Angeles web design agency to create stunning and attractive website designs.

Table of Contents:
Tracking in typography

Why Is Tracking In Typography Essential For Web Design?

All professional website and graphic designers know the importance of typography in web design. In the intricate world of typography, every letter, line, curve, and spacing matters a great deal. Tracking typography emerges as a powerful and effective technique UX and UI designers can use to enhance their projects.

Designers use the typography tracking technique to improve the readability of logos, headings, or large body copy. This is crucial for providing an excellent user experience and ensuring visitors spend more time on your website or mobile app.

Today, with increased awareness of website accessibility, readability is more relevant than ever. If you want your content to be accessible to all users, you must choose accessible fonts that guarantee everyone can easily read them. Fonts with too tight spacing between characters can cause legibility issues, making it necessary to make tracking adjustments.

Besides legibility, proper letter and word spacing gives website content a superior aesthetic appeal. Applying this typography technique can make a site look more polished and organized, communicate your brand’s personality, and showcase your business’s commitment to accessibility and high-quality design.

What Is The Difference Between Tracking, Kerning, and Leading?

Despite bearing an immense weight on a design’s final look, tracking in typography is still highly neglected or misunderstood. Many designers don’t realize the importance of tracking in type or mistake it for other typography techniques, usually kerning and leading. To dissipate confusion once and for all, let’s back down each technique and see their specific characteristics:

Leading

Leading example in typography

Leading is the vertical space between lines of the same text. When working with copy that has more than one like (like this blog, for example), you must ensure there is enough space between lines to make it legible.

While too little vertical space can make the text illegible, too much spacing can disrupt the reading flow. So, be careful not to go crazy when adjusting or increasing vertical space between text lines.

Leading is measured from the baseline, which is the base where the letters sit. When calculating leading space, you must take into account descenders and ascenders:

  • Descenders are letters whose features go below the baseline, for example, the lowercase “p.”
  • Conversely, ascenders are letters whose upward pars go beyond the mean line, like the letter “t.”

Typically, leading is set up to be 20 percent larger than the font size. However, special characters like those used when working with experimental typography may need a different vertical space distance.

Kerning

Kerning in typography example

Kerning also measures space, but the horizontal spacing, more specifically, the distance between two letters. Kerning guidelines and principles are meant to determine optimal legibility, readability, and aesthetic appeal.

When performing manual kerning adjustments to letters and characters, you must be extra careful. Even a slight mistake, such as extra or too little space, can cause legibility issues. For instance, if letters are compressed against each other, the text will be difficult to read. On the other hand, with too much space between characters, the text becomes awkward to read.

Another aspect to keep in mind is spacing consistency. Inconsistent kerning (copy where some characters are too close to each other and others are too distant) can frustrate readers.

A successful font kerning technique involves consistent letter spacing. That may sound easy, but when using serifs or decorative fonts, things can get a little complex.

Tracking

Example of tracking in typography

Tracking, just like kerning, adjusts the horizontal space between letters. That common feature makes many designers mistake one for the other or consider both the same technique. But despite their similarities, tracking and kerning differ significantly.

Kerning involves the distance between two letters, while tracking is the spacing between all letters in a word or line of text. Ideally, when working with typography on a design, you will first adjust the kerning and then, with great caution, set the distance between all letters.

Most professional fonts come with pre-defined tracking settings. But if you are working with a custom font or want to achieve a unique font style, you can play with tracking variations. Changes in character spacing are usually made to highlight a word or better fill a design space.

Most graphic design software has built-in tracking tools. However, I remind you that playing around with tracking settings can make a world of difference but also cause a lot of chaos. Always be very careful and only make intentional adjustments.

Bad Letter Spacing vs. Good Tracking Typography

Now that you have a clear idea of how tracking in typography works, I will show you some examples of bad and good uses of this technique.

Examples of Bad Tracking

Example of a text that is difficult to read

Today, most website builders and graphic design software manage typography tracking automatically. Therefore, examples of poor use of letter spacing are escarce.

Generally, you can recognize a bad tracking adjustment just by looking at a text and determining whether the designer set too much tracking space or the letters/words are not separated enough.

What many designers don’t realize is that the tiniest tracking in type adjustment can change the entire look and visual balance of a page. Tracking typography is not a simple game.

You can spot bad tracking when, for example, you see words on a page split in half with a hyphen. That is proof that the design has set the space too loosely, which complicates readability.

Examples of Good Tracking

Readable text example

Just like bad examples of tracking typography are easily noticeable, you can also quickly spot good ones. When a copy looks good and is highly legible, that usually means a proper tracking setup.

But let me explain good tracking typography using a more specific example. Let’s say a designer is requested to create a landing page for an apparel brand web app. The target audience is Gen Z customers, and the client wants a modern and user-friendly aesthetic that encourages visitors to explore their content.

To that end, the designer opts for a sleek sans-seif font that meets the desired aesthetic. But, instead of sticking to the pre-established letter spacing, the designer makes subtle adjustments, increasing the space and breathing room between characters.

Those subtle tracking changes immediately give the text an open and friendly vibe that matches the brand’s essence.

This example shows how, by manipulating tracking in typography, you can create a design that is not only legible and visually appealing but also caters to a more engaging experience and communicates the brand’s core values.

Tips for Tracking in Typography in Web Design

The good news for web and graphic designers who worry about racking in typography is that this technique is relatively easy to master.

Tracking involves adjusting the letters’ distance – character compression and spacing letters – until you get a visually appealing text that is easy to read. Practice will help you get the hang of it; in the meantime, here are some useful tips I use when adjusting letter spacing to elevate a web design:

Don’t Be Afraid to Experiment with Tracking

Letter spacing is a technique all professional designers who will work with typography should learn. With time and practice, you will become more confident with tracking, and you won’t have to experiment much when changing letter spacing in your fonts.

But as you begin exploring this technique, try to experiment as much as you can. Choose different fonts and tighten/loosen the words. See how each font style looks after those changes: Is the text still legible, or has it increased/decreased readability? Does the text look more polished or modern after loosening/tightening the letters?

You can experiment with customer or abstract typography, which allows more room for creativity and playing with negative space. Experimenting will help you pick up this technique faster and discover what works and what doesn’t.

Make Gradual Changes

Making gradual tracking adjustments is the only way to precisely control the distance between letters and characters. Abrupt changes can quickly disrupt the text’s readability and hinder its visual appeal. Go slow, making incremental adjustments until you find the sweet spot.

Acknowledge The Difference Between Fonts

Most familiar and widely used fonts have pre-defined letter spacing settings. However, those settings may not be ideal if you plan to use those fonts in a different size and for a different purpose than the font designer intended.

Before you start making tracking adjustments, you must consider the type of font you are working with.

For example, if you are designing a hand drawn logo and plan to use script or cursive fonts, the tracking and kerning for that type of typography are very delicate. For these special fonts, you want the letters to connect to give the impression of cursive writing with pen and paper. Still, you want to give letters enough room to prevent them from stacking too tight together.

As you will see, each font comes with unique needs regarding tracking that you must learn to get the most out of them in your designs.

Work on Tracking, Kerning, and Leading

Tracking in type is not an isolated technique. Effective typography spacing involves the overall spacing between characters and text lines. Along with tracking, you must put leading and kerning adjustments into practice. Combine these three techniques to fine-tune your copy and improve its legibility and aesthetics.

Test Your Results or Ask for A Second Opinion

Have you ever worked on a typography design project before? After staring at the same text for several hours, letters can begin to blur together. When that happens, you may struggle to find the right letter spacing, so it’s best to take a break from the copy.

Another excellent tip is to ask opinion from a second pair of eyes. Having a college take a look at different versions of the copy and tell you which one looks best can be really helpful. You can also show 2 or 3 project versions to your client and see which one they pick.

Final Thoughts

Tracking in typography is a subtle yet crucial technique you can use to take your website copy to the next level.

Are you struggling with website readability issues? A small letter spacing adjustment can make a world of difference to improve legibility. Have you picked the perfect font for a client’s brand, but there’s still something missing? Try playing with tracking to give your text the exact vibe you are aiming for.

Start exploring and practicing tracking in type today, and you will soon master this valuable typography technique.

Portfolio

Fresh inspiration is a fingertip away,
Download Our Portfolio.

Download Our Portfolio