The secret of the “em” is proportions. Keeping the appropriate proportions regardless of the size. Let’s use font-sizes as an example.
First, set a parent font-size as an absolute measurement. Let’s say 16 pixels in the body. All subsequent sizes use the following formula: child pixels/parent pixels = child ems. So if you want an h1 to have a pixel size of 24, then its em unit would be 1.5 (from 24/16).
Nested elements require particular attention, because they multiply on each level. If you have a div inside a div and the outer div has a font-size of 1.5em, then the inner div (div div) should be 1em to cancel its inheritance.
Now that the how is settled, let’s go to the why.
Other than WCAG 1.0 recommending the use of relative units (ei. em or %) as opposed to absolute units, there’s the fact that not all browsers deal with resizing in the same way. Some older browsers like IE6 won’t resize any absolute pixels.
The proper implementation of this guideline might be daunting for larger style sheets. My initial advice would be to break it down to specific sections. Have parent pixels on primary divisions and set your inner relative ems accordingly.
[Source: CSS for accessible web pages by Richard Rutten]
Leave a Comment