Measuring em Widths

27 May 2004

14 comments

A Blue Perspective: Measuring em Widths

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

Categories

,

Comments

  1. 1/14

    Simon Jessey commented on 27 May 2004 @ 04:44

    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. 2/14

    Anne commented on 27 May 2004 @ 05:34

    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. 3/14

    Malarkey commented on 27 May 2004 @ 07:03

    "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. 4/14

    The Man in Blue commented on 27 May 2004 @ 13:45

    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. 5/14

    Adam commented on 27 May 2004 @ 15:28

    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. 6/14

    Unearthed Ruminator commented on 27 May 2004 @ 22:37

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

  7. 7/14

    coda commented on 28 May 2004 @ 11:06

    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. 8/14

    Joel commented on 29 May 2004 @ 06:12

    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. 9/14

    Joel commented on 29 May 2004 @ 06:15

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

  10. 10/14

    The Man in Blue commented on 29 May 2004 @ 17:06

    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. 11/14

    Patrick Griffiths commented on 4 June 2004 @ 05:48

    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. 12/14

    Razvan Pop commented on 2 July 2004 @ 18:57

    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. 13/14

    David Bell commented on 25 July 2004 @ 06:05

    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/14

    jake smith commented on 10 March 2005 @ 01:28

    i find clients demands are usually the problem :)

  15. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed