5.3 CSS font properties

For bold and italic text


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.


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.


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).


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

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now