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

Previous Chapter: Chapter 9 - Text

Next Chapter: Chapter 11 - Anchors, links and pseudo classes

Table of Contents  -   Top Of Page