Letter spacing Photoshop to CSS

Letter spacing Photoshop to CSS is making confuse a web designer when the Photoshop letter spacing do not match with CSS properties.

Tracking in the Photoshop is the term used for the spacing between the selected text. On the web design, that process known as “Letter-spacing”.

You can convert the Photoshop text Tracking into letter-spacing with following formula:

Tracking / 1000 = letter-spacing

So here are the calculation to converting the Photoshop tracking into CSS letter-spacing:

1000 = 1em;
100 = 0.1em;
10 = 0.01em;
1 = 0.001em;

If the text tracking is 100 in Photoshop, the css property should be:

Please note that you need to use “em” for the letter-spacing in CSS to get the best result.

I am showing the example below:

letter-spacing

Comments

No Comments

Leave a comment

All fields are required.