When to use each CSS Measurement
One of the most fundamentals things in CSS that is often overlooked but every web designer should know about, is when to use each CSS Measurement. The most popular CSS Measurement Units are px (pixels), % (percentages), em (relative to document font size) and pt (points). In this article we are going to review each unit and determine when they should be used.
This is pretty straightforward, a measurement of 1px equals to 1 pixel on our screen. Well, not exactly to be perfectly honest but this definition is good enough for most purposes. If you really must learn what a pixel exactly is read this
Use for: px should be used for stuff like borders, css shadows and when creating fixed-width designs px can be used for width, height, padding, margin, positioning of elements etc.
Again this is straightforward, a measurement of 1% equals to 1 % of our current resolution. Let’s say that the current resolution is 1440×900 and that the browser has an inner resolution of 1425×742 (things like scrollbars, url and bookmarks bars take up some space so the browser resolution most of the time is smaller than our screen resolution). Setting the width of our body to 50% will mean that the final width of our body will be 1440×50/100 = 770 pixels
Use for: responsive images, containers and when creating fluid designs (and I really hope nobody does anymore) pretty much everything.
Relative to document (em and rem)
This is kind of tricky but it is extremely cool. 1em is equal to the current font size. So 2em normally means 32px. By changing the global font-size we can therefore change what 1em means. This makes it ideal for responsive design when used in conjunction with media queries. To better understand what em is all about see the image below.
Very similar to em units are rem units which allows font size and other properties to be specified against the root element, not just the parent. You can check out this article to learn more about rem http://www.sitepoint.com/css3-rem-units/
Use for: typography, and elements related to typography
- Points are normally used for printing media. One point is equal to 1/72 of an inch. For people that design sites and write CSS I believe that this CSS measurement is of little use, except for when it comes to printing. So you should almost exclusively use pt forUse for: print stylesheets
CSS Measurement Units Cheat sheet