About em

This is the first in a series of art­icles on what most people refer to as elastic
lay­outs, though I prefer the term pro­por­tional layouts.

What is a em?

The unit that is most com­monly used for elastic lay­outs is the em. The em
is a type­set­ting unit of meas­ure­ment, an em is defined as the width of the
upper­case M in that
font face and point size. With brow­ers that is not quite true. For example,
below are 20 Ms in a 20em wide 1em hide div, with no pad­ding and 1 pixel bor­der.
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 (every­body 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 devel­op­ment of browsers some­body decided that 1em = 16 pixels at 100% font size and it will not vary depend­ing on the font face.

As seen on Win XP in IE6

Setting your em and font size

1em = 16 pixels is going to lead to some rather large text, so the easi­est
way to text down to a man­agable size and avoid a nasty IE bug is to set body
font-size: to a percentage:

There is one the­ory that sug­gest using 62.5%, which makes an em = 10 pixels, which makes it easy to cal­cu­late num­bers mul­tiply­ing by ten, unfor­tu­nately it also mean that unless your preffered font size is 10 pixels you have to be care­ful about nest­ing tags.

My view, set the per­cent­age to get the right size for the body font p, td, li etc. and then make use of the cal­cu­lator than comes with every com­puter OS to do the hard cal­cu­la­tions for you.

Line Lengths

There are numer­ous research on the ideal length of line for read­ing, with the res­ult being some­where between 50 and 70 char­ac­ters. Does this mean the best length for read­ing is between 50 and 70 em. The answer is only if the read­ing lots of upper case M and W. Another type­set­ting unit of meas­ure­ment in the en, which is defined as the width of the lowecase n and is usu­ally close 50% of a em, and most char­ac­ters are only are only as wide as a n not a M. That would sug­gest 100 char­ac­ters 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 char­ac­ters, so if you want to make things easy to read line length should be between 25em and 35em. Don’t believe the research, try read­ing this art­icle in:

• 8em line length
• 16em line length
• 32em line length
• 64em line length
• 96em line length

Russ Weakley’s Ideal line length for con­tent was used as a start­ing point.

This entry was posted on Thursday, September 22nd, 2005 at 10:47 pm and is filed under css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.