HTML Topics
©1998–2012 R. Hinton, Broome Community
College
Last Updated: 13–Oct–12
The way text appears on a Web page can be changed to enhance readability and provide some pizzazz! The two main ways are by changing the size of the font or by changing the typeface.
Before anything can be modified‚ we need to be introduced to a new tag. The <font>…</font> identifies the text to be changed. By itself it does nothing. However‚ the addition of attributes‚ makes the changes occur. The size attribute modifies the size of the text and can be done by setting its absolute or relative value.
The size of text runs from 1 – 7‚ where 1 is the smallest size and 7 is the largest size. If you don’t specify a size‚ size="3" is assumed by the browser. The general format for the tag is:
where the # is replaced by some value between 1 – 7. For example:
<font size="1">Size 1
Text</font>
<font size="4">Size 4
Text</font>
<font size="7">Size 7
Text</font>
Notice that this is backwards from <h>eading tags. In addition‚ Headings are automatically in bold. If the entire paragraph is to be in bold‚ it is better to use <h>eading tags than <p>aragraph and <font> tags.
Relative sizes are another way of changing the size of text. Rather than setting the actual size‚ it is set in relation to the currently set size. The general format for the tag is:
<font size="-2">2 Sizes
Smaller Text</font>
<font size="-1">1 Size Smaller
Text</font>
Normal Size Text
<font size="+1">1 Size Larger
Text</font>
<font size="+2">2 Sizes Larger
Text</font>
Be aware that sizes 1 – 7 are still your limits. However‚ there are some fun things that you can do. For example:
Changing the typeface is a little trickier. While you can use the actual names of fonts‚ you can never be sure that the user has those fonts on their computer. In addition‚ you run into issues between Mac‚ Linux‚ and PC fonts. The best method is to use generic font names. Realize that when you use them‚ the browser picks the font it will use to render the text. The general format for this tag is:
The first three examples will work in most browsers:
<font
face="sans-serif" size="5">Sans-Serif
Text</font>
<font face="serif"
size="5">Serif Text</font>
<font face="monospace"
size="5">Monospace Text</font>
Note that serif text has little tails on the ends of the characters and is the default typeface. This makes words stand out more and is normally used for writing paragraphs. Sans serif text has no tails and is usually used for headings. This is because the letters stand out drawing the reader’s attention. With monospaced text‚ each character takes up the same amount of space on the screen‚ which is good for simulating columns.
There are two more generic typefaces‚ but they only work in IE or Firefox and higher. Be very careful with these‚ as you never know what font will be chosen by the browser and may make your text unreadable. These are:
<font
face="cursive" size="5">Cursive Text</font>
<font face="fantasy"
size="5">Fantasy Text</font>