One of the variables in web site design is the availability of fonts on visitor’s computer. For example, you would have instructed the text on your web pages to be displayed in MS comic sans, but if visitors do not have it installed, their browser will use the default font. This messes the overall design of the web page, which you so meticulously created.
To overcome such system inconsistencies, it’s advisable to use a set of fonts that will determine, on a priority basis, which font are used.
Sponsored Links
How is web page text displayed in different fonts?
Fonts on a web page can be specified using the HTML <font> tag or Style sheets. There is a great deal of difference in the way the two are put to work. The HTML <font> tag is much older than style sheets and has been deprecated (which is just a fancy way of saying that the <font> tag is being shown the door) by the authority that govern the standardisation of HTML – The World Wide Web Consortium. Cascading style sheets, on the other hand, have been gaining ground steadily and are now well supported by the popular web browsers.
Using the HTML <font> tag
With the <font>, one can indicate which fonts the browsers should use for displaying the text that is surrounded by this tag. We put to use the FACE attribute of this tag to specify the font families, as in:
<font face="Arial, Verdana, Sans-serif" color="red"> I love the Internet </font>
The above code specifies that the text phrase “I love the Internet” is displayed in red color in Arial font. If the Arial font is missing on the visitor’s system, Verdana is used and if that is missing too, then the browser should use the default sans-serif font.
The <font> tag has, from one angle, itself to blame for its gradual decline. With this tag, HTML tried to bite more than it could chew. The story is like this. HTML was developed to define a structure for documents; i.e. provide a logical flow to documents by indicating a title, heading, paragraphs, lists and table etc. It was never meant to dictate how the web page should look in a web browser. However, with the <font> tag one could specify not only the different fonts but also the color and size. This lead to overuse of this tag which started messing a lot of things on a web page. For example, designers instead of using the HTML heading tags (<h1> to <h6>) started employing the <font> tag to create web page headings.
Fonts and style sheets
The main purpose of developing the style sheets technology for web pages was to segregate the content from its presentation. Thus, style sheets are simply a set of rules that determine how different HTML elements should be displayed in a web browser. For example, you can specify that the web page headings (created by the HTML heading tags) should be in green color and be displayed in Arial font, or that paragraphs (text contained within the HTML <P> – </P> tags) should be in blue color etc.
Specifying different fonts with Style sheets involves the use of the font-family selector, as in:
.imp {font-family: Arial, Verdana, Sans-serif;
color: #FF0000:
The above style sheet rule indicates to the browser that any text that uses this rule is displayed in red color (hexadecimal color code: #FF0000) in Arial. If the Arial font is not installed on the visitor’s computer, the web browser should use Verdana and if that is also not installed then the default sans-serif is employed.
So which fonts should be used on the web to provide maximum compatibility across different browsers and operating systems?
Here are font-families that should provide adequate cross-browser compatibility.
The Sans-serif family
Arial, Verdana, Geneva, Helvetica, sans-serif
The Serif family
Georgia, Times New Roman, Times, serif
The Monospace family
Courier New, Courier, monospace
Here is how each one is displayed on a web page
The Sans-serif family
Arial, Verdana, Geneva, Helvetica, sans-serif
The Serif family
Georgia, Times New Roman, Times, serif
The Monospace family
Courier New, Courier, monospace
For maximum font compatibility or if you are too particular of the fonts to be used on your web site, I recommend using the embedded font technologies or using Bitstream Font Player, which allows you to use a select set of fonts available from them. However, the question that you should ask yourself – Would I download and install a font just to view a web site the way the designer wanted me to?
