|
Design Tip:
What Size is FONT SIZE?
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Do you know what size type FONT SIZE=4 creates? The answer may surprise you, since it depends on the visitor's browser and hardware. Our handy Font Size table shows you what to expect.
The Surprising SIZE Attribute
While Cascading Style Sheets (CSS) are gaining popularity, the FONT tag is still the mostly widely used technique for setting the typeface of your Web pages. To set the typeface of a section of your page, you might use some HTML code like this:
<FONT SIZE=4 FACE="Arial">
Your text goes here
</FONT>
|
This sets the typeface of your text to be "Arial," the popular, clean-looking font used on many Web pages. This code also uses the SIZE attribute to set the type size to 4.
But, you might ask, "Four what? 4 inches? 4 points? 4 pixels?"
The answer is "none of the above." In fact, the SIZE attribute allows you to set your font to an abstract size ranging from 1 to 7. The exact type size corresponding to each of these values is left to your browser. You can't be sure, for example, that SIZE=4 will give you a 12 point typeface; you know only that SIZE=4 will be bigger than SIZE=3.
This frustrates webmasters who are accustomed to applications like Microsoft Word that let you set your type size in "points." This lack of control is even more frustrating, given that different browsers will assign a different "point size" to your type for the same SIZE value. In fact, even the same browser used on different platforms will give you different results!
The table below shows the point size actually used on your Web page by the major browsers. Browsers listed as Microsoft Internet Explorer Version 5.0 (IE 5.0), Netscape Navigator Version 4.2 (NN 4.2) and Version 4.7 (NN 4.7).
|
|
PC
|
IMAC
|
|
Size
|
IE 5.0
|
NN 4.2
|
IE 5.0
|
NN 4.7
|
|
1
|
7
|
8
|
7
|
9
|
|
2
|
9
|
9
|
9
|
10
|
|
3
|
10
|
12
|
12
|
12
|
|
4
|
12
|
14
|
14
|
14
|
|
5
|
16
|
18
|
18
|
18
|
|
6
|
20
|
24
|
24
|
24
|
|
7
|
30
|
34
|
34
|
34
|
This table shows, for example, that FONT SIZE=4 gives you a 12 point font under Microsoft Internet Explorer Version 5.0 on the PC. But this same browser on the iMac will give you a 14 point font!
The HTML Compromise
At this point you may be wondering why in the world HTML was written this way. The answer, as with most strange things in the computer world, lies in history.
The FONT tag was first introduced in Version 1.0 of Netscape Navigator, way back in December of 1994. The tag was officially adopted into version 3.2 of the HTML Standards, in May of 1996.
In those days, the Web was the scene of a raging culture war between the engineers and scientists for whom it was first invented, and the business people and graphic designers who were adapting it for commercial use.
Graphic artists were frustrated by the lack of control HTML gave them over their pages. It was common to see artists posting messages like this: "I hate HTML! I want the same kind of control over my Web pages that I get with PowerPoint. Why can't HTML do that?"
The engineers and scientists were keenly aware that Web pages might be viewed on a dozen different types of computers, from PCs to UNIX mainframes - each of which had different display capabilities. As a result, they felt strongly that Webmasters should worry only about the content of their Web pages, and let the browser decide the look and feel of each page. Their typical response to artists was, "You don't understand the Web environment. Go work in another medium!"
The FONT tag was a compromise between these two camps, allowing Webmasters to have some say in the typeface used on their pages, while giving the browser the final authority to set the typeface based on its abilities.
Use CSS For Absolute Control And Safety
Nowadays this issue is largely irrelevant. The culture war has been settles, with the graphic artists winning. With the advent of Cascading Style Sheets (CSS), Webmasters have far greater control over the look and feel of their pages. That's especially true with typeface.
Under CSS, you can precisely specify the font size for your page, using a wide variety of sizes, like this:
<DIV STYLE="font-size : 12pt;
font-family : Arial">
Your text goes here
<DIV>
|
This sets the size of your type of be 12 point Arial type. Of course, if a browser viewing the page does not have 12 point Arial type installed, it will either ignore your font setting or chose the closest available font.
With CSS, you can set your font size in points (pt), pixels (px), inches (in), or a number of other units.
In fact, the FONT tag is now officially deprecated. That is to say, the Word Wide Web Consortium, which determines the official HTML Standards, discourages use of the tag. Instead, they encourage use of CSS to set your typeface.
Since over 95% of Web browsers now understand at least the basic parts of the CSS Standards, this is a safer approach to layout than the FONT SIZE attribute.
|
