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)

There is quite a bit to learn about font sizes with CSS so, I am not even going to try to explain it. Actually there are already some great resources on how to size your text. (see below)

  • What size text should I use in my css by Paul O’B
  • Dive into accessibility – Font Sizes

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