h1volt3

Measuring and sizing UIs, 2011-style

The key things to take away from this article are:

  • Set structure in percentages. This includes content areas, sidebars etc.
  • Set type in rems with a pixel fallback for older browsers. This gives us a great amount of control with added scalability.
  • Set type-related items in ems so that paddings et al scale with the font-size.
  • Set line-heights in relative units. Or, even better, with no units at all.
  • Don’t set measurements on components at all. They should remain fully fluid and ‘just work’ wherever you drop them.