CSS Sizing Advice: %, REMS, and EMs

An interesting blog post – Measuring and sizing UIs, 2011-style — over at CSS Wizardry provides up-to-date advice for CSS measurements. In a nutshell, the post advises web designers to abandon pixel values except in a few cases (like CSS-sprites), and use %, Rems, or ems. In particular it suggests:

• Use percentages for structural elements (like sidebars, headers, footers, main content). I still think pixels can be valuable for constraining designs on giant monitors using the max-width property. For example:

.wrapper {

  max-width: 1240px;

}

• Use rems for type. (Not up on the rem value? Check out this simple intro on Font-sizing with rem).
• Use ems for type-related properties (like margins, padding) so they scale with the type size.
• Use unit-less values for line-height.
• Avoid measurements entirely, if possible. For example, you don’t need to set the width of an element that you want to match the size of its container. If the container has a set value, then then any block-level element inside it already stretches to fit.