Convert Photoshop Letter Spacing to CSS

Sketch may be the new go-to for web design, but there’s still a lot of dino-designers out there using Photoshop. This post is for those devs who need to convert letter tracking values to Photoshop letter spacing in CSS.

Convert Photoshop Letter Spacing to CSSUsing Photoshop for your web designs? You’re probably familiar with the term Letter Tracking. Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, this is called letter-spacing. The problem is Photoshop’s letter tracking doesn’t convert 1:1 to letter spacing in CSS. In this post we’ll go over how to convert Photoshop letter spacing to CSS.

Never fear — there is a formula for it! I also built a Photoshop to Letter Spacing CSS Converter for the lazy below. Translating Photoshop’s letter tracking (a.k.a. letter spacing) is a cinch with these simple math equations. Continue reading “Convert Photoshop Letter Spacing to CSS”