Not all text is equal. Some words need to shout, others need to lean sideways. That is where font-weight and font-style come in.
font-weight
font-weight controls how thick or thin your text looks. You can use keywords or numeric values:
p { font-weight: normal; } /* same as 400 */
strong { font-weight: bold; } /* same as 700 */The numeric scale goes from 100 to 900, in increments of 100:
- 100 — Thin
- 300 — Light
- 400 — Normal
- 500 — Medium
- 600 — Semi Bold
- 700 — Bold
- 900 — Black
Not every font supports all nine weights. Most come with just normal (400) and bold (700). The browser will approximate missing weights if it can.
font-style
font-style deals with slanting. You have three options:
p { font-style: normal; }
em { font-style: italic; }
.oblique { font-style: oblique; }- normal — straight up, no slant
- italic — a specially designed italic version of the font (if available)
- oblique — just the normal letters, mechanically tilted
In practice, italic and oblique look almost identical on most browsers. Use italic for things like book titles or emphasized words.
Combining Them
You can use both properties on the same element:
h1 {
font-weight: bold;
font-style: italic;
}Just be careful — bold + italic together can be overwhelming. Use it sparingly for special emphasis.