Convert Photoshop Letter Spacing to CSS

Written by
Published
Updated
Typical Read
2 minutes
Find your next web developer job
Associate Web Developer at Tokio Marine HCC (Houston, TX)

IMO, Sketch is the 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 Photoshop kerning (aka. letter tracking) values to letter spacing in CSS.

Pixel-perfect webpages from Photoshop can be satisfying until you come across Photoshop’s kerning (aka. letter spacing or letter tracking). The problem — Photoshop doesn’t convert 1:1 to letter spacing in CSS. Here’s how convert Photoshop letter spacing to CSS.

If you use Photoshop for site designs, you’ve probably came across paragraph Kerning or Letter Tracking. Kerning is the process of adding or subtracting space between characters. In CSS it’s called letter-spacing & converting kerning to letter-spacing it a cinch with the tool below.

Photoshop to Letter Spacing CSS Converter

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

How the Conversion Works

Designers usually work with points, especially in print media — the problem is websites use different units or measurement (px, em, rem, vw, etc.). Make sure you’re using the correct unit of measurement, otherwise you’ll get unexpected results — usually sizes much larger than intended.

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;
  }
}

Did you find Convert Photoshop Letter Spacing to CSS useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Convert Photoshop Letter Spacing to CSS' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.