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.