Web Design

100

Understanding Units of Measurement .......................

M

any CSS properties require that you specify a unit of measurement, such as spacing between

elements, border widths, and font size. The language supports a wide variety of units of

measurement. Understanding which one to use in what situations helps you become a better CSS

designer and helps avoid common errors that occur when measurements do not work the way a

designer expected. Units available range from those with which you are familiar to some you may

have never heard of before. In most page designs, you will use a combination of several units of

measurement.

English and Metric Units

CSS supports measuring values in inches,

centimeters, and millimeters. However, the

actual size of an inch, centimeter, or

millimeter cannot be predicted from one

computer monitor to the next, so using these units under any circumstance is not recommended.

1 in

inches

centimeters

23

1 cm23456789 888 9999999

Pixels

Pixels are the building blocks of your computer monitor. Like the English

and metric units, the exact size of a pixel cannot be predicted, but because

it is a real unit of measurement in computer monitors, many CSS designers

use pixels for setting widths of borders, padding, and margins around

elements. Using pixels for font sizes is not recommended.

Points and Picas

Graphic designers for centuries have relied on points and

picas. There are 72 points in one inch, and 6 picas in an

inch, so logically there are 12 points in 1 pica. Even though

you are probably familiar with sizing text via points, they

are not recommended on the Web because they are based

on inches, which is an unreliable unit.

1 in

72 pts 144 pts

23

216 pts

6p0

inches

points

picas

12p0 18p0

ppppppptttttttsssssss

p 000000000