When is tighter better? The art of letter spacing

I was trying to create a simple landing page for a SaaS idea and something just wasn’t working. It was basic enough – big bold copy in the typical Inter font, some soothing color gradients in the background, a bright colorful call to action – simple, typical, straightforward.

But there was something about it that didn’t feel … professional. Can you feel it too? Can you pick up what I was sensing?

At first, I couldn’t tell what it was – all I had was this feeling. After all, I’m not a designer.

So I looked back at the Tailwind UI example landing page and studied the differences.

Then, I found it, the thing that seemed to make all the difference in the world – subtle, small, but packing a punch.

Do you see it too?

There are some obvious differences – color choice, the border radius. But those weren’t the source of the elevated sleekness I was getting from Tailwind’s example.

The difference was in the letter spacing, or how close the characters of the big bold copy, “Deploy to the cloud with confidence,” were. Tailwind used a class for that copy called “tracking-tight” which brings the characters closer together, closer than the characters of my copy.

In fact, Tailwind uses “tracking-tight” in a bunch of places on their own website, not just in their example code. It brings a sleek, cleanness to the design that we’re used to seeing in product websites.

Let’s apply it to my landing page and see how it feels.

I don’t know about you, but that feels much better.

But what did “tracking-tight” actually do?

“Tracking-tight” sets a CSS property called “letter-spacing” to a value of -0.025em. (We’ll talk about ems and rems and other fun units in a different post).

.tracking-tight {
	letter-spacing: -0.025em;
}

You can, of course, set that property to whatever you like, but Tailwind has some preset values for you.

Here’s how they’d look on my landing page:

Letter spacing IRL – Stripe

Stripe, the iconic SaaS landing page, has some pretty tight tracking of its own. But what would that page look like with the different Tailwind letter-spacing values?

Let’s take a look (ignore the different backgrounds, Stripe does some interesting animation on their homepage):

But why does tighter make it look more professional?

A “professional” look is highly subjective and heavily influenced by what’s trending at the time. But I think there’s a logical reason why a tighter look feels cleaner.

In the context of a product page, we can convey professionalism by emphasizing cohesion and structure.

By decreasing the space between the letters, we are making that whole sentence more visually succinct and therefore feel more cohesive. It looks like a unit brought together with intention and purpose, words we would associate with professionalism and clean design.

There’s another reason too – we assign more weight to things that take up space and feel dense, and a more compact look feels more dense.

Even though the amount of pixels it’s taking up is the same for each letter spacing option, bringing the letters closer together gives that section an illusion of more weight, and more weight feels more important and impactful.

So would I ever want wider tracking?

Tighter tracking works well for more serious products, which SaaS products usually are. But what if your product is lighter, more fun? What if you’re using a funky font, how would tighter or wider tracking feel then?

Let’s use Dunkin Donuts as an example. Their colors are bright, their font is bubbly, and they’re selling delicious sugar. What would the different tracking values do to a brand like that?

Let’s take a look.

Here’s the Dunkin Donuts homepage, currently advertising their rewards program, at the various letter spacing values.

For me, the tighter tracking feels claustrophobic, while the wider values feel airy and more comfortable. I think I like the “.tracking-wide” value best. What about you?

Letter spacing vs. Tracking vs. Kerning

You might have noticed that Tailwind calls the class “tracking” but the CSS property is “letter-spacing.”

There’s also another fun, related term you should know, called kerning.

They all deal with the same concept and, for our purposes, basically describe the same effect, but there are some slight differences that you should be aware of — you know, for fancy design dinner parties and such.

Tracking and letter spacing both refer to the space between characters (or glyphs, if you want the design terminology). Tracking is the general term for this whereas “letter-spacing” is what it’s called in the world of CSS.

Kerning is something a bit more particular.

Kerning refers to the space between just two characters. For letter spacing, we set the CSS property to a value that gets applied across all characters evenly. But in graphic design, you might want to assign different values to the space between different characters. And it makes a surprisingly big difference.

Check out the example below, from Creatopy, to see how kerning can affect the overall look of a piece of text.

Those uniquely assigned spaces really pack a punch! For our non-graphic-design purposes, we probably won’t go in and do a ton of kerning, but it’s neat to know that you have that option if you’re feeling experimental.

What do you think about all this letter spacing business? How big of a difference do you think it actually makes to the overall look and feel of your site?

Reply and let me know!

Happy designing :)
Saron

If you were forwarded this email, feel free to subscriber below to get future posts.