Photoshop Tracking to CSS Letter-spacing?
- Started
- Last post
- 16 Responses
- mosko
Does anyone know what line-spacing value I need to use that corresponds to a tracking value of '-10' in Photoshop? (The font is 18 pt).
For the life of me, I can't seem to get this correct. Neither px nor em, seems let me get exactly the right amount. It's always too little or too much space :/
- Amicus0
i assume you mean letter spacing.....
- Amicus0
and it would depend on the font wouldn't it?
- mosko0
In Photoshop (I think) it's called tracking. In CSS (again, I think) it's called letter-spacing. It seems to only depend on font size... or am I mistaken?
- Shaney0
Photoshop letter spacing and text generally not great, I would do the text in Illy if poss and import
- noiseisthis0
Tracking and kerning are both measured in 1/1000 em, a unit of measure that is relative to the current type size. In a 6‑point font, 1 em equals 6 points; in a 10‑point font, 1 em equals 10 points. Kerning and tracking are strictly proportional to the current type size.
- noiseisthis0
yo andswershuould b negative zero point zero one em;
- OK. Just tried that and it doesn't seem to work in Safari 4. The spacing is the same as -1px when using px values. So it's still too tight. Any ideas?mosko
- mosko0
Thanks noiseisthis for the reference. But that really doesn't make sense to me...
How does this work in my example?
(Sorry for needed so much hand-holding...)
- noiseisthis0
in yo css codes put:
letter-spacing: .01em;in PS, tracking:1000 is equal to CSS letter-spacing: 1em
so the formula is x/1000.
- noiseisthis0
convert it to px:
-0.01 * 16 = -0.16px;
- jimbojones0
you won't get it right in all browsers/OSs I'm afraid
- jimbojones0
besides, letter-spacing -0.5px for example will give you all sorts of hinting issues, (like blurry stems) because there is no 1/2 pixel.
- welded0
You can't be too picky when it comes to web typography.
- Stugoo0
thing is you can try to get it 'right' but different browsers render this sort of type layout differently.
Had the recent nightmare of client looking for a soild baseline grid but the text had to be in em's for accessibilty.basically. you can set it right and its up to the browser how it interpenetrates this. Give and take a little with letter-spacing in css for the moment (next 3 years while we take out ie6)