Pogrubienie tekstu w HTML i CSS - strong, b i font-weight

W wielu projektach frontendowych tekst ma coś podkreślić, uporządkować albo skierować uwagę na najważniejszą informację. Dobrze użyta pogrubiona czcionka poprawia skanowanie treści, ale źle zastosowana szybko zamienia stronę w ciężką, chaotyczną plamę. Pokażę, kiedy używać , czym różni się ono od i jak kontrolować grubość tekstu za pomocą CSS.

Co naprawdę oznacza pogrubienie tekstu w HTML

Najprostsze rozróżnienie jest takie: HTML opisuje znaczenie treści, a CSS decyduje o jej wyglądzie. Samo pogrubienie nie powinno być więc traktowane wyłącznie jako efekt wizualny, szczególnie gdy wyróżniony fragment ma znaczenie dla zrozumienia komunikatu.

Jeśli chcę zaznaczyć ostrzeżenie, ważną instrukcję albo warunek wykonania zadania, używam elementu . Przeglądarka zazwyczaj wyświetli go pogrubioną czcionką, ale najważniejsza jest informacja, że dany fragment ma większą wagę semantyczną niż sąsiadujący tekst.

Gdy zależy mi tylko na wyglądzie, lepszym rozwiązaniem będzie klasa CSS. Dzięki temu mogę zmienić grubość, kolor lub rozmiar w jednym miejscu, bez mieszania warstwy treści z prezentacją.

  Cena obejmuje dostęp do wszystkich materiałów.



  Ten fragment wyróżniam wyłącznie wizualnie.

Kiedy wybrać strong, a kiedy b

Elementy i często wyglądają identycznie, dlatego początkujący używają ich zamiennie. W praktyce różnica polega na znaczeniu. oznacza ważność lub pilność informacji, natomiast jedynie przyciąga wzrok do określonego fragmentu.

Przykład z komunikatem walidacyjnym jest dość oczywisty. Tekst „Hasło musi mieć co najmniej 8 znaków” powinien być ważną informacją, więc pasuje do niego . Z kolei nazwa modelu urządzenia może zostać oznaczona przez , jeśli ma się tylko wyróżniać w opisie.

  Hasło musi mieć co najmniej 8 znaków.



  Dostępny wariant: Pro Max.

Sam nie używam jako domyślnego sposobu na każde pogrubienie. Najpierw pytam, czy wyróżnienie zmienia znaczenie tekstu. Jeśli nie, tworzę klasę CSS, bo daje mi większą kontrolę i łatwiejszą zmianę stylu w całym projekcie.

Jak kontrolować grubość tekstu za pomocą CSS

Za grubość fontu odpowiada właściwość font-weight. Możesz użyć nazw normal i bold albo wartości liczbowych od 100 do 900. Wartości liczbowe są wygodne, gdy krój pisma ma kilka odmian, na przykład 400, 500, 600 i 700.

body {
  font-weight: 400;
}

.naglowek {
  font-weight: 700;
}

.etykieta {
  font-weight: 600;
}

W typowym projekcie wartość 400 oznacza standardową grubość, a 700 jest odpowiednikiem słowa bold. Nie każda czcionka obsługuje jednak wszystkie stopnie. Jeżeli załadujesz krój mający tylko odmianę regular i bold, wartości 600 oraz 700 mogą wyglądać tak samo.

To częsty powód rozczarowania podczas pracy z fontami. Zmieniasz font-weight z 500 na 600, odświeżasz stronę i nie widzisz różnicy, ponieważ przeglądarka korzysta z najbliższej dostępnej odmiany.

Przykład klasy dla wyróżnionego tekstu

.tekst-wyrozniony {
  font-weight: 700;
  color: #1f2937;
}

.tekst-wyrozniony--mocny {
  font-weight: 800;
}

W interfejsach najczęściej stosuję 600 dla etykiet i przycisków oraz 700 dla mocniejszych nagłówków. Wartość 800 lub 900 zostawiam dla sytuacji, w których krój pisma rzeczywiście dobrze ją obsługuje, bo bardzo ciężki tekst może zdominować cały układ.

Gdzie pogrubienie pomaga użytkownikowi

Dobre wyróżnienie prowadzi wzrok po stronie. W artykule może zaznaczać najważniejsze pojęcia, liczby i warunki, a w panelu aplikacji pomagać odróżnić nazwę pola od jego wartości. Najlepiej działa wtedy, gdy tworzy czytelną hierarchię informacji, a nie tylko dekoruje każdy drugi wyraz.

• Instrukcje mogą wyróżniać czynność, którą użytkownik ma wykonać.
• Formularze mogą pogrubiać nazwy pól i komunikaty o błędach.
• Karty produktów mogą akcentować cenę, dostępność albo najważniejszą cechę.
• Artykuły mogą używać pogrubień do zaznaczenia definicji, liczb i praktycznych wskazówek.

Nie pogrubiam całych akapitów. Użytkownik przestaje wtedy rozpoznawać, co jest naprawdę ważne, a tekst staje się trudniejszy do szybkiego przeczytania. W większości przypadków wystarczą 1-2 krótkie wyróżnienia na akapit, o ile każde z nich ma konkretny cel.

Trzeba też pilnować kontrastu. Ciemnoszary tekst o grubości 600 może być czytelniejszy niż jasnoszary tekst o grubości 700, dlatego sama waga fontu nie naprawi złej palety kolorów. Na małych ekranach szczególnie ważne są rozmiar, kontrast i odstępy między wierszami.

W przypadku przycisków pogrubienie powinno wspierać hierarchię, ale nie zastępować jasnego komunikatu. „Zapisz zmiany” będzie lepsze niż samo „Dalej”, niezależnie od tego, jak mocno ustawisz font-weight.

Najczęstsze problemy z pogrubionym tekstem

Brak widocznej różnicy między wartościami

Jeśli 400 i 700 wyglądają podobnie, sprawdź, czy właściwa czcionka faktycznie została załadowana. Przeglądarka może używać fontu zastępczego, który ma mniej odmian. W narzędziach deweloperskich można sprawdzić zarówno regułę CSS, jak i rzeczywiście użyty krój.

Reguła CSS nie działa

Powodem może być większa specyficzność innego selektora, styl inline albo reguła z !important. Zamiast od razu dodawać kolejne wyjątki, sprawdzam w DevTools zakładkę Styles i patrzę, która deklaracja nadpisuje font-weight.

/* Mniej precyzyjna reguła */
.card p {
  font-weight: 400;
}

/* Ta reguła wygra dla tekstu oznaczonego klasą */
.card .ważne {
  font-weight: 700;
}

Udawane pogrubienie

Niektóre przeglądarki próbują pogrubić font, nawet gdy nie ma jego cięższej odmiany. Efekt może wyglądać nierówno, szczególnie przy dużych nagłówkach albo polskich znakach. Lepiej załadować konkretną odmianę fontu niż liczyć na sztuczne zwiększenie grubości.

Przeczytaj również: Gradienty CSS - Jak je wykorzystać w nowoczesnym UI?

Używanie pogrubienia zamiast semantyki

Pogrubiony tekst nie zastępuje nagłówka, etykiety formularza ani komunikatu o błędzie. Jeżeli fragment pełni określoną funkcję, użyj odpowiedniego elementu HTML, a dopiero potem dopasuj jego wygląd. Dzięki temu struktura strony pozostanie zrozumiała dla przeglądarki, narzędzi i technologii asystujących.

Jak podejść do tego w nowym projekcie

Zaczynam od ustalenia kilku poziomów typografii. Najczęściej wystarczają trzy stopnie: tekst podstawowy, wyróżnienie pomocnicze i mocny akcent. Taki system jest łatwiejszy do utrzymania niż kilkanaście przypadkowych wartości używanych w różnych komponentach.

:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

body {
  font-weight: var(--font-weight-regular);
}

.label {
  font-weight: var(--font-weight-medium);
}

.title {
  font-weight: var(--font-weight-bold);
}

Potem sprawdzam projekt na telefonie i komputerze, bo ta sama grubość może wyglądać inaczej przy różnych rozmiarach tekstu. Jeżeli pogrubienie utrudnia czytanie, najpierw ograniczam liczbę wyróżnionych fragmentów, a dopiero później zmieniam kolor lub wagę fontu.

Moja praktyczna zasada jest prosta: znaczenie zapisuję w HTML, wygląd ustawiam w CSS. Dzięki temu kod jest czytelniejszy, styl można łatwo zmienić, a użytkownik szybciej rozumie, które informacje są naprawdę istotne.

Najlepsze pogrubienie to takie, które prowadzi wzrok

W frontendzie nie chodzi o to, aby tekst był jak najgrubszy. Chodzi o właściwe rozłożenie akcentów. Używaj dla ważnych komunikatów, dla neutralnego wyróżnienia, a CSS dla pełnej kontroli nad wyglądem.

Jeśli po wyłączeniu pogrubień nie wiadomo, co jest najważniejsze, problemem prawdopodobnie nie jest font, lecz hierarchia treści. Dobrze zaprojektowane wyróżnienia powinny pomagać użytkownikowi zrozumieć stronę szybciej, a nie zmuszać go do odczytywania każdego słowa z jednakową uwagą.