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 browers that is not quite true. For example, below are 20 Ms in a 8em 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.
PC users (Mac users trust me) should see that that both the Lucida Grande and Arial do not fill the 8em block, while Times New Roman, the default font of browsers fills the 8em 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.
Setting your em and font size
1em = 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 |
|---|---|
| 101% | 16 pixels |
| 87% | 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 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 preffered 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
A quick count will see that 8em is close to 16 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: