CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.
| Unit | Description | Example |
|---|---|---|
px
|
Pixels |
margin-top: 10px;
|
pt
|
Points |
font-size: 12pt;
|
in
|
Inches |
padding-top: .5in;
|
cm
|
Centimeters |
top: 5cm;
|
mm
|
Millimeters |
left: 45mm;
|
pc
|
Picas |
bottom: 12pc;
|
em
|
Ems |
font-size: 1.5em;
|
ex
|
Exs |
font-size: 1.5ex;
|
%
|
Percentage |
width: 80%;
|
Pixels (px)
The measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user’s monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.
Points (pt)
Points should be reserved for print. There are 72 points in an inch.
Inches (in), Centimeters (cm), and Millimeters (mm)
Although these are the most common units of measurement in life, they should be avoided in Web design.
Picas (pc)
Picas should be reserved for print. There are 6 picas in an inch.
Ems (em)
An em (or Mutt) is a relative unit that refers to the size of the letter “M” in a font. Because em is a relative rather than absolute measurement, it is often used in Web design.
Exs (ex)
The “x-height” is the height of font’s lowercase “x”. Exs are used to set the size of content based on the size of the surrounding font.
I have been working in web design for nearly 10 years and have been teaching CSS based design for around 5 years. When I first started it was important to use relative units for things like font sizes so that browsers could scale content if the user required it. Nowadays most browsers have built in zoom options that uniformily zoom all content. As such, the need for relative measurements for scaling had nearly gone away. Relative measurements are still useful for proportional design, but the accessibility issue is virtually null… anyone agree?
January 23rd, 2011 at 1:24 pm
Hi Bjorn, thanks for the comment. I went to the best resource I know for this: Jim Thatcher, Accessibility Consultant extraordinaire and the author of our web accessibility courses. His reply:
Jim also noted that our own website (webucator.com) doesn’t meet this requirement. I also checked out http://www.apple.com, http://www.microsoft.com, http://www.amazon.com and http://www.adobe.com and they all fail. It’s a tricky one as you would have to account for the user’s resolution and window size, which is difficult to do.
I hope this is helpful. Thanks again for the comment.
January 25th, 2011 at 6:58 pm