Chapter 10 : CSS Font Properties


Inherited: Yes

Font

The font property can set the style, weight, variant, size, line height and font:

  font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic style a bold weight a normal variant a relative size a line height of 1.4em and the font to Verdana or another sans-serif typeface.

Font-Family

You can set what font will be displayed in an element with the font-family property.

There are 2 choices for values:

  • family-name
  • generic family

If you set a family name it is best to also add the generic family at the end. As this is a priortized list. So if the user does not have the specified font name it will use the same generic family. (see below)

  font-family: Verdana, sans-serif;

Font Size

You can set the size of the text used in an element by using the font-size property.

  font-size: value;

There are a lot of choices for values:

  • xx-large
  • x-large
  • larger
  • large
  • medium
  • small
  • smaller
  • x-small
  • xx-small
  • length
  • % (percent)

Font Style

You can set the style of text in a element with the font-style property

  font-style: value;

Possible values are

  • normal
  • itailc
  • oblique

Font Variant

You can set the variant of text within an element with the font-variant property

  font-variant: value;

Possible values are

  • normal
  • small-caps

Font Weight

You can control the weight of text in an element with the font-weight property:

  font-weight: value;

Possible values are

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