How to Understand Measurement on the Web

Designing a web page and confused about pixels (px), ems and percentages? Here's an explanation of each type of measure that can be used for on-screen display.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• A website
• A basic knowledge of HTML

1. In theory, pixels are the closest to a set size that you control as a designer. If you set text at 10px or 12px, it should stay that way. In practice, most modern browsers allow zoom and text size changes and let users resize page elements measured in pixels to some degree.

2. Pixels are most dependable when setting a fixed width for all or part of a layout. You can set a sidebar width at 200px, for example, and it will not expand beyond that. You can set an entire layout width at 800px and it will not expand beyond that, even if the user zooms to increase text size.

3. Ems represent a measure relative to the size of the letter M. In some fonts the letter M is larger than in others, so ems are considered a relative measure.

4. Ems can be used to set font sizes and also widths of elements like sidebars or entire layouts.

5. When used to set font size, 1 em is equal to the user's preferred font size. On most computers and in most browsers that works out to about 14 pixels. So a font size of 0.8em is smaller than the user's preferred font size, while a setting of 1.3em is larger.

6. Width of elements in a layout can also be expressed in ems. When the page is zoomed, everything grows at the same relative measure of enlargement. The layout and the font size both increase. The advantage of this method is that the number of words on a line of text usually stays the same. If the page is zoomed to 200 or 300 times normal, the whole layout may expand so much that the user must scroll horizontally to read the entire page.

7. Percentages also related to the user's preferred font size. A setting of 100 percent for font size should match the user's preferred font size. Hence, 90 percent would be slightly smaller, while 110 percent would be slightly larger.

8. For percentages in a layout, the maximum width is 100 percent. No matter how much the page is zoomed, the layout can't get bigger than 100 percent of the browser window.

9. Font sizes set in percentages can be enlarged any number of times. This can result in words becoming so large than there may only be one or two words on a line. In this situation the user must scroll vertically to read the page.

Tips & Warnings

• Pixels, ems and percentages each have their place and can be mixed in a web page to take advantage of the particular needs of the design.