Page style:

A Blue Perspective: Measuring em Widths

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).

Comments

1/14. 27 May 2004 @ 04:44, Simon Jessey wrote:

I have always used ems for everything, since first being exposed to CSS about 3 years ago. I only use pixels when specifying dimensions for images, or for the main container of a fixed-width layout. I consider them to be completely reliable for all but the oldest browsers.

There is an exception, however. I find that specifying border widths in ems isn't a good idea, because in most cases a fatter or thinner border on an element will yield an undesired result.

2/14. 27 May 2004 @ 05:34, Anne wrote:

You have interpreted the way 'em' works incorrectly. If the specified 'font-size' for the BODY is something like '12px' a child, like a DIV element can have set something like '1em' which is _exactly_ equal to '12px' independent from the font.

Note that "CSS em" is different from "designer em".

3/14. 27 May 2004 @ 07:03, Malarkey wrote:

"Hence I whipped up a quick page that allows you to see the width of a browser measured in ems."

Now you're just showing off Cameron ;)

I moved to ems a while back for everything that should be fluid, but sometimes those pixels call to me, shouting "Use me!, use me!" in the middle of the night. I even tried an all elastic layout, which was fun.

Next stop, percentages and totally fluid layouts...

4/14. 27 May 2004 @ 13:45, The Man in Blue wrote:

Anne: I don't see that as a problem. Using ems for widths, etc. still means that all elements are proportional to the font size.

Saying "font-size: 12px" instead of "font-size: 100%" merely means that the base font size will be a different size. When you resize in Firefox, the fonts and widths will still grow proportionately.

5/14. 27 May 2004 @ 15:28, Adam wrote:

Cameron - I'll go ahead and take it upon myself to assume my ingenious article, full of groundbreaking new tricks and insights, re-sparked your interest?

:)

Seriously though, I personally feel like this is the next step. I'm going to try to "push the boundaries" with my current, big personal project (we'll see how successful I actually am) and incorporate as much em-based, as well as percentage-based, flexibility as possible into the layout. It's pretty obvious, when the web eventually abandons these neat, tidy, pre-proportioned containers we can currently count on (the monitor/laptop in all their known resolutions), web sites will have to accurately fill whatever they're being plopped into. It's just shortsighted, in my mind, to not try and find a way to accomplish that today. Especially when we have unheralded work like this to use as a reference.

6/14. 27 May 2004 @ 22:37, Unearthed Ruminator wrote:

I haven't done much with em's myself (I still use the good old keywords for font sizes (small, medium, large, etc.).

7/14. 28 May 2004 @ 11:06, coda wrote:

damn, and I just thought I was making some headway with my elastic redesign. :P

In the words of Sarah McLachlan which incidentally is playing through Winamp at this very moment: "Building a mysteryyy... and choosing so carefullyy.."

8/14. 29 May 2004 @ 06:12, Joel wrote:

Since I started using CSS for presentation back in 2000 I've used em for element witdh/margin/padding etc. But I've recently started to question this method thinking:

It's good to be able to resize font size ->
I'ts nice if the page elements resize to ->
hey I can even still have a nice good line length : ) ->
but who needs to resize my 12px verdana text? ->
hmm maybe people with bad eye sight ->
...those folk often tend to be old (yes and maybe not) ->
old people tend to have 800*600 ->
hm then my nicley expanding page will be to large for their screen ->
Rats!

but.. the again I'ts nice when the page expands with the text.. So what to do?

...I don't know

9/14. 29 May 2004 @ 06:15, Joel wrote:

er.. that "back in 2000" was clearly an exaggeration.. Plese reform in your heads to "back in the days" =)

10/14. 29 May 2004 @ 17:06, The Man in Blue wrote:

With such a long chain of inferences like that, it's easy to see why you always need to do real user testing in order to get concrete answers.

11/14. 4 June 2004 @ 05:48, Patrick Griffiths wrote:

I've been using ems all over the place for donkeys years. I like the appraoch.

Have you read http://www.alistapart.com/articles/elastic/ ?

12/14. 2 July 2004 @ 18:57, Razvan Pop wrote:

I have never used "em". I use CSS for about an year or so and always worked in "px". Maybe I should consider using "em".

You write some very inspiring articles.

13/14. 25 July 2004 @ 06:05, David Bell wrote:

A healthy balance of ems and pxs will often create a liquid design that doesn't completely break apart when the user starts resizing.

Navigation is usually the problem.

14/14. 10 March 2005 @ 01:28, jake smith wrote:

i find clients demands are usually the problem :)

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.