Gdy tekst na stronie wygląda przypadkowo, jest zbyt mały albo nie pasuje do charakteru marki, najczęściej problem rozwiązuje właściwie ustawiona typografia. Pokażę, jak zmienić czcionkę w HTML za pomocą CSS, jak dobrać rozmiar, grubość i odstępy, a także jak podłączyć Google Fonts lub własne pliki fontów. Uwzględnię też błędy, przez które zmiana nie działa, oraz zasady ważne dla czytelności strony lokalnego biznesu.
Najważniejsze zasady zmiany czcionki na stronie
- CSS zamiast znacznika font to obecnie poprawny i wygodny sposób stylowania tekstu.
- Za krój odpowiada właściwość font-family, a za rozmiar font-size.
- Warto dodawać czcionki zapasowe, aby tekst pozostał czytelny, gdy główny font się nie załaduje.
- Google Fonts i @font-face pozwalają używać krojów, których użytkownik nie ma zainstalowanych.
- Najlepszy efekt daje połączenie fontu z odpowiednią interlinią, kontrastem i responsywnością.
HTML określa treść, a CSS zmienia jej wygląd
Sam HTML opisuje strukturę strony, czyli nagłówki, akapity, przyciski i sekcje. Za wygląd tekstu odpowiada przede wszystkim CSS, dlatego zmianę kroju pisma wykonuję przez właściwość font-family, a nie przez przestarzałe znaczniki formatowania.
Najprostszy przykład wygląda tak:
Tekst wyświetlany krojem Arial.
To rozwiązanie działa, ale styl zapisany bezpośrednio w znaczniku, czyli tak zwany inline CSS, szybko utrudnia zarządzanie większą stroną. Przy kilku akapitach nie będzie problemem, jednak przy rozbudowanej witrynie lepiej ustawić regułę dla całego dokumentu albo konkretnej klasy.
body {
font-family: Arial, Helvetica, sans-serif;
}
h1, h2 {
font-family: Georgia, serif;
}W praktyce najczęściej wybieram drugą metodę. Jedna reguła może objąć dziesiątki elementów, a późniejsza zmiana fontu zajmuje kilka sekund zamiast ręcznego poprawiania każdego fragmentu.
Jak ustawić krój dla całej strony i pojedynczego elementu
Jeśli chcesz zmienić wygląd całej witryny, ustaw czcionkę dla elementu body. Dziedziczą ją zwykle akapity, listy i inne elementy tekstowe, chyba że mają własne reguły CSS.
body {
font-family: "Open Sans", Arial, sans-serif;
}Przeglądarka odczytuje listę od lewej do prawej. Najpierw próbuje użyć Open Sans, później Arial, a na końcu dowolnego bezszeryfowego kroju wskazanego przez sans-serif. Taki zapasowy wariant ma znaczenie, bo font może nie zostać pobrany albo nie obsługiwać wszystkich znaków, na przykład polskich liter.
Pojedynczy fragment można wyróżnić klasą:
Bezpłatna wycena dla lokalnych firm.
.oferta {
font-family: "Montserrat", Arial, sans-serif;
font-weight: 700;
}To dobre rozwiązanie dla haseł reklamowych, przycisków i cen, ale nie przesadzałbym z liczbą krojów. Na stronie małej firmy zwykle wystarczą dwa fonty: jeden do nagłówków i drugi do dłuższych tekstów. Większa liczba odmian może spowolnić ładowanie i sprawić, że projekt będzie wyglądał niespójnie.
Najważniejsze właściwości CSS do formatowania tekstu
Zmiana samego kroju to dopiero początek. Czytelność zależy również od rozmiaru, grubości, wysokości linii i odstępów między literami. Najczęściej korzystam z kilku właściwości, które dają pełną kontrolę bez komplikowania kodu.
| Właściwość | Do czego służy | Przykład |
|---|---|---|
| font-family | Wybiera krój pisma | font-family: Arial, sans-serif; |
| font-size | Ustawia rozmiar tekstu | font-size: 1rem; |
| font-weight | Zmienia grubość liter | font-weight: 700; |
| font-style | Ustawia styl, na przykład kursywę | font-style: italic; |
| line-height | Reguluje odstęp między wierszami | line-height: 1.6; |
| letter-spacing | Zmienia odstęp między znakami | letter-spacing: 0.02em; |
Przykładowy zestaw dla strony usługowej może wyglądać tak:
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #222;
}
h1 {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-size: 1.75rem;
font-weight: 700;
}
.button {
font-size: 1rem;
font-weight: 700;
}Do tekstu podstawowego często stosuję jednostkę rem, ponieważ skaluje się względem bazowego rozmiaru dokumentu i lepiej współpracuje z ustawieniami dostępności przeglądarki. Jednostka px nadal ma sens w detalach, ale nie warto budować całej typografii wyłącznie na sztywnych wartościach.
Najczęstszy błąd polega na ustawieniu dużego fontu bez zwiększenia wysokości linii. Nagłówek może wtedy wyglądać efektownie, lecz akapit będzie się zlewał. Dla zwykłego tekstu dobrym punktem wyjścia jest line-height od 1,4 do 1,7, a ostateczny efekt trzeba sprawdzić na telefonie i komputerze.
Jak dodać Google Fonts lub własną czcionkę
Standardowe kroje, takie jak Arial, Georgia czy Verdana, są bezpieczne, ale ograniczają charakter wizualny strony. Jeśli marka potrzebuje bardziej rozpoznawalnego stylu, można użyć zewnętrznego fontu, na przykład z biblioteki Google Fonts, albo załadować własne pliki w formacie woff2.
Po wybraniu kroju dodaje się regułę CSS wskazującą jego nazwę, a następnie stosuje ją do wybranych elementów:
body {
font-family: "Roboto", Arial, sans-serif;
}
h1, h2 {
font-family: "Montserrat", Arial, sans-serif;
}Jeśli korzystasz z własnego pliku, deklaracja może wyglądać tak:
@font-face {
font-family: "Moja Czcionka";
src: url("moja-czcionka.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "Moja Czcionka", Arial, sans-serif;
}Format woff2 jest zwykle najlepszym wyborem dla stron internetowych, ponieważ zapewnia dobrą kompresję. Parametr font-display: swap pozwala wyświetlić tekst fontem zastępczym, zanim właściwy plik zostanie pobrany. Dzięki temu użytkownik nie widzi pustego miejsca zamiast treści.
Przy osadzaniu fontów trzeba sprawdzić dostępne grubości. Jeżeli załadujesz tylko wariant 400, a w CSS ustawisz font-weight: 700, przeglądarka może sztucznie pogrubić litery albo użyć innego pliku. Dla wydajności lepiej pobrać wyłącznie potrzebne odmiany, na przykład 400 i 700, zamiast całej rodziny z kilkunastoma wariantami.
Jak dobrać czcionkę do strony lokalnego biznesu
Font nie powinien być wyłącznie ozdobą. Na stronie restauracji, salonu usługowego czy firmy budowlanej ma wspierać szybkie zrozumienie oferty i budować odpowiednie skojarzenia. W praktyce bardziej liczy się czytelność i konsekwencja niż oryginalność za wszelką cenę.
- Sans-serif, na przykład Arial, Inter lub Open Sans, dobrze sprawdza się w menu, formularzach i dłuższych opisach.
- Serif, na przykład Georgia, może dodać elegancji kancelarii, hotelowi albo marce premium.
- Font dekoracyjny najlepiej ograniczyć do logo, krótkiego hasła lub pojedynczego akcentu.
Nie używałbym ozdobnej czcionki w całym tekście oferty. Litery mogą wyglądać ciekawie na grafice, ale po kilku akapitach męczą wzrok i utrudniają skanowanie treści. Dla firmy pozyskującej klientów z okolicy szczególnie ważne są cena, zakres usługi, telefon i wezwanie do działania, więc te elementy powinny być łatwe do znalezienia.
Dobrym testem jest powiększenie strony do 200 procent oraz sprawdzenie jej na małym ekranie. Jeżeli nagłówki się łamią, przyciski tracą czytelność albo akapity tworzą szerokie bloki, problemem może być nie sam font, lecz jego rozmiar, szerokość kolumny lub odstępy.
Dlaczego zmiana czcionki nie działa
Jeżeli po zapisaniu zmian tekst nadal wygląda tak samo, najpierw sprawdzam, czy reguła CSS faktycznie obejmuje dany element. Często winny jest bardziej szczegółowy selektor, styl inline albo reguła z dopiskiem !important, która nadpisuje wcześniejsze ustawienie.
- Sprawdź pisownię nazwy fontu, zwłaszcza spacje i wielkość liter.
- Dodaj font zapasowy, na przykład
Arial, sans-serif. - Upewnij się, że plik fontu ma poprawną ścieżkę i format.
- Wyczyść pamięć podręczną przeglądarki albo odśwież stronę skrótem Ctrl + F5.
- Sprawdź w narzędziach deweloperskich, która reguła CSS jest aktywna.
Warto też rozróżnić zmianę kroju od zmiany rozmiaru. Właściwość font-family wybiera rodzaj pisma, natomiast font-size zmienia jego wielkość. Ustawienie samego font-size nie sprawi więc, że Arial zmieni się w Montserrat.
Ostrożnie podchodzę do dopisywania !important. Czasem szybko rozwiązuje problem, ale później utrudnia kolejne poprawki i tworzy trudny do kontrolowania łańcuch nadpisań. Najpierw lepiej uporządkować selektory i usunąć konfliktujące reguły.
Mała zmiana fontu, duży efekt dla odbioru strony
Najprostszy schemat wygląda tak: ustaw domyślny krój dla body, wybierz osobny wariant dla nagłówków, dodaj rozmiary w rem i dopasuj line-height do długości tekstu. Potem sprawdź stronę na telefonie, zweryfikuj polskie znaki i upewnij się, że najważniejsze informacje mają odpowiedni kontrast.
Nie musisz od razu przebudowywać całej identyfikacji wizualnej. Często wystarczy zamiana przypadkowego fontu na jeden czytelny krój, ograniczenie liczby grubości i poprawienie odstępów. Dobra typografia nie zwraca na siebie uwagi, tylko ułatwia odbiorcy przeczytanie oferty i wykonanie kolejnego kroku.
Jeżeli pracujesz nad stroną lokalnej firmy, zacznij od treści, które mają przynosić efekt biznesowy: nagłówka usługi, opisu korzyści, danych kontaktowych i przycisku. Dopiero później dodawaj dekoracyjne akcenty. Właściwie dobrana czcionka powinna wzmacniać przekaz, a nie konkurować z nim.
