Email Article

Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference

from Special Edition Using HTML 4:
Cascading Style Sheet Property Reference
by Jerry Honeycutt

Font Properties

You can group the font properties using font. You specify the weight, style, size, and family, as in the following example:

font: bold normal 12pt times, serif

font-family

font-family is a prioritized list of typefaces for the element. You can specify a single typeface or a list of alternatives, separated by commas, as in the following example:


font-family: Courier, Times, Serif

You can use a font name you expect to be on the user's computer, such as Courier or Helvetica, or you can use a generic font name. Table B.11 shows the generic font names and provides an example of a font that looks similar.

Table B.11 Generic Fonts

Name	Similar to:
`serif`	Times New Roman
`sans-serif`	Arial
`cursive`	Script
`fantasy`	Comic
`monospace`	Courier New

In case the user doesn't have the font you've requested, always use a generic font name as the last item in the list. In the previous example, serif is the last font in the list. If the user doesn't have courier or times, the browser will use the generic font instead.

If you're using a font name that has multiple words, enclose the font name in quotes, as in the following example:

font-family: "Courier New", serif

font-size

font-size determines the size of the text in points (pt), inches (in), centimeters (cm), or pixels (px). You can also use a percentage, which is relative to the parent element's font size. You can also use one of the values shown in Table B.12.

Table B.12 font-size Values

Value	Description
`xx-small`	50 percent smaller than the x-small font
`x-small`	50 percent smaller than the small font
`small`	50 percent smaller than the medium font
`medium`	A medium-sized font, probably 10 points
`large`	50 percent larger than the medium font
`x-large`	50 percent larger than the large font
`xx-large`	50 percent larger than the x-large font
`larger`	50 percent larger than the parent element's font
`smaller`	50 percent smaller than the parent element's font

NOTE: The W3C recommendation that browser programs use a scaling factor of 50 percent is only a recommendation. Vendors are free to use any scaling factor that they want. Thus, the values in Table B.12 are only guidelines.

font-style

You can change the style of the font by using the font-style property. Table B.13 describes the possible values.

Table B.13 font-style Values

Value	Description
`normal`	Selects a normal face
`oblique`	Selects an oblique face
`italic`	Selects an italic face

font-variant

You use the font-variant property to display text in small caps. Setting this property to normal causes the browser to display the text normally. Setting this property to small-caps causes the browser to display the text using small caps.

font-weight

font-weight determines the thickness of the font. You can assign normal, bold, bolder, or lighter to this property. You can also use the series of numbers from 100, 200, ... 900 to this property, with each successive number representing a weight that is thicker than the previous number. For example, font-weight: 700 sets a thicker font weight than does font-weight: 400.

TIP: A font weight of 400 is roughly equivalent to a normal font weight.