CODEWITHSUNDEEP
css
user70192
user70192

Reputation: 14214

Line and Letter Spacing in CSS

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!

Upvotes: 5

Views: 10597

Answers (6)

Sam Starling
Sam Starling

Reputation: 5378

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?

Upvotes: 4

Jason
Jason

Reputation: 3485

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.

Upvotes: 9

clairesuzy
clairesuzy

Reputation: 27664

for leading it's 

.myclass {line-height: 21px}

line-height can have units like px or em, used without the unit, which is the ususal way you see it - it's a percentage of the font-size so for example if the font-size: is 10px and you specify a line-height of 2 the line height will be 20px

see: Unitless Line Heights

Upvotes: 4

Stuart Burrows
Stuart Burrows

Reputation: 10814

You'll need the units as others suggest. If you've got a PSD you can work it out from there.

Personally I get some designs where I can't get the unit size, normally because the text is rastered or I get a flat jpeg or something. In these situations I use firebug and pixel perfect. This overlays the design onto the site I'm building and I can tweak the CSS accordingly.

Upvotes: 0

Unicron
Unicron

Reputation: 7466

You should ask the designer what units they were referring to in the briefing. Everything else is just speculation. Then it's worth looking into how to implement the unit in CSS.

Upvotes: 0

ChrisBenyamin
ChrisBenyamin

Reputation: 1728

Much better is to working with "em" as unit.

Following your spacing is always relative to your font size.

But to answer your question, I agree with Sam Starling and clairesuzy.

Upvotes: 2

Related Questions