Sizing elements relative to the default font size

How does an author ensure that a reader sees a page as the author intended when the author has no idea what font size will appear as 'normal'—or even legible—to the reader? One approach is to assume a few 'typical' situations and size for them. Another is to assume a reader has picked a comfortably legible size for their browser's default, and size elements relative to that.

There is no way an author can specify font size for all readers without knowing the reader's preferred font size. With relative sizing, however, an author can have control over relationships between elements without knowing anything about the reader's environment. It is a reasonable assumption that the reader has chosen a default font size that produces legible documents in their own browser window.

On this page, font-size, line-height, margins, and indent have all been sized in em measurements. The beauty of this approach is that such things as margins and indents increase relative to the reader's default font size. If Joe Mahma is viewing an HTML page full-screen on an 800 x 600 display at 72 pixels per inch and Suzie Kreemcheez is viewing the same page in a 960 x 1000 window on a 1920 x 1200 display at 120 pixels per inch, both will see a document that maintains the same relationship between margins, indents, and font-sizes.

To test this page, change the default font size in your browser and see what happens. Try changing the width of your browser window (you may need to refresh after each change). If your browser supports em properly, all relationships will be maintained relative to font-size.

USING EM MEASUREMENTS ON IMAGES

Em measurements can also be useful for inline images, particularly those used as bullets. In the following paragraph is an inline image sized to 1em in height.

Here is an inline image that has been sized to a height of 1em to match the text in this line.

USING EM MEASUREMENT FOR MAX-WIDTH

Text blocks that are too wide are difficult to scan. To keep the width of text to a readable maximum, regardless of font-size and window width, an author can use auto margin widths and an em measurement for max-width. The content of this page is contained in a DIV element with auto margins and a max-width of 40em. (Internet Explorer does not support the max-width property as of version 6, but there is a work-around using IE-specific scripting. For an example, view the STYLE declaration in the source code of this page.)

[CSS1 MENU]
Published 1997 by davidp, last update 2006
Computer too fast for old software?