As web developers, we often find ourselves translating designs from Photoshop into CSS. One of the trickier aspects of this process is converting Photoshop’s letter spacing (also known as tracking) to CSS’s letter-spacing property. In this post, we’ll explore how to make this conversion accurately and efficiently.

Understanding the Difference

Photoshop measures letter spacing in 1/1000ths of an em, while CSS typically uses em, px, or rem units. This difference can make direct conversion challenging, but with the right approach, we can achieve pixel-perfect typography.

The Conversion Formula

The key to converting Photoshop letter spacing to CSS is a simple formula:

letter-spacing: (Photoshop value / 1000) * em;

Let’s break this down with an example. If your Photoshop design specifies a letter spacing of 50, you would convert it to CSS like this:

.my-text {
  letter-spacing: 0.05em; /* 50 / 1000 = 0.05 */
}

Creating a SCSS Function

To make this conversion process more efficient, we can create a SCSS function:

@function letter-spacing($ps-value) {
  @return ($ps-value / 1000) * em;
}

Now, you can easily use this function in your SCSS:

.my-text {
  letter-spacing: letter-spacing(50);
}

This will compile to:

.my-text {
  letter-spacing: 0.05em;
}

Handling Negative Values

Photoshop also allows for negative letter spacing. The same formula applies for negative values:

.condensed-text {
  letter-spacing: letter-spacing(-25); /* Results in -0.025em */
}

Pixel-Based Alternative

While em-based values are generally preferred for typography, some developers prefer working with pixels. Here’s a formula for converting to pixels:

@function letter-spacing-px($ps-value, $font-size) {
  @return ($ps-value / 1000) * $font-size * px;
}

Usage:

.my-text {
  font-size: 16px;
  letter-spacing: letter-spacing-px(50, 16); /* Results in 0.8px */
}

Browser Rendering Considerations

It’s important to note that browsers may render text differently than Photoshop. Fine-tuning might be necessary to achieve the exact look of your design. Always test your typography across different browsers and devices.

Converting Photoshop letter spacing to CSS doesn’t have to be a headache. With these formulas and tools at your disposal, you can accurately translate your designs into web typography. Remember, the key is to divide the Photoshop value by 1000 and use em units for the most flexible and accurate results.

By mastering this conversion process, you’ll be able to maintain the integrity of your designs while creating responsive, accessible web typography. Happy coding!