Font Weight – Grubość Czcionki CSS

Grubość czcionki CSS

font-weight

Jeśli dana rodzina posiada więcej niż jedną grubość czcionki, możemy ją zmienić za pomocą własności font-weight (ang. grubość czcionki). Własność ta przyjmuje wartości słowne

font-weight: normal; (domyślna)
font-weight: bold;

oraz numeryczne od 100 do 900 ze skokami co 100. Zaczynając od najcieńszej czcionki (100), a kończąc na najgrubszej (900).

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; (normal)
font-weight: 500;
font-weight: 600;
font-weight: 700; (bold)
font-weight: 800;
font-weight: 900;

Rzadko, która rodzina czcionek będzie miała wszystkie 9 wariantów grubości czcionki.

Istnieje jeszcze możliwość zmiany grubości czcionki w stosunku do rodzica elementu html, wtedy wartości jakie będzie mogła przyjąć własność font-weight to lighter (ang. cieńsza) oraz bloder (ang. grubsza).

font-weight: lighter;
font-weight: bolder;

Sprawdźmy jak kształtuje się zmiana grubości czcionek za pomocą wartośći lighter i bolder.

.lighter { font-weight: lighter; }
.bolder { font-weight: bolder; }

<p><span class="lighter">Cieńsza</span> czcionka</p>
<p><span class="bolder">Grubsza</span> czcionka</p>

Grubszą czcionkę możemy również uzyskać poprzez znane nam już z języka Html elementy <strong> oraz <b>. Elementy te posiadają domyślnie własność

strong, b { font-weight: bold; }

<p>Wyraz <strong>pogrubiony</strong></p>
<p>Wyraz <b>pogrubiony</b></p>