Convert Photoshop Letter Spacing to CSS

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.
Published
Updated
Typical Read
2 minutes
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Find your next web developer job
jobs by Indeed

Convert Photoshop Letter Spacing to CSS was originally published on Aug 28, 2018 and has recently been updated on Jul 10, 2020 to reflect emerging trends.

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.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.
Sponsored
Do you run a development agency, freelance developer or offer website services. Contact me today for information about advertising.

Leave a Reply

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.