Font Properties

Fonts are one of the most basic things designers want to set with CSS. Is the text italic? Is it bold? What typeface and size are used? CSS provides properties to set all these basic characteristics of text. In particular, you can set these properties:

  • font-family
  • This is a list of font names, separated by commas, in order of preference. The last name in the list should always be one of the generic names serif, sans-serif, monospace, cursive, or fantasy. Multiword names like "Times New Roman" should be enclosed in quotes.
  • font-style
  • The value italic indicates that an italic version of the font should be used if one is available. The value oblique suggests that the text should be algorithmically slanted, as opposed to using a specially designed italic font. The default is normal (no italicizing or slanting). An element can also be set to inherit the font-style of the parent element.
  • font-size
  • This is the size of the font. This should be specified as one of the values xx-small, x-small, small, medium, large, x-large, xx-large. Alternately, it can be given as a percentage of the font-size of the parent element. It can also be specified as a length like cm or pt, but this should only be done for print media.
  • font-variant
  • If this property is set to small-caps, then lowercase text is rendered in smaller capitals like this instead of normal lowercase letters.
  • font-weight
  • This property determines how bold or light the text is. It's generally specified as one of the keywords normal (the default), bold, bolder, or lighter. It can also be set to any multiple of 100 from (lightest) to (darkest). However, not all browsers necessarily provide nine different levels of boldness.
  • font-stretch
  • This property adjusts the space between letters to make the text more or less compact. Legal values include normal (the default), wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.

For example, this style rule uses all of the previous properties to make the dish element a suitably impressive headline: 

dish {
 font-family: Helvetica, Arial, sans-serif; font-size: x-large; font-style: italic; font-variant: small-caps; font-weight: 900; font-stretch: semi-expanded }