Mini Tutorial: Pixel Perfect – Accurately Translating Photoshop Values into CSS

Here at Demac Media, a lot of thought, care, and effort go into the work of our design team to ensure that customers purchase from and keep returning to your store online. We strive to ensure that their designs and vision are implemented into real, functioning eCommerce solutions.

As a Web developer, you may often find yourself having to work off a Photoshop mock-up design for the site in question. At first glance, elements of this design may not be easily translatable from Photoshop to CSS. This tutorial will show you how to convert Photoshop tracking, leading, font-weight, box-shadow, and text-shadow to CSS accurately in order to ensure pixel-perfect online representations of your design.

TRACKING

Tracking refers to the overall letter spacing of some block of text. Adjusting the amount of space between all characters can alter both the text’s appearance and readability. The CSS property for tracking is letter-spacing.

When tracking is too tight, it can diminish the text’s legibility – or the degree to which individual characters within the text are discernible. Conversely, too much additional whitespace can also negatively affect the text’s readability – or the degree with which the whole text, as a combination of characters, can be read and understood.

You can convert Photoshop’s text tracking value to CSS with the following formula:

  • letter-spacing (in ems) = tracking / 1000

An em is a unit of measurement in typography where 1em in CSS is about the width of an uppercase “M” in the rendered font face. It is roughly the point size of the current font – where point size is a traditional measurement for a font’s text size.

Therefore, a tracking value of 200 in Photoshop would equate to 0.20em as follows:

  • 200 (in Photoshop) = 200/1000 em = 0.20em (in CSS)
  • letter-spacing: 0.20em

Lorem ipsum dolor sit amet, at sit falli denique, usu viderer labores sententiae ne, usu mollis disputando in. Vis ei nonumes contentiones, pri ex veri maiorum. Tota magna id mel. Modus deterruisset ad quo, per eu verear commodo adolescens.

LEADING

Whereas tracking refers to the horizontal distance associated with a font, leading refers to the vertical distance – or the distance between baselines of successive lines of the same font. The font’s baseline is where most letters “sit” and below which font descenders fall. With the lowercase letter y, for example, the descender would be the tail portion or diagonal line that falls below what would otherwise be a v sitting on the baseline.

If tracking is letter spacing, leading can be thought of as line spacing. The CSS property for tracking is line-height.

You can convert Photoshop’s text leading value to CSS with the following formula:

  • line-height (as a percentage of the current font size) = 100 * (leading point size / font size)

The default leading percentage in CSS, when not set, is roughly 120% (10px font would have 12pt leading, for example). Therefore, a leading value of 18pt in Photoshop, when you’re using a font-size of 14px, would roughly equate to as follows:

  • 18pt (in Photoshop) = 100 * (18pt / 14px) ≈ 128% (in CSS)
  • line-height: 128%

Lorem ipsum dolor sit amet, at sit falli denique, usu viderer labores sententiae ne, usu mollis disputando in. Vis ei nonumes contentiones, pri ex veri maiorum. Tota magna id mel. Modus deterruisset ad quo, per eu verear commodo adolescens.

Simpler still, line-height in CSS can just be set to Photoshop’s leading point value as pixels. For instance, 18pt in Photoshop would be 18px in CSS – without the need for the percentage conversion above.

FONT WEIGHT

A font’s weight defines the thickness of its characters, relative to their height. The CSS property for this is simply font-weight. Typing in a word document, you may be familiar with the Bold button. In addition to bold, CSS also has defined adjustment property values of “bolder” and “lighter” that can apply to a font when applicable.

In addition, in CSS, a font’s weight can be defined from thin to thick using a series of incremental values from 100 (thinest) to 900 (thickest).

If you are using a professional-quality font, you will likely have these weight variations available to you within Photoshop. If the design you are adapting is using any additional weighting variations, you are not limited to just ‘normal‘ (400) and ‘bold‘ (700), in CSS. These weight names correspond to the following CSS values:

  • font-weight: 100 – Thin
  • font-weight: 200 – Extra Light
  • font-weight: 300 – Light
  • font-weight: 400 – Normal / Regular / Roman / Plain / Book
  • font-weight: 500 – Medium
  • font-weight: 600 – Semibold / Demi-bold
  • font-weight: 700 – Bold
  • font-weight: 800 – Heavy
  • font-weight: 900 – Black

font-weight: normal is the same as font-weight: 400

SHADOW

Let us take a look at each of these Photoshop values in the Drop Shadow layer style dialog and how they translate into CSS. CSS uses the text-shadow property for textual shadow and the box-shadow property for other drop-shadow effects. They largely share the same set of property values.

Layer Style

  • Blend Mode: Is how the shadow blends in with the background. Unfortunately, CSS does not take into consideration any values for this property. As long as this is set to “Multiply” (the default) or “Normal” in Photoshop, the effect should replicate fine in CSS
  • Opacity: Is the opacity or transparency of the shadow. This can be set in CSS using a rgba() colour space property – enabling you to set both RGB colour value and an additional alpha channel that defines the colour’s opacity
  • Angle: Is the direction of the shadow. We will discuss how to calculate this value in CSS shortly below.
  • Distance: Is the offset of the shadow’s direction. This is used with the Angle to calculate both the horizontal and vertical shadow in CSS, as we will soon see.
  • Spread: Is the percentage of the shadow that remains a solid colour (with the rest of the shadow taking on a blurred effect). This and the Size (as described below) determines the spread value on CSS’ box-shadow. It is not set for text-shadow.
  • Size: Is the shadow’s radius as measured in pixels. In CSS, it is used to calculate both the spread (being the size of the shadow) and blur (being the blur distance)
  • Contour & Noise: As with the blend mode, CSS does not have an equivalent property value.

With the primary exception of the Spread, text-shadow and box-shadow largely have the same property values for their syntax.

  • box-shadow: h-shadow v-shadow blur spread colour (inset);
  • text-shadow: h-shadow v-shadow blur colour;

Calculating the horizontal and vertical shadow offsets is done using Photoshop’s Angle and Distance values. This, however, is a bit more complicated than the previous conversion formulas as converting the offsets involves some light trigonometry.

  • Horizontal Shadow ≈ Cos(Angle) * Distance
  • Vertical Shadow ≈ Sin(Angle) * Distance

While text-shadow does not have a spread property, it is still used to calculate the blur radius in CSS as it is for the box-shadow.

  • Spread (in CSS) = Size in Photoshop * (Spread in Photoshop / 100)
  • Blur = Size in Photoshop – Spread in CSS

Lastly, the presence of “inset” will change a shadow from an outer shadow effect to an inner shadow effect.

To make this all the easier, we have prepared an online calculator for these values. Type in your Photoshop values from the Drop Shadow layer style dialog window and press the convert button to generate the equivalent box-shadow and text-shadow CSS syntax. Feel free to play around with different values and see how the formulas thereby alter the CSS.


Colour
R
G
B

Opacity

%

Angle

°

Distance

px

Spread

%

Size

px

Inset? (optional)
    
 

box-shadow: h-shadow v-shadow blur spread colour;
text-shadow: h-shadow v-shadow blur colour;


In this tutorial, we have outlined several formulas and tips as well as provide a calculator to help you ensure that your web site skinning is of a high-quality and is pixel perfect.