What is Tracking in Typography? The Ultimate Guide to Typography Tracking

Published in

UX Planet

11 min readNov 30, 2023

Tracking in typography (also known as letter spacing) is the practice of adjusting the horizontal space in between the characters in a word or a line. The amount of horizontal space between letters, numbers, punctuation, and other characters in a word or a line is usually fixed.

UI/UX designers manipulate this spacing, i.e., apply “tracking typography” to make the lengths of lines/words look more even and improve the overall appearance and legibility of the text. The same goes for designers in any field that uses typography. Here, we will:

Embark on an enlightening journey through the intricate world of tracking and explore exactly what makes it a critical component of good typography and good design in general.
Dispel any confusion or misconceptions about the efficient application of tracking in typography and UI/UX design.
Equip designers with clear, actionable guidelines on how to apply efficient tracking in their work to elevate their designs to new heights of visual excellence.

Join us on this journey of discovery, as we decode the art/science of tracking, and empower designers to reshape the visual world around us.

Tracking Typography Definition: Tracking is the process of manually adjusting the horizontal space between letters in a word/line to create a specific visual aesthetic for a design.

Tracking in Typography: As It is Used Today

In the intricate craft of typography, where every curve, letter, line, and spacing bears immense weight, tracking has emerged as an ultra-potent technique that is widely lauded by UX designers for its all-encompassing effectiveness.

Web designers use tracking in typography to give the content on their website an aesthetic appeal, an effort that directly reflects on their brands.
UI designers use tracking to make their app content more legible to increase the amount of screen time users spend on their products.

In print media, the use of tracking dates back to the time of the manual printing press.

Despite its illustrious history of significance in typography, print media, and digital media, tracking continues to be an underrated, misunderstood, and confusing concept for many aspiring designers. There are 3 myths behind this confusion:

Myth #1: Tracking is All Technique, No Creativity

Tracking is not all technique, it needs creativity.

Tracking is often seen as a purely technical detail that’s not vital to the creative aspects of the design process. In simpler terms, tracking isn’t “cool” enough for many aspiring designers who are driven by creativity. They are, of course, wrong.

Tracking is a single but vital part of any design strategy that aims to improve the appearance of a page and the legibility of all pieces of text on the page. Tracking is a versatile tool that allows designers to create various effects in their designs.

And like with all versatile tools, you need creative skills to make the most of tracking. In other words, if a designer doesn’t know the fundamentals of tracking, their designs won’t be able to create designs that are good-looking or clear to the target audience.

Here’s an example that demonstrates how creativity is at the core of tracking:

A UI/UX designer is asked to create a promotional landing page for a restaurant app.
The brand’s goal is to convey a modern, user-friendly atmosphere that entices visitors and encourages them to explore the app’s features.
To achieve this look, the designer picks a sleek sans-serif font, that instantly aligns with the app’s Gen Z aesthetics.
Rather than adhering to default letter spacing, the designer makes subtle adjustments, adding more space and breathing room between the characters.
This subtle manipulation of tracking instantly gives the text a more open and friendly feel, which matches the user-friendly vibe the app wants to project.
To magnify the app’s welcoming vibe, the designer curates a vibrant color palette.
The synergy of generous letter spacing and lively colors leads to the creation of a landing page design that’s legible, aesthetically pleasing, and reflective of the brand’s core ideas.

This example showcases how tracking in typography and design stands as a fertile ground for creativity for UI/UX designers. Applying this creativity is vital because professionally designed typefaces always come pre-spaced for different size ranges.

If the typeface you’re using is within the intended size range, there’s no need to manually adjust the spacing. But, that wasn’t the case in this example. Here, the designer was using a typeface smaller than the intended size range of the text on the app’s landing page.

With the creative use of tracking, the designer set the typeface larger than the initial range and improved the legibility of the small text. Tracking also allowed the designer to give the text on the page an airier and more inviting feel.

Myth 2: Tracking is the Same as Kerning

Difference between tracking and kerning. Tracking is not the same as kerning.

Tracking is also misunderstood because it’s confused with kerning which is the process of adjusting the space in between individual letters. On the other hand, tracking is the process of adjusting the space between ALL characters in a word/phrase, not just individual letters.

Here is a visual example of the difference between kerning and tracking:

Kerning: T O O M U C H S P A C E

Tracking: T O O C L O S E T O G E T H E R

As you can see, kerning is used to adjust the space in-between individual letters, while tracking is used to adjust the space between all letters in a word/phrase. Both can improve the legibility/readability of text and can be used to create different moods and tones in designs.

Good tracking can’t replace good kerning and vice versa. Both are vital aspects of the design process. But to think both are similar to the point they don’t deserve equal attention is a huge mistake that UI/UX designers must avoid.

Myth #3: No One-Size-Fits-All Approach

Another reason why tracking is not appealing to new age designers is because there’s no “one size fits all approach” to the process. Here’s the reasoning behind this myth:

The optimal tracking for a piece of text will depend on its size, style, and overall design.
That means designers must approach the process of tracking on a case-by-case basis depending on the size, style, and overall design of the text they’re working with.
Hence, there are no universal principles of tracking that designers must use at all times.

These statements are all wrong. Tracking practices are based on a long list of universal guidelines based on optics, letter spacing, and letter forms. Here are some of the universal tracking guidelines that designers must follow to make their work more visually appealing:

Capital Letters

Give capital letters enough breathing space. Don’t squish them together too much, or they’ll be hard to read.

Incorrect: “UXDesign” (letters too close)
Correct: “U X D e s i g n” (appropriate spacing between capital letters)

Lowercase Letters

Don’t spread lowercase letters too far apart. This can make the text less clear and visually appealing.

Incorrect: “t h i s” — Excessive tracking in lowercase letters can make words lose their coherence.
Correct: “this” — By keeping lowercase letters closer together, designers maintain readability.

Complex or Handwritten Fonts

Use looser tracking for complex or handwritten fonts. These fonts can be more difficult to read, so giving them extra space usually helps improve legibility. For example, when using a decorative, cursive font like Harlow Solid Italic, open tracking is vital.

Wrong: When “HarlowSolidItalic” is designed with tight tracking, the text is hard to understand.
Right: “H a r l o w S o l Id I t a l i c” open tracking allows this unique font to be legible and stand out without crowding the space.

Small Text on Packed Backgrounds

If your text is small and the background is colorful and full of multiple design elements, add more space between letters. This will make your text stand out and be easier to read.

Imagine a small sign that reads “SALE!” with all letters tightly packed on a colorful, eCommerce website landing page. Some readers may miss the call to action altogether. Increasing the tracking: (S A L E!) makes it more legible in the middle of all the visual noise.

Large Text (Headlines and Sub-Headlines)

For large text, like headlines and sub-headlines, always try to tighten the spacing between letters. Large text with tight spacing looks neater and more cohesive.

For example, a bold headline like “MEGASALE!” keeping the letters as close together as possible helps maintain a more cohesive and eye-catching appearance.

Compare the previous example with this one: “M E G A S A L E!”

Close tracking helps maintain a compact appearance, which is vital when emphasizing a topic that’s worthy of making the headline.

Small Text

When using a smaller font, do the opposite of what you’d do with large text. Try to find ways to increase the space in between letters to make it easier to read. For example, in a short product description, using a small font with open tracking will almost always enhance readability:

“item123” is much easier to read than “i t e m 1 2 3”

By following these universal tracking guidelines, designers can strike the optimum balance between letter spacing and make sure that their work isn’t just visually appealing but also easy-to-read, no matter what type of font or typeface they use.

Here’s a chart summarizing the do’s and don’ts of tracking in typography:

The default, built-in spacing of any font will not always be suitable for your design work. This is especially true if the text you’re designing is set to be displayed on a low-resolution screen or printed on a low-quality surface.

In these cases, designers must adjust the tracking to improve the text’s legibility. Use this chart of do’s and don’ts to strike the right tracking balance every time this issue comes up in your design work.

How to Change Typography Tracking

Most design software tools, such as Adobe Illustrator, Photoshop, Canva, etc., provide easy ways to change tracking or letter spacing. In Adobe InDesign, Illustrator, and Photoshop, you can change the tracking value setting by:

Select the text you want to modify/adjust
Go to the “Window” menu
Select “Type”
Select “Character”
Look for an icon that looks like two letters “VA” with a two-headed arrow (←>) underneath
That’s the tracking tool
Adjust the tracking value to increase/decrease letter-spacing as required

If you’re using Canva, change the tracking value by:

Select the text you want to modify/adjust
Locate the option titled “Spacing” in Canva’s top toolbar
The spacing tool icon resembles 3 parallel lines (in one row, top-down) with a double-sided arrow (↕︎) right next to it
Select “Spacing” to open up a list of options
From this menu, modify the letter or line spacing settings

In Canva, adjusting the letter or line spacing” function serves the same purpose as changing the tracking value in Adobe software tools.

Tips for Tracking in Typography

Now that we’ve discussed why and how designers should apply tracking to their work, let’s discuss some basic tips and recommendations that will make this journey smoother.

Don’t Be Afraid to Experiment

Some fonts require more or less tracking to maintain a certain degree of readability and aesthetic appeal, especially at different sizes and in different UI contexts. Experimenting with tracking is the only way you’ll find the ‘sweet spot’ in terms of how tight/loose your text looks.

This is especially true for professionals working on responsive UI/UX designs. Experimenting with tracking will help designers ensure that their content remains legible and visually pleasing across all devices and layouts.

Incremental Changes

Always make tracking adjustments in small increments. It’s the only way you’ll gain precise control over the spacing in-between characters. Incremental changes are less likely to disrupt the text’s overall readability and aesthetics of the text. Keep making gradual tracking adjustments until you strike the right balance.

Tracking Works Best When Combined with Kerning

Efficient tracking takes care of the overall spacing between characters. But, in professional UI/UX design or website design, that isn’t enough. Tracking doesn’t address the issues that arise when certain characters appear too close due to their design.

For example, the letters “AV” in the word “AVENUE” appear naturally closer than the letters “VE” because the letters “A” & “V” have overlapping descenders. Tracking will not impact the spacing between the letters “AV.”

Here are some other examples of letters that appear naturally closer together in designs due to their built-in overlapping ascenders/descenders:

When working with these letter pairs, designers must use kerning and fine-tune the spacing between them. Only then can they ensure optimal readability.

Different Fonts, Different Tracking Practices

While most professional fonts typically come with pre-defined tracking settings, these settings aren’t always ideal when you use the font in a size that’s not originally intended by the font designer. You’ll have to customize the tracking settings for such fonts.

For example, in UI/UX design, you’ll have to design interfaces that have limited screen space. Even if you use a widely popular font like San Francisco Pro, Roboto, or Open Sans, you’ll have to increase tracking slightly to maintain the legibility of the text in your interface.

Here’s a handy chart of the top most-used fonts in web design and UI design, along with some recommended tracking practices for designers:

Typically, fonts that are overly bold, italicized, or full with intricate design elements are more likely to need supplementary tracking adjustments. If you’re using a thin font with little weight, you shouldn’t have to care as much about excessive tracking.

Spaced Out: How to Make the Most of Tracking in Typography

The more you learn about tracking, the simpler it gets as a concept. In fact, if you experiment with different fonts and tracking settings just for a few hours, we are sure you’ll get a clear understanding of this all-essential element of typography and design.

So, what are you waiting for? Open your editing software, copy-paste a bunch of text on the document and start tightening or loosening the spaces between the letters! For more in-depth info on tracking, contact Design Studio’s UX/UI design experts now!

Originally posted on design-studio.io.