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.

Photoshop to Letter Spacing CSS Converter

See the Pen Photoshop to Letter Spacing CSS Converter by Ben Marshall (@bmarshall511) on CodePen.

Photoshop Values vs. CSS Values

Are you a frontend developer? I’m sure you’ve ran into the troublesome task of getting right font sizes from Photoshop to CSS. Designers usually work with points, which are used in the print, but not common on the web. As frontend developers, we often have the task to translate certain Photoshop values into CSS units — commonly this is done for letter tracking in the Character view.

Convert Photoshop Letter Tracking to em

First up, here’s how you convert Photo’s letter tracking to em values using the formula below:

x / 1000 = y

In the example above, x is Photoshop’s letter tracking value and y is the equivalent em value. For example, if you have a Photoshop letter tracking value of 200, the resulting CSS em letter spacing value will be 0.2em.

Convert Photoshop Letter Tracking to px

You can also convert Photoshop’s letter tracking to pixel values using the formula below:

x * z / 1000 = y

In this example, we’re using z as the font size in px value, x PS letter tracking and y being the pixel letter spacing value. For example, using the same Photoshop letter tracking value of 20, with a font size of 10px, the resulting CSS letter spacing value will be 2px.

Photoshop Unit Conversion Sass Function

Using Sass? Use this handy function to easily convert Photoshop units to em and px values. Just plug in the Photoshop unit ($unit), like letter tracking. You can change the return values from em to px ($return) and set the base font size ($base) in pixels.

@function photoshop-unit-convertsion($unit, $return: 'em', $base: '16') {
  @if $return = 'em' {
    @return ($unit) / 1000;
  } @else {
    @return ($unit * $base) / 1000;
  }
}

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.