Guide to HTML
CSS: Font Properties

font-family

Syntax:

font-family : <[font family | generic family] [, ...]>

The name of a font family. E.g. Gill and Helvetica are font families. Generic family names are

serif
(e.g. Times New Roman, Garamond, Century Schoolbook, or Bodoni)
Sample Text

sans-serif
(e.g. Arial, Helvetica, Verdana, Univers)
Sample Text

cursive
(e.g. Zapf-Chancery)
Sample Text

fantasy
(e.g. Western)
Sample Text

monospace
(e.g. Courier, MS Courier New, Prestige)
Sample Text

The way the sample text will be rendered depends on the availability of the fonts defined here, the browser and the way it has been setup.

The difference between "plain italic" and cursive is that with cursive the characters are more or less connected, as in handwriting.

Font names containing spaces should be quoted: "times new roman".

Top


font-style

Syntax:

font-style : <normal | italic | oblique>

The normal style font is called normal -- it is a straight font under a 90 degree angle to the baseline. Fonts that have the word "italic" or "cursive" in their names are probably both labeled as cursive fonts.

Top


font-variant

Syntax:

font-variant : <normal | small-caps>

Not all browsers support the small caps. Some browsers ignore this (Netscape 4.08), other browsers convert it to uppercase (Internet Explorer). Sometimes the lowercase letters are replaced by scaled uppercase letters.

Top


font-weight

Syntax:

font-weight : <normal | bold | bolder | lighter>
font-weight : <100|200|300|400|500|600|700|800|900>

Normal font is rated 400, bold as 700. bolder and lighter are relative to the parent's weight. Child elements inherit the computed weight, not the keyword. The exact weight depends on the type of font.

Top


font-size

Syntax:

font-size : <[+-]value>

The value can be an absolute value, relative value, percentage, or length.

An absolute value can be xx-small, x-small, small, medium, large, x-large, xx-large where the difference between medium and large is usually said to be a factor 1.5.

A relative value can be 80%, 120%, smaller, or larger. With larger, a normal font would become large. The length and the percentage will be processed independent of the font's size table.

Example:

Source:

body {
    font-weight : bold
    font-size : 120%
    }

Result:

Boldface text, size 120%.

This may also be compressed on a single line:

body { bold 120% }

Example:

Absolute sizing:

xx-small, x-small, small, medium, large, x-large, xx-large.
Note that the actual font size depends on the font size, defined in the browser.

Relative sizing:

150%, 80%, smaller, larger.

Dont't:

Try avoiding absolute font sizes using points or picas in style definitions. Nothing can be more frustrating for a user than to click the increase font button on the browser just to find out that nothing happens. It is best to use relative sizes like font-size : 80%, instead of font-size : 10pt. So, leave the initial font size up to the user and just increase or decrease a font by using relative sizes.

Top


text-decoration

Syntax:

text-decoration : <none | underline | overline | line-through | blink>

These text properties very much speak for themselves.

Top


Letter spacing

Syntax:

letter-spacing : <value>

With letter spacing you can override the default browser behaviour. In theory. Because it is not a given that all browsers will properly honor this setting.

This is loose text.
This is standard text.
This is tight text.

Note:

Top


vertical-align

Syntax:

vertical-align : <baseline | middle | sub | super | text-top | text-bottom | top | bottom>
vertical-align : <percentage>

With this property, you can set the vertical positioning of an element.

These keywords are relative to the parent element:

baseline
This aligns the baseline of the element with the baseline of the parent.
middle
The vertical midpoint of the element (an image, for instance) will be aligned with the baseline plus half the x-height of the parent.
sub
Put the element in subscript.
super
Put the element in superscript.
text-top
Aligns the top of the element with the top of the parent element's font.
text-bottom
Aligns the bottom of the element with the bottom of the parent element's font.

These keywords are relative to the current line:

top
Aligns the top of the element with the tallest element on the current line.
bottom
Align the bottom of the element with the lowest element on the line.

A precentage refers to the value of the element's line height property. It will raise (or lower when it is a negative value) the baseline over the baseline of the parent.



Paragraph separator