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.