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