Measuring em Widths
27 May 2004
» em Widths «
I've just recently started really focusing on using ems as a way of specifying element dimensions on web pages. Widths, heights, margins, padding; traditionally pixels are used to measure them, but the em is a valid – and in a lot of cases – the preferable unit of measure. Particularly if your designs plan on catering for users who resize their text.
If a user wishes to resize your text, surely it makes sense to increase the sizes of everything else? In a good design the proportions of header size to content size, to menu size, to font size and to logo size should be finely balanced to achieve the best aesthetic sensibilities. By increasing just the size of the text it throws this harmony out of balance, meaning that users with vision problems are disadvantaged from a design perspective.
By using ems not only for the size of your text but also for the dimensions of your elements, when someone resizes your pages they will see the page itself grow and expand, which allows you to maintain proportion for line length, relationships between sections, etc. And with resizable graphics, soon your whole page will be a digital elastic band.
However, moving to such an ephemeral unit of measure as the em can be troublesome; as any change can be. One of the problems I encounter is knowing just how wide a section should be when measured in ems. Hence I whipped up a quick page that allows you to see the width of a browser measured in ems.
The page starts off at 100% font-size. I normally prefer 80%, so whatever your preference you can resize using the font-size up and down buttons. Or just resize using your browser's text size functions. You can also type in a string of text and measure (visually) how long it is – good when you need to make fine adjustments to menu items or section widths.
Of course, you can't think in a pixel manner when using ems – different fonts have different character widths – but it always helps to get a general proportion instead of wandering around without a ruler.
Tested in IE 6, Firefox 0.8 (Win). Semi-tested in Opera 7.11 (Win).
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout