Demac Media Demac Media Brand Demac Media Brand



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

Timer Icon 7 Mins

Magento Tutorials

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 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:

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:

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.


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:

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:

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.


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: normal is the same as font-weight: 400


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

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

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.

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.

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.












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.

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information