Entry

Pixels, points or percentages: what to use?

Feb 26th, 2002 15:23
Denny De La Haye, Rey Nuņez,

Measurements in cascading style sheet properties are made using two 
types of length units: relative and absolute. The following defines the 
length units that may generally be supplied for CSS attributes.
Relative length units 
  px Pixels.
  em The height of the element's font. 
  ex The height of the letter "x". 
  %  Percentage.
Absolute length units 
  pt Points (1 point = 1/72 inches). 
  pc Picas (1 pica = 12 points). 
  in Inches (1 inch = 2.54 centimeters). 
  cm Centimeters. 
  mm Millimeters. 
A relative length unit specifies a length in relation to another length 
property. Relative length units scale better from one output device to 
another, such as from a monitor to a printer. Percentages and relative 
length keywords perform similarly. 
An absolute length unit specifies an absolute measurement, such as 
points, inches or centimeters. Absolute length units are useful when 
the physical properties of the output device are known.
Considerations 
When specifying length units, keep in mind the target display 
resolution, as differences in user screen settings affect the specified 
lengths. The following may help to determine which would be appropriate 
to use, but it all depends on the need and the desired output.
Font-sizes, line-heights, and units that need to render in a fixed size 
are better specified as absolute lengths (points), unless one intends 
for them to resize proportionately with different display resolutions.
(Note: with the advancing popularity of many web-browsing devices (PDAs,
kiosks, WebTV, etc) of extremely different form factors and particularly
different display characteristics, it is _very_ short-sighted design to
write a webpage that does not resize in this way)
On the other hand, position coordinates are better off specified as 
relative lengths (pixels). Frames, tables, and most element widths 
adjust better as percentages, while margins, paddings and border widths 
scale better when specified as relative units (pixels or em).
Other Length Units
CSS also provides other length units specific to a CSS property, such 
as larger or smaller for font-size; bolder and lighter for font-weight; 
thin, medium, and thick for border-widths, etc. These are discussed in 
the appropriate css.faqts sections.
Note that all length units described are supported as of browsers 
versions 4 and later.