Sometimes as web designers, we get caught up in the world of making things look awesome. What we forget is, when our designs go into the hands of the developers, the process turns from creativity to science. Just like in your biology class, the science of development requires a certain language. And if your design team isn’t speaking the same language as your development team, its likely your processes will be both time consuming and frustrating.

We believe typography makes a design reach its full potential, thus our team spends a lot of time making sure the type of our designs is pixel perfect. Of all things, we want to make sure this translates in the development process, but we’ve found, designers and developers speak differently here. We typically design in points, where developers develop in pixels. If you want your designs to translate, you’ve gotta speak that language. 24pt font is drastically different than 24px font.

Points vs Pixels

Luckily, Photoshop make the translation easy.

First, to check your type units, select the Type Tool and check the units in the header.

We want it to be in pixels, so if you’re already there, stop reading.

If you find you’re using points, go to the main edit menu of Photoshop. Select Preference and then select Units & Rulers.

Under the Units tab, there are two drop downs labled Rulers and Type.

At this point, the type should read Points. Click the drop down and select Pixels.

If you select the Type Tool again and recheck the character bar as we did in step one, you should see the units now display in pixels.