Convert the letter tracking value set in Photoshop to equivalent letter spacing in CSS

Question

I am currently creating a site from PSD. Most fonts have a tracking letter of -25 ( <- AV-> : I assume this is a character for line spacing?).

How do I get the same effect in CSS? I know that the letter-spacing: X , but it does not take percent, and -25px or pts will be a huge figure!

Answer 1

You can use em size instead of px , so the interval size is relative to the font size (so photoshop 25% is somewhere around .25em ).

Answer 2

In Photoshop, the letter spacing is called letter tracking and, in particular, is the space between each letter of the text. The problem is that Photoshop Letter Tracking does not convert 1: 1 to the spacing between letters in CSS.

It is very easy to calculate the conversion from Photoshop to CSS.

Formulas for converting PDF tracking to CSS letter spacing

em formula

  X / 1000 = Y X is the value of the letter-tracking in Photoshop Y is the value in "em" to use in CSS 

Example

Consider the following example: Photoshop has a tracking value of 200 letters.

 200 / 1000 = 0.2 

Result: 0.2em in CSS.

px formula

If you prefer to use the values ​​"px", then the formula

  X * S / 1000 = P X is equal to the letter-tracking value in Photoshop S is the font-size in pixels P is the resulted value in "px" to use in CSS 

Example

Consider the following example: Photoshop has a letter tracking value of 200 and a font size value of 10.

 200 * 10 / 1000 = 2 

Result: 2px in CSS.

Answer 3

In such contexts, unit numbers usually mean a typographic unit, which is a small part of the em unit. It is usually referred to simply as a “unit”. The value of this device is font-dependent, and it is expressed as the value of UPM (units per em). The total UPM value is 1000, but Microsoft fonts have 2.048, and other values ​​also arise. (This question is described in detail in the article UPM value 1000 set in stone? )

Assuming the UPM value is 1000, -25 will display at -0.025em. Setting letter-spacing: -0.025em tends to have a pretty small effect: a long text line gets about one "i" shorter. The effect that you get with CSS should not be the same as in Photoshop; PhotoShop's rendering mechanisms are different from browser mechanisms.

Answer 4

If your problem is with unit conversion, you can use em instead of px

Although em allows decimal numbers, it does not alter the rendering accuracy. 0.5px or equivalent accuracy is not displayed in browsers - it will become either 0 or 1px. Just because the screen cannot display half a pixel, at best it can approximate this with anti-aliasing.

For smaller fonts, anti-aliasing is likely to look worse than spacing. Another option is to search for the web font at the spacing you want by default. This way you will get similar results that you want, but would probably mean changing the font.

CSS spacing is just not as accurate as Photoshop. One of the reasons is that Photoshop also allows you to print with a screen / pixel resolution that you have to live with pixel precision. Although theoretically this is possible with a letter spacing that becomes more accurate with scaling, etc., I don’t know of any implementation that would really work that way.

If the correct spacing between the letters is really important to you, you can try to use SIFR to more accurately select the fonts than the browser is capable of - they can use anti-aliasing. Obviously, this will only make sense if the distance between the letters is a big problem.