Working with fonts

Several font styling types are available as well as style types that affect the display of fonts, covering all the possible variations with a font. It is important to note that, although most of the font style types are device independent, the font family is device specific. For this reason the CSS style specification allows for a range of alternatives. e.g.

    font-family: verdana, helvetica, sans-serif;

In this example the browser will work through the list until it finds a font family which it can interpret. All browsers are required to support the following generic font types:

  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy,

and these will be substituted by the appropriate default font on the target browser. For example, a Windows based browser will usually use Arial for Sans-Serif. You should always provide an alternative for a specific font, and this should usually be a generic alternative as in the example above.

Other font style types and possible values are shown below:

normal or italic or oblique
normal or small-caps
normal or bold or bolder or lighter or 100 or 200 or 300 or 400 or 500 or 600 or 700 or 800 or 900
an absolute value ( e.g.1cm) or relative size value (e.g. 1.5em)
an absolute
(e.g. 1cm)

or relative size value
(e.g. 80%)

Alternatively, all the values can be set in a single line using a shorthand notation, using the values for:

font-style font-variant font-weight font-size/line-height font-family>. E.g.

    font: normal small-caps bolder 120%/100% "Comic Sans",cursive

resulting in:

This is a normal paragraph with default setting.

This is a paragraph using the styles above.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera