News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 14 – Font

CSS tutorials

The font properties can be used to change aspects of the font.

Font-family

Font-family sets the face of the font. Its value can be a specific font name, such as “Times”, or a generic family name, such as “sans-serif”.

font-family : inherit | <family-names> | 
              <generic-families>

The value can also contain a prioritized space-separated list of font names. If the browser doesn’t support the first font it will use the next one and so on. Note that if a font name includes spaces it must be surrounded by double quotes.

p { font-family: Verdana, Arial, "Times New Roman"; }

Font-size

Font-size sets the size of the font. The value can be any unit of measure or a percentage of the parent’s font size. There are also a couple of predefined values as can be seen below.

font-size : inherit | <length> | <percentage> | 
            smaller | larger | xx-small | x-small | 
            small | medium | large | x-large | xx-large

The “larger” and “smaller” values are relative to the parent’s font size, while the other predefined values refer to absolute sizes. The initial size is “medium”. Below an example is shown of how the different font sizes can be rendered.

larger smaller xx-small x-small small medium
large x-large xx-large

Font-style

Font-style makes the text slanted. According to specification, “italic” is a cursive companion face to the normal face and “oblique” is a slanted form of the normal face. However, they tend to be rendered the same for most fonts.

font-style : inherit | normal | italic | oblique

Font-variant

Font-variant can be used to display text using small-caps instead of lowercase letters.

font-variant : inherit | normal | small-caps

Font-weight

Font-weight sets the thickness of the font. The “bolder” and “lighter” values set the thickness relative to the parent element and the numeric values specify absolute weights. The value “bold” is equal to 700 and “normal” is the same as 400.

font-weight : inherit | normal | bold | bolder | 
              lighter | 100 | 200 | … | 900

Even though several weight values can be specified most fonts only have one type of bold, as can be seen below.

lighter normal bold bolder 100 200 300 400 500 600 700 800 900

Font

There is a shorthand property named “font” for setting all of the font properties in one declaration.

font : inherit | <font-style> + <font-variant> + 
       <font-weight> + <font-size> / <line-height> +
       <font-family>

The properties must be specified in the order listed above. As long as this order is kept either one of the properties can be left out, except for font-size and font-family which are mandatory. If a property is left out then the default value for that property will be used, which is to inherit the parent’s value. The example below applies all font properties, including line-height, to the <p> elements.

p { font: italic normal bold 10px/25px Verdana; }
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours