Pogrubianie tekstu jest jednym z podstawowych elementów stylizacji stron internetowych. CSS i HTML oferują różne metody na osiągnięcie tego efektu, każda z nich ma swoje specyficzne zastosowania i różne konsekwencje semantyczne. Poniżej możesz przeczytać o tym, jak pogrubić tekst za pomocą CSS, jakie są różnice między właściwościami CSS a znacznikami HTML oraz kiedy najlepiej używać każdej z tych metod.

1. Pogrubianie tekstu za pomocą CSS

Właściwość font-weight

Najbardziej podstawowym sposobem na pogrubienie tekstu w CSS jest użycie właściwości font-weight. Właściwość ta kontroluje grubość tekstu i może przyjmować wartości nazwane lub liczbowe.

Wartości nazwane reprezentują wagę tekstu za pomocą nazwy. Podstawowe wartości nazwane to: Normal (Regular), która jest wartością domyślną oraz Bold (font pogrubiony, domyślny dla znaczników HTML <b> oraz <strong>).

Wartości liczbowe zawierają się w zakresie od 100 do 900 i pozwalają na precyzyjne określenie grubości tekstu, gdzie 100 jest najcieńszą wartością, a 900 najgrubszą.

Wszystkie dostępne wartości (nazwane i liczbowe) kształtują się następująco:

100 (Thin): Bardzo cienki tekst.
200 (Extra Light): Dodatkowo cienki tekst.
300 (Light): Cienki tekst.
400 (Normal): Standardowa grubość tekstu.
500 (Medium): Średnia grubość tekstu.
600 (Semi Bold): Półpogrubiony tekst.
700 (Bold): Pogrubiony tekst.
800 (Extra Bold): Bardzo pogrubiony tekst.
900 (Black): Najbardziej pogrubiony tekst.

Nie wszystkie fonty obsługują wszystkie te wartości. W rzeczywistości, większość fontów dostępnych na rynku ma ograniczony zestaw grubości. Aby sprawdzić, jakie grubości są dostępne dla danego fontu, można zajrzeć do dokumentacji fontu – na stronach takich jak Google Fonts czy Adobe Fonts często znajdują się informacje na temat dostępnych grubości. 'Na szybko’ można również użyć narzędzi deweloperskich w przeglądarce aby upewnieć się, które grubości tesktu są renderowane prawidłowo.

Font-weight lighter, font-weight bolder

Oprócz wartości liczbowych (od 100 do 900), można używać również wartości względnych takich jak lighter i bolder. Te wartości umożliwiają dynamiczne dostosowanie grubości tekstu w zależności od jego rodzica.

font-weight: lighter;

Wartość lighter ustawia grubość tekstu na lżejszą w porównaniu do grubości tekstu jego elementu rodzica. Oznacza to, że grubość tekstu dziedziczy się od rodzica i zostaje zmniejszona o jeden stopień w hierarchii wag.

.parent {
    font-weight: 700; /* Bold */
}

.child {
    font-weight: lighter; /* Lżejszy niż rodzic, więc np. 400 (normal) */
}

font-weight: bolder;

Wartość bolder ustawia grubość tekstu na grubszą w porównaniu do grubości tekstu jego elementu rodzica. Oznacza to, że grubość tekstu dziedziczy się od rodzica i zostaje zwiększona o jeden stopień w hierarchii wag.

.parent {
    font-weight: 400; /* Normal */
}

.child {
    font-weight: bolder; /* Grubszy niż rodzic, więc np. 700 (bold) */
}

Warto pamiętać, że nie wszystkie fonty obsługują wszystkie grubości. Dla większości fontów dostępne są tylko pewne zdefiniowane grubości, takie jak 400 (normal) i 700 (bold). Wartości lighter i bolder będą działały poprawnie tylko wtedy, gdy odpowiednie grubości są dostępne w wybranym fontcie. Jeśli font nie obsługuje wymaganej grubości, przeglądarka wybierze najbliższą dostępną wartość.

2. Pogrubianie tekstu za pomocą HTML

Semantyczne pogrubianie tekstu – znacznik <strong>

Znacznik <strong> służy do oznaczania tekstu, który ma istotne znaczenie. Przeglądarki renderują ten tekst jako pogrubiony, ale jego znaczenie jest semantyczne – sygnalizuje, że tekst w nim zawarty jest ważny.

Znacznik <strong> powinien być używany, gdy chcesz nadać treści szczególne znaczenie. Takie wyróżnienie daje znać przeglądarce, że tekst stanowi istotną część treści strony. Jest to również przydatne w kontekście dostępności, ponieważ czytniki ekranowe będą interpretować ten tekst jako ważny, co może pomóc użytkownikom z niepełnosprawnościami.

<strong>Ważny tekst</strong>

Przykłady użycia:

• Podkreślenie istotnych informacji w artykułach lub raportach.
• Zaznaczenie ważnych ogłoszeń lub ostrzeżeń.

Zwykłe pogrubienie tekstu – Znacznik <b> (bold)

Znacznik <b> służy do pogrubienia tekstu bez nadawania mu dodatkowego znaczenia semantycznego. Jest to czysto prezentacyjny element.

Używaj znacznika <b> gdy chcesz jedynie wizualnie wyróżnić tekst bez nadawania mu dodatkowego znaczenia. Jest to odpowiednie w sytuacjach, gdzie liczy się tylko stylizacja, a nie semantyka.

<b>Wyróżniony tekst</b>

Przykłady użycia:

• Wyróżnienie nazw firm, produktów lub innych elementów wizualnych.
• Stylizowanie tekstu dla celów estetycznych.

Wnioski i Najlepsze Praktyki

Pogrubianie tekstu to nie tylko kwestia wizualna, ale również semantyczna i funkcjonalna. Zrozumienie i właściwe stosowanie narzędzi do pogrubiania tekstu pozwala na tworzenie stron internetowych, które są bardziej dostępne, estetyczne i semantycznie poprawne, co w efekcie przekłada się na lepsze doświadczenie użytkownika i wyższą jakość treści. Właściwe stosowanie tych znaczników pozwala na tworzenie bardziej zrozumiałych i logicznie zorganizowanych dokumentów HTML, co jest istotne zarówno dla SEO, jak i dla użytkowników.