We're live-coding on Twitch! Join us!
Converting Photoshop Letter Spacing to CSS

Converting Photoshop Letter Spacing to CSS

Photoshop to CSS Letter Spacing Converter

.letter-spacing { letter-spacing: 0em; }

How it works:

Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, we simply call that Letter Spacing in CSS. The problem is that Photoshop Letter Tracking doesn't convert 1:1 to Letter Spacing in CSS.

However, it's very easy to calculate the conversion from Photoshop to CSS (and vice versa). Here's the simplest version of the conversion:

Photoshop Letter Tracking CSS Letter Spacing
1000 1em

All you have to do to is divide the Photoshop number by 1000 to get the "em" unit amount for CSS. Alternatively, you can use the simple converter from above if you're lazy.

Like this article? Follow @whatnicktweets on Twitter