CSS font Property

The font property is a shorthand for the most common font-related properties: font-style (for italics), font-variant (for small caps), font-weight, font-size, line-height and font-family. It requires at least three parameters: font-size,font-family and one of font-style, font-variant and font-weight.

font: normal 1.2em/1.4 Verdana, Geneva, sans-serif;   /* line-height = 1.4 * font-size */
font: bold 120% 'Times New Roman', Georgia, serif;    /* line-height defaults to normal (~1.2) */
font: italic 300 24px/1.2 monospace;                  /* italic, weight = 300 */

The first three can be specified in any order but at least one of them has to be provided. font-size and font-family are required.

Set line-height with no units for it to be relative to font-size. A font-size set in ems or percentages is relative to parent's font-size. The comma-separated list of font families requires names containing spaces to be quoted.

Browser Support: Full

The normal usage

The font shorthand is normally used to set just three or four values: font-style or font-weight, font-size, font-family and line-height.

p.example {
font: normal 24px/1.5 Arial, Helvetica, sans-serif;
}

The font properties of this text are set using the shorthand. Play around with the rule and see how it changes.

Shorthands and inheritance

As with all CSS shorthands, values not provided to font will be set to initial instead of inherited. Initial values are the default ones assigned to elements with no CSS rules and no inherited styles. The only way to inherit a value is through the longhand properties (or not using the shorthand). For example:

.parent {
font-weight: bold;
} .child {
font: italic 28px monospace; font-weight: inherit;
}
The font properties of this text are reset, except for the ones explicitly inherited using longhands.

Try removing the font-weight:inherit rule to see it for yourself. The font weight is reset to the default, which is normal, not bold. This is a major drawback of shorthand rules in general.

font-style and font-variant

The font-style and font-variant values allow for italic/oblique and small caps respectively. Oblique text has sloped glyphs while italic text is cursive. In practice, both are usually the same unless an italic version of the font has been declared using @font-face. Additionally, setting font-variant to small-caps will transform lowercase glyphs into short uppercase. See font-style and font-variant for details.

.example {
font: italic small-caps 24px Helvetica, sans-serif;
}
This Text is Italic and Small Caps.

font-weight

The font-weight property controls the thickness of text. CSS has a nine step scale for weight, ranging from 100 (thinnest) to 900 (heaviest). Not all values are available. It all depends on the specific font family and whether or not the glyphs are loaded by the browser. The normal (400) and bold (700) weights are almost always available. If glyphs are not avaialable for a specific weight, a close available weight is used in place. A font weight can be made available using @font-face. See font-weight for examples. The following are the font weights available for Arial.

400 - Normal

700 - Bold

900 - Black (Heavy)

font-size and line-height

font-size and line-height values control the height of characters and line spacing respectively. font-size is usually set in ems, which are relative to the parent element's font size in this context. This allows to change a whole section's font size by modifying the parent only.

line-height is usually given as a number with no units. The number is multiplied by the font size to compute line-height. This means that line-height, when set that way is always relative to font size, something usually desirable.

font: normal 1.2em/1.5 Arial;

Suppose the parent of an element with the previous rule has a font size of 25px. The rule sets the child's font size to 1.2*25 = 30px and the line-height to 1.5 * 30px = 45px. Check the font-size and line-height pages for more.

font-family

The font-family value of the font property takes a comma separated list of font families, just like the font-family property. The first font of the list that is available will be used. Always start with your prefered font and end with one of the five generic families: serif, sans-serif, monospace, cursive and fantasy. For example:

font: bold 24px "Open Sans",Helvetica,sans-serif;

For a complete explanation see the font-family property's page.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>