Font Sizing

Relative Units - Pixels

Pixels

In CSS, pixels are considered relative units; i.e., relative to the viewing device. Pixels differ from physical units in that pixel size depends on the resolution of the display medium, which can be anywhere from 72ppi (pixels per inch) for older monitors to 120ppi for today's displays. Thus, there is no fixed direct relationship between pixels and physical units of measurement such as points, inches, etc.

You can see this if you view pixel size on the same display at different resolutions. The images below illustrate the effect of display resolution on pixel size rendering. Though the pixel size of the text is 11px in both cases, the text is physically larger when displayed at 800x600 pixels.

Regardless, pixels are absolute in the sense that a pixel measurement is not relative to the size of the parent element, nor is it dependent on the user agent's default font-size setting.

Example Pixel Font Size Declaration

p { font-size: 14px; }

Because of variations in the conversion of physical units when rendering, many designers choose to use pixel values rather than absolute units or keywords. This approach is particularly useful when mixing text and images, since text can easily be set to correspond to the pixel dimensions of graphic elements. Thus, relative sizes of text and graphics will display consistently across platforms and user agents (theoretically), and you needn't be concerned with physical length conversion nor any variance in keyword size rendering amongst user agents.

A debate rages over whether pixels should be avoided for font-sizing.

The benefits of using pixels for font sizing are numerous. Pixels are user-agent independent; that is, pixel measurement is not interpolated, converted, or relative to any default user agent font size setting—a pixel has a direct relation to the display device. A pixel is easy to measure on a display, thus making it easy for a designer to accurately size fonts for layout, particularly in concert with graphic elements.

IE6/Win and earlier exhibit an accessibility flaw when font sizes are specified in pixels. If the user attempts to change the font size using IE's Text Size command, IE will not change the text size for any content that has been sized using pixels.

There are two primary disadvantages to using pixels for font-sizing. First, pixels are not relative to any other document elements; thus, all explicitly sized elements must be resized if a document-wide change is to be made for text sizes of various content. This will be explored further when we discuss percentage units and em units. The second disadvantage is related to a flaw in IE/Win.

The strongest argument against using pixels is related to a flaw in IE6/Win. The sidebar at the right explains the accessibility issue when using IE/Win to view web pages that use pixels for font sizing. This is a particular issue for visually-impaired users who need to enlarge the text to increase readability, or for any user who wishes to override the designer's choice of font sizes.

Once IE7 replaces IE6 in marketshare, this problem will all but disappear (see Page Zoom in IE7 ) and using pixels to specify font sizes may become the preferred font sizing method.

Examples

Modified - Tuesday, April 3, 2007