Line and Letter Spacing in CSS

Question

I've been working with a designer on a project. This designer sadly got really ill and is in a hospital. I'm working to take the design and convert it to HTML/CSS. Before leaving, the designer gave me some information regarding some of the text. For the text, I was told:

Font Face: Arial, Tracking/Letter-Spacing: 72, Leading/Line-Spacing: 21

I know in CSS I can create a class with this information. For instance, I can do

.myClass { 
  font-family:Arial;
  letter-spacing:72;
}

I have two questions though that I cannot figure out

1. The letter-spacing looks way too large when I do this. It does not look like the original design. Is there some unit information that I need to add? Is there a standard unit that I should be aware of?
2. How do I get a line-spacing of 21(unit?) in CSS?

Thank you!

Answer 1

Tracking values in Photoshop are actually in thousandths of ems; Photoshop doesn't kindly specify this to the designer. So 72 = (72 / 1000)em = 0.072em. That will give you true pixel-perfection and make your designers sing your praises.

Leading is simply in pixels.

Answer 2

You're on the right track, you just need to add units. It sounds like the 72 is defaulting to being 72 times the normal – which is a huge amount of space. At a wild guess, you may want to try percentage for the letter spacing, and pixels for the line spacing, like so:

.myClass {
    font-family: 'Arial', sans-serif;
    letter-spacing: 1.72;
    line-height: 21px;
}

In my opinion, using anything other than % and px above would result in unsensible values. However, if that's not correct then have a play with the units, or even the values. Have you got an image of what the page should look like to guide you?