Tutorial 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 alot 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.

---

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