web typography study guide

Weight and Style

The weight of a particular font is the thickness of the character outlines relative to their height. A typeface may come in many weights, from ultra-light to extra-bold or black. Four to six weights are not unusual, and a few typefaces have as many as a dozen [fig.1].

In CSS, you can specify font-weights other than normal and bold by using numeric font-weight values scaled from 100 to 900 (400 is the same as normal, and 700 is the same as bold).

The style of a font is usually connected to an angle. It is either upright or slanted. The normal style is upright or roman and will display by default.

Many font families have an italics version of the font. The italic font style of a typeface has been slanted to the right and has had other changes made to the letter glyphs to make them slightly different. It approaches a more handwritten, cursive style. Sometimes the characters may even connect.

Oblique font faces are found in many sans-serif typefaces. Their characters are also slanted but, unlike italics, the glyphs themselves are not changed. Oblique fonts are not true italics because they lack the change in letter shapes which is part of the definition of “italic” [fig.2].

Effectively using variations of weight and style can help to create visual hierarchy.