Looking for the lessons? Get started!
Short description of page contents.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Placeholder for pithy quote.
Units of measurement directly impact your "layouts," which we will cover in a later portion of these lessons.
Unfortunately, it's somewhat confusing. So pull your pants up and let's roll!
There are three units of size (width and length, basically) that you use in determining the size of your Web page, and the size of the various elements (most often fonts, but other elements also):
- pixels (px)
- ems (em)
- percentages (%)
Pixel
Pixels are the tiny dots that make up the display on a computer screen. Everything that shows up on a computer screen is displayed in pixels. It's fairly standard from one computer to another, so it's pretty close to an absolute size. A typical font size is 16px. Pixels have their drawbacks: Internet Explorer users can't resize text set in pixels, which may frustrate the ones with vision problems, and sometimes trying to print a Web page set in pixels can cause problems. (IE7 and IE8 users can use "page zoom" to resize their entire page, as can Opera users. Doesn't solve the problem, but gets around it somewhat.)
Em
Ems are a relative size, which means they change depending on the size of the elements they are "related" to. It is generally related to the font size. So the size 2em is twice the size of the current font size.
Generally, it's a good thing to set your page's base font size. Most browsers default to a base size of 16px, but not always, and sometimes users reset their browser's display size to suit themselves. For your site to display correctly on as many computers as possible, just set the font size to 16px (or whatever suits you).
Design ninja Patrick Griffith defines the em in conjunction with the pixel:
A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.
Using ems is considered best practice by many designers. However, there is a drawback: Internet Explorer 6 sometimes renders fonts set in ems as considerably larger (or smaller) than other browsers. Since I hate IE 6 and wish it were dead, I wouldn't recommend that you not use ems to serve IE6's orneriness (and I am very aware that many users have to use IE6 in their workplaces, or are just not knowledgeable enough to know they have other options). Overall, while there are issues surrounding the use of ems, they tend to work the best in Web pages. Nothing is perfect....
Percentages
This is an even more relative unit of measurement. You might have a font as 80% of the main font size. Percentages are calculated as relative to the inherited size of the parent text, so if your main font size is, say, 16px, text displayed as 80% would size in at about 13px. The effect is cumulative; if your main font size is 16px, your inherited element comes in at 80%, and you have another element inherited from the second one at, say, 80% again, your cumulative font size will be roughly 10px. (You can do the math to check behind me.)
Web designer Owen Briggs has done some research, and given us 264 screenshots to illustrate. He's also given us his recommendations, which are a mix of ems and percentages. It's from 2003, but still works.
Other Units of Measurement
There are other absolute ways to measure the size of elements, including points, picas, centimeters, millimeters, and others, but we stick with pixels, ems, and percentages virtually all of the time. (Points, which are 1/72 of an inch in CSS 2.1, were introduced from the world of printing, and don't translate well into Web work. The others are even worse for Web design. But so you'll know: 1 pica is equivalent to 12 points. The others are the same as the units you learned in grade school, and are completely useless for Web design.)
A measurement value of zero (0) doesn't need a unit of measurement.
This is correct:
border: 0;
This is not correct:
border: 0px;
Going With the Flow
Remember, you cannot make a visitor to your site view your site exactly the same as everyone else, no matter how much you may want to. The phrase "go with the flow" has more than a philosophical or slang meaning for Web designers — you literally have to go with the flow of the browser and the computer display.
Ian Lloyd gives us an excellent primer on when to use pixels, ems, and percentages. I'm taking the liberty of including a rather long quote from his book. It's just that good.
Which method of measurement should you use for your padding: pixels, ems, or percentages? If each of the examples above creates the same effect on the web page, what difference does your choice make? The answer is: it depends on how you want your design to behave. If you intend your design to change with the browser window, then percentages is the way to go. Any value that's set using percentages will change as the size of the browser window changes: the bigger the browser window, the bigger your padding will become. If you want your design to scale well with different font sizes, then you should use ems, because the measurements will be based on how your users set the font size in their browsers. If users increase their browsers' font sizes, then sizes set in ems will also increase accordingly. If you're after a precise design with graphical elements that line up exactly, regardless of browser window size or font setting, then setting sizes in pixels is the most predictable method of all. A pixel will nearly always represent a single dot on the user's screen. Why nearly? Because most browsers now offer a page zoom facility which will magnify everything in proportion, over which you have little control.
