|
7 pixels 8 pixels 9 pixels 10 pixels 11 pixels 12 pixels 13 pixels 14 pixels 15 pixels 16 pixels 17 pixels 18 pixels 19 pixels 20 pixels 21 pixels 22 pixels 23 pixels 24 pixels 25 pixels 26 pixels 27 pixels 28 pixels 29 pixels 30 pixels 31 pixels 32 pixels 33 pixels 34 pixels 35 pixels |
6 point 7 point 8 point 9 point 10 point 11 point 12 point 13 point 14 point 15 point 16 point 17 point 18 point 19 point 20 point 21 point 22 point 23 point 24 point 25 point 26 point 27 point 28 point 30 point 32 point 34 point |
.5 ems 1 em = 14 pixels = 12 points
1.5 ems 2 ems 2.5 ems 3 ems 3.5 ems 4 ems |
A: When you specify a font size in points, it means a certain number of inches. 1pt is, in CSS, 1/72in. As a result, when you specify a font size as (say) 12pt, it is equivalent to 1/6in. Because the computer has no idea how large your monitor is, it uses a (large arbitrary) conversion factor. For example, the Mac OS is most commonly configured to treat 1 inch as 72 pixels. Windows, by comparison is 96 pixels. As a result, text is usually 25% smaller on the Mac. Therefore that which is comfortable for you on your Mac will (usually) be too large for you on a Windows machine, and that which is comfortable on your Windows machine will be illegible on a Mac.
If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. In the case of most Web pages, this is the body element - and so the font is sized relative to the standard size of the browser.
Using ems as your font size measurement ensures that your pages will be accessible to most browsers and platforms. Plus, if your readers choose to change the default font size on the fly, your page will scale to that new size.
The problem with ems is that you lose control over the exact look of your page. Some people may have a much larger or smaller default size than you are used to, and with ems, your fonts will scale relative to that size. This can result in strange font sizes.
Although some debate lingers over the best method to size fonts, using pixels to specify font sizes does work. The pixel is a relative unit, since it relates to the resolution of the monitor.
Regardless of the default settings, a pixel is a pixel is a pixel. Using pixels to specify font size preserves the layout in the face of any changes the user may have made to the default font size. Specifying font sizes in pixels provides an excellent method for creating uniform font sizes.
Notes:
1. Use "View Source" to see how this page is constructed.
2. There should be no space between the number and unit--i.e., write 12px or 1em not 12 px or 1 em.
More info:
Return to Web Page Design.
Revised Oct. 8, 2003