| | |
Something you may be already noticing, especially if you are working on a Macintosh, is that the point-based font sizes specified in my style sheets so far have NOT produced consistent results cross-browser and cross-platform.
When setting font sizes in style sheets, you MUST use PIXEL-based values if you want consistent appearance. In your style sheets, then, instead of saying "24pt" for 24 point font size, you would need to say "24px" for 24 PIXEL font size.
Here is an example from the previous section, with the font-size properties set to pixel-based rather than point-based values.
Example (excerpt):
body { background:#FFCCFF; }
p { font-size:16px; color:#660066; font-family:"Arial", "Helvetica", sans-serif; }
p.callout { font-size:24px; margin-left:1in; margin-right:1in; font-family:"Times New Roman", "Times", serif; }
p.note { font-size:10px; }
.special { font-style:italic; color:#FF0000; }
Here is the above example displayed, in context.
Using pixel-based font sizes DOES provide consistent results across browsers and platforms. If you are a Mac-based developer, the conversion will be easy for you, since point-based and pixel-based fonts are the same size on the Mac (i.e. 12 point = 12 pixel). If you are a PC-based developer, you have a trickier job of font-size conversion.
A point is 1/72 of an inch. A 12 point font, therefore, should be 12/72 of an inch tall (roughly). The Macintosh displays everything at 72 pixels per inch. One point, therefore, is technically one logical pixel tall on the Macintosh, so point-sized-font equals pixel-sized-font on the Mac. The Macintosh was originally designed to be a desktop publishing machine.
On a PC, fonts are displayed by the Windows OS at 96 pixels per inch. A 12 point font, for instance, is 12/72 of an inch, 12/72 of 96 pixels is 16 pixels, therefore a 12 point font is technically 16 pixels tall on the PC. A web browser displays everything at 72 pixels per inch. When a 12 point font on the PC is displayed in a web browser, the pixels are all preserved, so the font becomes 16 pixels tall, or 16/72 of an inch (which is really 16 points). If you want to preserve what you see at "12 point font size" in a web browser on a PC, then, you must set the CSS property font-size to 16px (16 pixels).
The conversion formula for the PC:
point-based-font-size / 72 * 96 = pixel-based-font-size
Example Conversion for a 30 point font as viewed in a web browser on the PC:
30 / 72 * 96 = 40px
If you just do all of your design using pixel-based font sizes, you will avoid having to do these conversions.
Something you should be aware of when setting fixed font-size in CSS: users will NOT be able to resize the fonts in their web browser to make them larger; this can be a problem for users whose monitors display small pixels or for users who are visually-challenged. If you are NOT providing alternate style sheets for users (which can be done with JavaScript), you MUST be careful to make your fonts large enough in your CSS declarations!
Note: Users DO have the option of turning off CSS formatting of web pages via their Preferences settings, but most are not aware of this.
Mac Developers Be Aware: Internet Explorer 5 for the Mac converts CSS font-size property values to match the display of its PC counterpart, so "font-size:12pt;"
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.