CSS Length Unit Decision Tree

Almost every time I go to write code for a layout responsive site, I try to figure out which length unit to use. From math and science classes, I assume that using one unit consistently will be the most efficient. So I have been choosing ’em’ without really understanding what my full options were (and because of peer pressure). However, ’em’ doesn’t always seem to work as the only length unit. In my research, I’ve discovered that there are 16 different units to choose from (16? that’s insane!), and most importantly: that there really isn’t a catch-all unit that is the best for everything, but rather many units that are good based on circumstance. But how on earth am I to decide what units to use for different situations?
To address these tough decisions, I present: The CSS Length Unit Decision Tree.


See full size

At the end of the day, I’ve settled on the fact that I might start using viewport units for site-wide sizing and fonts, along with combining ’ems’ for modular components, and ‘ex’ for line-heights.

Feel free to give me feedback, I’d love to learn if I’m missing out on Pros & Cons to consider for the different units or if you have a combination of unit preferences that seem to work.

1 thought on “CSS Length Unit Decision Tree

Leave a Reply

Your email address will not be published. Required fields are marked *