font-size

You can specify the size of your fonts using any of these:

• [absolute-size]

• [relative-size]

• [length]

• [percentage]

• inherit

[absolute-size]

[relative-size]

You have two choices:

• larger

• smaller

[length]

Use a fixed size, specified using either relative or absolute units.

Relative

• em (the width of the letter m)
• ex (the height of the letter x)
• px (pixels)

Advantages to using em:

• Advantages to using px:

Disadvantages to using px:

• Mobile devices with very high density screens (the iPhone 4 & up, for instance, has 326 ppi [pixels per inch]) mean that small fonts like 12px are very difficult to read.

If you're going to use em (which I recommend), here's a good method:

body {
    font-size: 100%;
    line-height: 1.3;
    font-family: Helvetica, Tahoma, sans-serif;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

Absolute

Do not use absolute units to specify font sizes for use on computer screens. Instead, these are to be solely used with print style sheets.

• in (inches)
• cm (centimeters)
• mm (millimeters)
• pt (points; 1 pt is 1/72 of an inch)
• pc (pica)

Examples:

font-size: 1em;
font-size: 16px;

[percentage]

The percentage is relative to parent’s font size. Note that using a decimal is like using a percent sign! In other words, this:

150%

is the same as this:

1.5em

font-stretch

A font has three basic values for stretching, which can then be expanded upon:

• Condensed

• Normal

• Expanded

Possible values are:

• ultra-condensed

• extra-condensed

• condensed

• semi-condensed

• normal

• semi-expanded

• expanded

• extra-expanded

• ultra-expanded

NOTE: This was a CSS 2 property, but was dropped in CSS 2.1 due to lack of implementation, & is now a CSS3 property that (as of early 2012) is supported only by IE 9+ & Firefox 9+.

font-style

You have four possible variants:

• normal

• italic: If you specify italic but such a face doesn't exist for that font, oblique is automatically created on the fly & used.

• oblique: If a font wasn't built with an italic face, then oblique "creates" a pseudo-italic face on the fly by simply sloping the letters. In the figure below, the top face is normal, the middle is italic, & the bottom is oblique. Note how the oblique looks pretty much like the normal, just slanted, but the italic is very different.

• inherit

font-variant

You have three possible values:

• normal

• small-caps: Instead of this—Scott Granneman—small-caps makes words look like this: Scott Granneman. Don't use this all over a site; however, it can look nice in headers.

• inherit

font-weight

Possible values are:

• normal

• bold

• bolder

• lighter

• 100, 200, 300, 400, 500, 600, 700, 800, 900: For fonts that only provide normal & bold faces, 100-500 are normal & 600-900 are bold.

• inherit

This table makes the preceding values more understandable: