Kerning vs Tracking in Typography

Are you aware of how kerning differs from tracking?

These terms are common in the world of designers and branding professionals, but they often leave people in puzzled.

Today, we aim to eliminate any misunderstanding and present you the key distinction between kerning and tracking.

Ready to learn? Let’s jump in!

Kerning vs Tracking : What is Kerning?

Kerning is a design technique that adjusts the distance between two letters and ensures the text appears balanced and visually appealing.

In the image above, you can notice the kerning in the word “quick” between the distances “i” and “c.”

Same as the word “jumped” that contain kerning between “m” and “p”. You can see there is a polished overview that how kerning has made the both words look understandable and cozy.

Another image below may sharpen your concept of this.

The space between “T” and “e” in the word “Tech” build the aesthetics in the following typography though in separate use it looks confusing.

But if you add kerning to a logo that sparks a design insights, it may catch your site toward the cool one!

Now, take a glance at the image above.

The proper space between “H” and “E” and “E” and “W” in the word “CHECK,” “THE,” “NEW,” and “VIEW,” respectively, denoting the kerning spaces.

Looking nice!

Kerning vs Tracking : What is Tracking?

Letter-spacing, commonly called tracking, denotes the adjustment of spaces between characters within a block of text.

In broad sense, tracking alters the space between characters in a given text impacts both its density and visual structure.

Let’s talk about the picture.

In the image above, setting tracking to 0 ensures the text is easier to read and fits more characters on one line than a setting of 100.

Just notice over the first line for the above image where tracking is set to “-50”. Such a dense!

Now, the third one. Looks good, but it’s overspaced with tracking “100”.

Now, take a gaze at the middle image bearing “0” tracking and look cozy with the style.

That’s how tracking works!

Significantly, overly tight tracking can make words difficult to decipher, while excessively loose tracking can break the visual connection between characters.

For an in depth overview on typography in tracking, you may go through our blog on Mastering Tracking in Typography .

Kerning vs Tracking: What’s the Differences?

The key differences between kerning and tracking are easy to track.

In the image above, the left one expressing the kerning essence where the spacing between “m” and “e” in the word “measure” exhibits the aesthetics and the characters are properly spaced.

But the spaces between the other letters are not the same as “m” and “e”. It occurs in tracking.

Still, looks great!

In contrast, in the right one, the spaces among all the characters are evenly spaced as tracking strikes here.

In the overall study, Tracking, similar to kerning, deals with changing the horizontal space between characters.

But in a birds eye view, tracking and kerning, though similar in some aspects, are distinct in their functions. While kerning focuses on adjusting individual letter pairs, tracking uniformly changes the spacing across all letters in a text segment.

When designing with typography, the first step is to adjust the kerning, which corrects the space between specific characters. After this, you should move on to setting the spacing between all the letters, taking great care to maintain visual harmony to implement tracking.

When you read any logo copy, your eyes focus on the words and sentences, not the spaces between letters. This makes it easy to miss spacing problems. Besides, adults don’t see individual letters anymore; they just see whole words after years of reading.

It’s a simple trick that lets you focus on how the letters look and fit together instead of reading the words.

Pro Tips– Consistency in spacing is an essential aspect to remember. Irregular kerning, where certain letters are restricted while others are spaced apart, can negatively impact readability and annoy readers.

Kerning vs Tracking : How to Adjust Them?

In typography, a designer has to balance the spacing between characters as it implies their capabilities, and so does the design.

To know more precisely, one should create an equal distribution of spaces between all individual characters.

Let’s see how to accumulate them for a better typographic experience.

To do this effectively, we employ two essential typography techniques for word spacing: tracking and kerning.

Technique 1 : Adjust the Tracking

Tracking, often called letter spacing in CSS, is employed to adjust the spacing consistently throughout a whole word or a more significant section of text.

To use it in CSS, you might initially set letter-spacing: 0.1em;, observe the result, and make any necessary adjustments.

As shown in the example above, lines of uppercase text naturally look more even and harmonious when the letter spacing is increased.

This simple adjustment significantly improves the text. Conversely, reducing the spacing gives it a crowded appearance and makes it harder to read. But the matter of concern is how you determine if it’s too little or too much.

As a rule of thumb, spacing is excessive if it seems as though another letter could nearly fit between the characters.

To discover the perfect tracking, begin by increasing the tracking too much and then carefully scaling it down.

Technique 2 : Balance the Kern Spaces

To create better visual balance, font designers adjust the sidebearings of specific character combinations.

Therefore, it’s standard practice for fonts to include kerning pairs, whereas tracking is set to 0 by default and isn’t stored in the font file.

The fun fact is that a typeface with proper kerning is virtually invisible, yet the lack of kerning becomes obvious when it’s disabled.

If the typeface is well-designed, there should be no need to adjust the spacing of individual characters in mixed-case text.

In the majority of fonts, capital letters are specifically designed to align with lowercase letters.

Many type designers prefer tight overall spacing around characters to make their typefaces as flexible and versatile as possible. It’s assumed that you, the typographer, will take responsibility for adjusting the spacing as necessary.

For uppercase letters, default kerning pairs work to reduce the spacing in combinations such as “A”, “V” and “W”, “A”, so they don’t seem too far apart.

How Do They Accommodate Together?

From top to bottom: bad, good, and best set word. The third line’s reduced space around the A, achieved through negative kerning, completes the design flawlessly.

Let’s take a closer look at the shampoo example presented above.

During the first step, we left everything unchanged. The default kerning was enabled, but it had no effect on the set word.

Afterward, some letter spacing was added to remove the dense spots, and the overall appearance improved noticeably.

But even now, the space surrounding the triangular A looks excessively large to the eye.

This is when negative kerning is introduced to reduce the spaces further and produce the best result.

Final Thoughts

Typography is the “Spear” of a designer to beat the shots in the market.

We assume that you have learned the ultimate difference between kerning and tracking in depth.

Now, it's time to drive your design with the typographic flow.

If any obstacles occur, you can consult the best design mentor at a great design agency in the US.

Happy Designing!