5.3 CSS font properties

For bold and italic text

font-size

We’ve already covered CSS size units, which are used to set the font size among other things.

p{ font-size: 16px;}

Bear in mind that setting a font size of 16px won’t make each letter 16px high. The actual size of each letter depends on the font-family used.

font-style

This property can make your text italic:

h2{ font-style: italic;}

Default value: font-style: normal;.

Another possible value is oblique but is never used.

font-weight

This property can make your text bold:

h2{ font-weight: bold;}

Default value: font-weight: normal;.

Depending on the font-family used, there is a range of font weights available, from 100 to 900:

font-weight: 100; /* Thin */
font-weight: 200; /* Extra Light */
font-weight: 300; /* Light */
font-weight: 400; /* Which is like font-weight: normal; */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold */
font-weight: 700; /* Which is like font-weight: bold; */
font-weight: 800; /* Extra Bold */
font-weight: 900; /* Ultra Bold */

Very few fonts provide all 9 weights. The Exo font is one of them.

You’ll mostly find 400 (normal) and 700 (bold), and sometimes 300 (light) and 500 (medium).

font-variant

This property turn your text into small caps:

h2{ font-variant: small-caps;}

Default value: font-variant: normal;.

It’s not a widely used property.

Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close