The unit takes an important role in measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM, and Percentage.

In this post, we are going to run through these units to get further insight into these units of measurements. (Source: Hongkiat)

PX

Pixel is a fixed unit measurement and the smallest unit on screen measurement but don’t confuse this with the Pixel that defines screen resolution. The Pixel in CSS has nothing to do with the screen resolution.

When we try viewing a web page fixed at 1024px width say on a tablet with 1024px by 480px screen resolution, the web page will not fit in the screen.

I’ve been experiencing this issue in the past and found out that the Pixel in CSS is actually not a linear unit – it is in fact a radial measurement.

Basically, the Pixel in CSS measures the length of the display area instead of the screen resolution, so the 1024px screen resolution does not mean that the screen is also 1024px of the length.

More On PX

I’m not an expert on the technicalities in this matter but if you know Trigonometry, and want to find out more, check out the following explanation from Sean B. Plamer: CSS px is an Angular Measurement 1.

Pixels Font Size in Photoshop

When working on Photoshop, we will find that the font size is by default set to Pt (Points). The Pt unit is ideal for print styles.

To not confuse this with px when we are translating it to Web documents, we can change the units from the following menu: Edit > Preferences > Units and Rulers.

There, you get a window option as shown in this screenshot below. Choose ‘pixels’ for the Type unit.

EM

EM is a relative measurement. In CSS, EM refers to the multiplication of the default font size from the device or the document itself, that is why I personally word EM as EMphasize, but of course don’t take my word for it.

Here is an example; let’s say in a document, the font size is assigned for is 16px. 1em is equal to 16px, 2em is equal to 32px and so on.

Although EM is traditionally used for font sizing and in fact it is the standard unit used in browser styles for measuring font size, we can also used EM to define an element’s length.

The only constraint when working with EM unit is it is not quite intuitive, but there are two practical ways we can handle this. First, we can use this calculator, PX to EM; it’s a handy calculator that I use often.

As percentage is also a relative unit, so it has a similar constraint like the EM unit as well. It is not obvious how much a percentage 15px is of 500px? This generally happens when we translate px unit from the design stage to web document in many cases.

There are two ways we can take to this matter, either we do it traditionally with a calculator or if you are comfortable with using CSS Pre-processor, you can utilize the percentage() function from Sass.

Final Thoughts

There are many discussions on the best practices of using units in web design. But ideally the PX unit should be used when the properties generally need to be precise e.g. the border-radius and box-shadow horizontal or vertical offset, whilst for the EM unit as suggested by W3C is better used for font sizing 1. Percentage is the ideal unit to use on responsive layouts.

Happy learning!