CSS has so many measurement units that it can be difficult to keep everything straight. Each measurement system has its own benefits, and it is easy to find yourself wondering which one is correct. Many designers just decide to use a single unit for everything, but you are limiting yourself by not putting some thought into the units you decide to use in CSS. Thankfully, demosthenes.info put together a great list of guidelines to help you pick the best measurement unit for the task.
Pixels (px)
Pixels are best used for hairline borders and general elements when creating fixed-width designs. It is also a good choice for CSS shadow displacement. But, when using pixels as your unit you need to avoid @media breakpoints, because they break pages when zooming – use rem or em instead.
Don’t use for: typography, except when setting a base font-size in a CSS reset.
Percentage (%)
This is great for making responsive images and containers, as well as setting height on the body in certain situations.
Don’t use for: typography, except in a font-size CSS reset.
em, ex
Use em or ex or typography and elements related to it, such as margins. However, as the guidelines point out, em and ex have subtle “gotchas” when used in complex layout. In this case, rem should be substituted.
Points and picas
These are only good for print stylesheets. Seriously, don’t use them for anything else.
rem
This is a more capable and predictable replacement for em and ex, that is best used for the same purposes, as well as @media query breakpoints.
Viewport units (vh & vw)
These are best for responsive typography and so-called “perfect” responsive containers.
Character (ch)
Use this for sizing and adjusting monospaced fonts, though browsers do have some issues with this unit.
