Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Design Tip:
What Size is FONT SIZE?

by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.

  
July 2000
(Part 2)
Vol. 3, No. 8
 • HTML Tip
 • Design Tip
 • Promotion Tip
 • Beginner Tip
  

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.