About em

This is the first in a series of articles on what most people refer to as elastic
layouts, though I prefer the term proportional layouts.

What is a em?

The unit that is most commonly used for elastic layouts is the em. The em
is a typesetting unit of measurement, an em is defined as the width of the
uppercase M in that
font face and point size. With browsers that is not quite true. For example,
below are 20 Ms in a 20em wide 1em hide div, with no padding and 1 pixel border.
First in the default font for this site Lucida Grande, the second in Arial
and the third is Times New Roman.

MMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMM

PC users on IE (everybody else will have to trust me or look below) should see that that both the Lucida Grande and Arial do not fill the 20em block, while Times New Roman, the default font of browsers fills the 20em block. It appears that at some stage in the development of browsers somebody decided that 1em = 16 pixels at 100% font size and it will not vary depending on the font face.

PC view

As seen on Win XP in IE6

Setting your em and font size

1em Why = 16 pixels is going to lead to some rather large text, so the easiest
way to text down to a managable size and avoid a nasty IE bug is to set body
font-size: to a percentage:

percentage   font size
100.1% 16 pixels
 94% 15 pixels
 87.5% 14 pixels
 81% 13 pixels
 75% 12 pixels
 69% 11 pixels
 62.5% 10 pixels
 57%  9 pixels

There is one theory that suggest using Elastic 62.5%, which makes an em = 10 pixels, which makes it easy to calculate numbers multiplying by ten, unfortunately it also mean that unless your preferred font size is 10 pixels you have to be careful about nesting tags.

My view, set the percentage to get the right size for the body font p, td, li etc. and then make use of the calculator than comes with every computer OS to do the hard calculations for you.

Line Lengths

There are numerous research on the ideal length of line for reading, with the result being somewhere between 50 and 70 characters. Does this mean the best length for reading is between 50 and 70 em. The answer is only if the reading lots of upper case M and W. Another typesetting unit of measurement in the en, which is defined as the width of the lowecase n and is usually close 50% of a em, and most characters are only are only as wide as a n not a M. That would suggest 100 characters will occupy 50 em. Lets, have a look at those 20 em wide boxes again

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis justo
odio, commodo vitae, dapibus aliquam, cursus nec, purus. Praesent neque.
Vivamus vitae enim et massa posuere vestibulum. Ut in nunc. In sit amet
tellus et turpis consequat ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis justo
odio, commodo vitae, dapibus aliquam, cursus nec, purus. Praesent neque.
Vivamus vitae enim et massa posuere vestibulum. Ut in nunc. In sit amet
tellus et turpis consequat ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis justo
odio, commodo vitae, dapibus aliquam, cursus nec, purus. Praesent neque.
Vivamus vitae enim et massa posuere vestibulum. Ut in nunc. In sit amet
tellus et turpis consequat ornare.

A quick count will see that 20em is close to 40 characters, so if you want to make things easy to read line length should be between 25em and 35em. Don’t believe the research, try reading this article in:

Russ Weakley’s Ideal line length for content was used as a starting point.

9 Responses to “About em”

  1. nick Says:

    Richard Rutter’s How to size text using ems is another article on the subject of ems and the comments are as interesting as the post.

  2. James Says:

    Nice work with the elastic layout. Site looks good, will have to check it once in a while.

  3. Gene Falck Says:

    I see varying length sequences of M’s in the first three boxes as I think you
    intended in Mozilla 1.7 on WinXP pro with SP2. Maybe others not on IE won’t
    have to take your word for it! Very interesting.

  4. nick Says:

    Ooops I temporarily lost the image from IE6 which shows 20 uppercase Ms in Times New Roman really do equal 20em, at least in IE6. It also works in Firefox on a PC as long as the font is set at 100%, but because how this page works with varying the font size, I can not show you here.

  5. Nick Says:

    There where a few posts on the WSG (Web Standards Group) mailing list about ems and I received some feedback regarding this About em commentary, so I did some more investigating and experimenting see More about em

  6. A Different Opinion » Blog Archive » A little less Um and Ah about Em Says:

    […] http://nickcowie.com/2005/about-em/ […]

  7. germworks.net » Blog Archive » JP2 Designs update Says:

    […] So the question I have yet to answered is do you use pixels, em or percentage or both??? For JP2 Designs I used percenatge, next website I may use em like the way CLAG does in his artcile. Hear is a few articles on em. em explained by nick cowie and em explained by clag. It is alot of fiddling and playing around as I myself have spent a few hours just getting it looking descent. […]

  8. Suhas Dhoke Says:

    Where from we know the default font-size (14px, 16px, etc) of client’s machine ?

  9. nick Says:

    Suhas, unless a client has changed their default font-size ( and from experience 99% of people do not change their default font size) or is using a pre 2000 Mac, their default-font size will be 16px.

    If you want to be sure, there is an article in A List Apart about using javascript to detect default font size.

Google