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>
Cieńsza czcionka
Grubsza czcionka

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>
Wyraz pogrubiony
Wyraz pogrubiony
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.