Today we are going to show you how you can convert letter-spacing from tracking from design programmes like Photoshop or Illustrator to CSS.

Have you ever had that conversation with a graphic designer for a layout that specifies tracking (letter-spacing in our language) for text elements?

So how do you make this conversion?

The Simple Answer

Divide the tracking by 1000 and use em’s.

A bit of background about letter-spacing is that it is always applied to text so we should use a relative unit of length. Font size can change by the user or even by the cascade.

The best unit of length for text is the em unit.

Why is tracking different?

Programmes like Adobe’s Photoshop, Illustrator and InDesign use em’s in their tracking but manipulate the unit so it’s an easier number for designers to play with. To make it easier they multiply it by 1000.

Take a look at this screenshot from Illustrator:

Note: Tracking (in thousandth of an em)

Converting tracking back to whole em’s

To do this, all we need to do is divide the tracking number by 1000 to get the unit back to a whole em that you can use in CSS.

So 75/1000 = 0.075em.

Pretty simple right?

How to calculate this in CSS/SCSS

If like us, you use SCSS and want a reusable solution, then here is an awesome mixin for you:

/* Convert Illustrator, InDesign and Photoshop tracking into letter spacing.
-------------------------*/

@function tracking( $target ){
    @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
    letter-spacing: tracking( $target );
}

Then to use the above function you can simply type:

.txt-element {
     @include tracking(75);
}

Alternatively, you can just to the maths inline without a mixin so it’s less abstracted as follows:

.txt-element {
    letter-spacing: #{(75/1000)}em;
}

The output of the above code would be:

.txt-element{
    letter-spacing: 0.05em;
}

A few things to note…

You should not use a pixel-based value as pixels are fixed and break when:

1. The designer changes the font-size. You would need to recalculate the value.
2. If the user changes their text size the design of your site won’t appear as desired or even illegible to read.

In addition to this, browsers render text different to how the graphic design programs do so don’t be surprised if the designer tweaks the tracking/letter-spacing on review of the implementation ; )

We hope you enjoyed this article and that it has helped you. Happy coding all!