3

Inside photoshop the text tracking is set to -2.

If inside word-spacing on CSS I set the text to -2px it doesn't look the same. How can I replicate the photoshop text tracking of -2 into CSS word-spacing?

I've been looking online for the conversion but it doesn't seem right.

Thanks in advance!

user2482397
  • 43
  • 1
  • 3
  • 2
    Photoshop and HTML operate in different spaces with different measurements, so this is relatively normal and there is usually no quick fix. Can you show some screen shots of what you have and how you would like it? – Pekka Jul 21 '13 at 12:00
  • Maybee it's in pt.. try `-2pt` or `-2em` – tobspr Jul 21 '13 at 12:01
  • Possible duplicate of [Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS](https://stackoverflow.com/questions/13509752/convert-letter-tracking-value-set-in-photoshop-to-equivalent-letter-spacing-in-c) – davidcondrey Jul 22 '17 at 08:15

2 Answers2

10

According to Photoshop tutorial, “the kerning and tracking values in Photoshop are based on 1/1000 em”. Text tracking affects spacing between characters, not words. So the CSS counterpart to setting text tracking to -2 would be letter-spacing: 0.002em.

However, in most browsers, this won’t have any effect, since 0.002em is such a small quantity. You may see a difference of one pixel if your font size is hundreds of points. On Firefox, an effect may be seen if the setting is applied to a long string; Firefox presumably internally computes the positions of characters using fractions of pixels, so even a very small letter spacing value can have a cumulative effect.

In general, you should not expect the details of text rendering to be the same across browsers, or the same in a a browser as in Photoshop.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
2

I think the letter-spacing in CSS should be -0.002em.

Here is the calculation:

1000 = 1em; 
100 = 0.1em; 
10 = 0.01em; 
1 = 0.001em; 
-2 = -0.002em
Hasibur Rahman
  • 49
  • 4