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 "tracking".

Given a value for tracking, how do you express this as a value for CSS in pixels?

Elroy

Trcking (letter-spacing) can be safely expressed in ems. – Priscella

Answer 1

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.

Myrilla

Everything else in the CSS is in pixels. – Elroy

@Diodeus: Why? Visitors can enlarge or shrink a web page, so why not use relative sizes? – Boar

@Diodeus: Here's the problem with using pixels in this case. Let's say you've got a standard sized font (so you've applied no changes to the size of the text). Now give it a tracking of 10px. Looks good right? Now let's triple the size of the font, 10px tracking squishes all the letters together. Now you would have to specify a new tracking for every size change you have in your page, where as using EM for relative sizing allows you to specify one tracking for all fonts on your site, and it will adjust itself based on the size of the font it was applied to. – Myrilla

Why? Because I can look at the artwork in Photoshop and easily measure things in pixels. I see your point with the tracking/zoom issue, but I still need to solve the problem as it exists. – Elroy

This is not entirely accurate. Many fonts use higher units per EM than 1000. The units per EM will need to be confirmed (using an app like FontForge) otherwise this divide b 1000 calculation could be misleading. – Churchwoman

Answer 2

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.

Sevenfold

Thanks, this is very helpful. Have you seen Malkalvak's answer re fonts using differing units per EM? This brings into bquewtion, do adobe apps use the 1000 as a matter of course, or do they use the units per em of the font in question. If the later is true, then the formula won't always be to divide by 1000. It will vary according to the font. I don't, however, know if Adobe locked in 1000 as the multiplier, or whether they derive the multiplier from the font itself. – Churchwoman

Answer 3

Tracking Conversion CSS “letter-spacing”

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

Shum

How did you get these numbers? Do you have a source for this? – Sammysamoan

Answer 4

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.

Sukkah

Thanks for pointing this out. After checking through FontForge, it just so happens the designer spec'd for a web development I'm working on has 2000 units per EM. I'd done all the conversions based on the 1000 units I'd seen mentioned on numerous web sites for such things. – Churchwoman