font-weight
font-weight controls how thick the letters are. You can use words or numbers.
| Value | Meaning |
|---|---|
normal | 400 |
bold | 700 |
100 to 900 | In steps of 100, from thin to black |
index.html
HTML
<style>
p { font-size: 20px; margin: 4px 0; font-family: system-ui, sans-serif; }
</style>
<p style="font-weight: 300">Weight 300 (light)</p>
<p style="font-weight: 400">Weight 400 (normal)</p>
<p style="font-weight: 600">Weight 600 (semibold)</p>
<p style="font-weight: 800">Weight 800 (extra bold)</p>Not every font has every weight. If you ask for 600 and the font only has 400 and 700, the browser picks the nearest one, or fakes it by smearing the letters, which looks worse than the real thing. Check which weights your font includes.
font-style
index.html
HTML
<style>
.i { font-style: italic; }
.o { font-style: oblique; }
.n { font-style: normal; }
</style>
<p class="i">Italic text</p>
<p class="o">Oblique text (slanted version of the regular letters)</p>
<p>An <em class="n">em element</em> with the style turned off.</p>italic uses the font’s designed italic where it exists. oblique just slants the upright letters. The last example shows font-style: normal turning off the default italic of <em>, useful when you want the meaning without the slant.
lightbulb
Use the right HTML first
Use
<strong> and <em> when you mean importance or emphasis, and CSS font-weight and font-style when you only want a look.