3.2 Fonts
One of the basic ways a web page can be styled to great effect is by specifying fonts. Text fonts come in 5 basic categories:
| Type | Examples |
|---|---|
| Sans Serif | Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana (created for web use) |
| Serif | Garamond, Georgia, New York Times, Times New Roman |
| Monospace | Courier, Courier New, Lucida Console, Monaco |
| Fantasy | Copperplate, Desdemona, Impact, Kino |
| Script | Comic Sans MS, Lucida Handwriting, Zapf Chancery |
Sans-serif fonts don't have serifs, or the little hooks on the end of the letters. Sans serif fonts are ideal for use on screen as they can be clearer, while serif fonts are more suitable for use in print. Monospace is suitable for typewriter and code, while fantasy and script are useful in images.
The colour, type of font and size of text to be used in web page content can be specified using the <font> tag. Therefore this tag comes with the following attributes:
| Attribute | Purpose | Example |
|---|---|---|
| color | Defines the font color | color="#00ff00" |
| face | Defines the font-name | face="verdana" |
| size | Defines the font size | size="2" |
Together these can be used like this:
<p> <font face="verdana" size="3" color="blue"> This is a paragraph. </font> </p>
This would look like this in a browser:
This is a paragraph.
The <font> tag is deprecated from HTML 4.0 onwards and should NOT be used in markup these days. Instead the style attribute should be used instead, as we did for colours, and for which the format is usually always:
<tag style="CSS properies">Content text</tag>
The style attribute can be used with most elements in HTML, but note that it uses CSS properties between the quotes rather than attributes (several can be specified if seperated by a semi-colon). This is an example of using CSS inline, which will be covered in the CSS Tutorial. A quick example is shown below:
<p style="font-family:courier;font-size:3px;color:blue;">This is another paragraph.</p>
This would look like this in a browser:
This is another paragraph
As you can see, with both methods styling the font, size and colour of text each time it occurs in a web page would be a lengthy and time consuming task. This is something that can be made considerably easier using CSS in a separate file rather than inline, but this will be covered in the CSS Tutorial later.