How to calculate CSS letter-spacing v.s. “tracking” in typography?

Question

I have instructions from a graphic designer for a layout that specifies \"track 100\" for some elements. In CSS letter-spacing is the equivalent property for \"

Answer 1

For the most part the above answers are accurate enough, however, the 1000 that's being used assumes your font has an Em Size of 1000, and that's not always the case. I've seen fonts that have an Em Size of 1024, and some that were even 2048, which is obviously going to have an impact.

You can find out a font's Em Size by opening it inside of something like Font Forge and then selecting the Elements -> Font Info menu item, and the General tab.

Answer 2

Do you have to use pixels? The conversions I found is a tracking value of 1000 is equal to 1 em in CSS, so in your case tracking 100 should be 0.1 em.

EDIT

To go from EM to pixels use this site PXtoEM.com. For your specific case 0.1 em converts to 2px. However this is based on a 16pt font, so you will have to adjust for the specific font size you're using.

Answer 3

TL;DR: divide the tracking by 1000 and use em's

---

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

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

This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. CSS Lengths - Mozilla Developer Network

Why is tracking different?

Layout apps such as 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 times it by 1000.

Converting tracking back to whole em's

To do this we just need to divide the tracking number by 1000 to get the unit back to a whole em that CSS can use.

So 50/1000 = 0.05em.

Calculating this in CSS/SCSS

If you are using SCSS and want a reusable solution - here is a mixin.

// Convert illustrator, indesign and photoshop tracking into letter spacing.

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

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

To use the above functions you can just do this.

.example {
  @include tracking(50);
}

Alternatively you can just to the maths inline without a mixin so it's less abstracted:

.example{
  letter-spacing: #{(50/1000)}em;
}

The output for the above examples will be:

.example {
  letter-spacing: 0.05em;
}

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 your sites design won't appear as desired or even illegible to read.

Additionally 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.

Answer 4

Tracking Conversion CSS “letter-spacing”

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em