2. HTML FONTS
• The HTML <font> Tag Should NOT be Used
• The <font> tag is deprecated in HTML 4, and removed from HTML5.
• The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.
• In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many
HTML elements.
• The example below shows how the HTML could look by using the <font> tag:
• Example
• <p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
3. HTML FONTS
• Basic text commands
• That command would give you this on the screen:Hello
• You can specify different size values for the fonts, from one to
seven. Here are the sizes:One Two Three Four Five Six Seven
• You can also create bold text and italicized text, as well as combine
the two:<font size=4><b>Hello</b></font>
Hello<font size=4><i>Hello</i></font>
Hello
• <font size=4><b><i>Hello</i></b></font>
Hello
• A small caps effect for titles is easy to do. Just combine different
sizes within the same word.<font size=5>S</font><font
size=3>MALL <font size=5>C</font><font size=3>APS</font>
SMALL CAPS
• Small caps can look even better if you make them bold:SMALL CAPS
4. HTML FONTS
• Specifying types of fonts
All of the examples given above appear on your screen in whatever font you've selected as your
default text font in your browser's option window. However, if you're using a reletively new version
of Netscape or Explorer, this text is given in a different font, as are the section headings. This
section shows examples of the code that does it. Before we begin, here's a comparison between
your default font (whatever it is - note that it may not show up correctly if you're using Explorer for
Mac) with a specified font (the new code is given in red):<font size=+1>This is your default
font</font>
This is your default font<font face="geneva, arial, sans serif" size=+1>This is geneva or arial</font>
This is geneva or arial
• Note that you cannot specify just any font; the number is limited, and the person viewing the page
has to have at least one of the general fonts on their computer. For this reason, basic system fonts
for both Macintosh and Windows should be given. You can name up to three fonts; the first font
named is the one which appears if it is in the user's system, and if it isn't, the next one is used.
Examples are given below; the code is given in red, and an example follows immediately below it.
Note, too, that sizes can be given from -2 to +4 ; a value of zero means the default size that the
viewer has chosen in their browser options. You can also choose to name the size using numbers
from 1 to 7.
5. HTML FONTS
• In the next two examples, notice that the order of fonts listed is only important if the viewer has
those fonts; Windows95 users will see the first two examples as identical.
• <font face="geneva, helvetica, sans serif" size=+1>This is geneva or helvetica (or some other sans
serif font on Windows)</font>
This is geneva or helvetica (or some other sans serif font on Windows)<font face="helvetica,
geneva, sans serif" size=4>This is helvetica or geneva (or some other sans serif font on
Windows)</font>
This is helvetica or geneva (or some other sans serif font on Windows)
• <font face="arial black, monaco, chicago" size=4>This is arial black, monaco, or chicago</font>
This is arial black, monaco, or chicago
• <font face="times, times new roman, serif" size=4>This is times or times new roman</font>
This is times or times new roman
• <font face="arial, helvetica, sans serif" size=+1>This is arial or helvetica</font>
This is arial or helvetica
• <font face="palatino, times, times new roman" size=+1>This is palatino, times, or times new
roman</font>
This is palatino, times, or times new roman
• <font face="courier, bookman" size=+1>This is courier or bookman</font>
This is courier or bookman
• <font face="comic sans MS, new york, times" size=+1>This is Comic Sans MS, New York, or
Times.</font>
This is Comic Sans MS, New York, or Times.
6. HTML FONTS
• If you're aiming for extra-special effects, the fonts named first should be ones which people might have, whereas
the third should be one peopleprobably have. In the next example, Impact is a standard Word for Windows 95
font, but Poster Bodoni is not a standard Macintosh font, so the third alternative, Geneva, is one I know Macintosh
computers have preinstalled.<font face="impact, poster bodoni, geneva" size=+1>This is Impact, Poster Bodoni, or
Geneva.</font>
This is Impact, Poster Bodoni, or Geneva.
• These different fonts are usually easier to read than default fonts at very small sizes. Compare these
examples:<font face="geneva, helvetica, arial" size=-2>This is geneva, hevetica or arial, SMALL SIZE</font>
This is geneva, hevetica or arial, SMALL SIZEMost people, though, using Netscape have default fonts set as Times
or another serif font, which looks like this:
This is times, SMALL SIZE
• You can also get larger sizes of type face by using larger fonts (note that when only one Macintosh font is named,
Windows users will probably not see any difference; that's why you should always have alternatives):This is times,
size 7New York, size 7
• This is arial or geneva, size 7
• This is helvetica or geneva, size +4
• This is bold times, size +3
• This is bold times, size +4
• This is bold bookman, size +3
• This is bold arial or geneva, size +3
• This is bold arial or geneva, size +4
• This is bold helvetica or geneva, size +3
• This is bold courier, size +3
