Dobór kroju pisma wpływa na to, czy strona wygląda profesjonalnie, czy tylko „ładnie na pierwszy rzut oka”. W praktyce rodzaje czcionek HTML sprowadzają się przede wszystkim do rodzin fontów zapisanych w CSS, fallbacków i świadomego dopasowania stylu do treści. Poniżej rozkładam to na proste zasady, przykłady i błędy, które najczęściej psują typografię na stronach firmowych.
Najważniejsze zasady doboru fontów na stronie
- HTML sam nie wybiera kroju pisma - za wygląd tekstu odpowiada CSS, a HTML dostarcza treść.
- Najpierw wybierz rodzinę fontów - serif, sans-serif, monospace, cursive, fantasy albo system-ui, a dopiero potem konkretną czcionkę.
-
Zawsze dodawaj fallback - ostatni element listy powinien być bezpieczną rodziną ogólną, np.
sans-serif. - Na stronach firmowych najlepiej działają neutralne, czytelne kroje - ozdobne fonty zostaw do krótkich akcentów.
- Nie ładuj zbyt wielu odmian - kilka wag wystarcza, a strona pozostaje lżejsza i spójniejsza.
HTML nie wybiera kroju pisma samodzielnie
Tu warto rozdzielić dwie rzeczy: HTML trzyma treść, a CSS decyduje o wyglądzie tekstu. Jeśli ktoś pamięta jeszcze starego taga , to dziś jest to ślepa uliczka - ja w praktyce zawsze ustawiam typografię w arkuszu stylów, bo tylko tak da się kontrolować hierarchię nagłówków, akapity i fallbacki.
Najważniejsze jest też rozróżnienie między rodziną fontów a konkretną odmianą. Georgia to rodzina, ale Georgia Bold Italic to już konkretna twarz albo wariant tej rodziny. To brzmi technicznie, ale ma znaczenie, bo przeglądarka nie zawsze ma dokładnie to, co wpiszesz w font-family, więc potrzebuje sensownej ścieżki awaryjnej.
W praktyce najlepiej myśleć o tym tak: najpierw wybierasz charakter tekstu, potem rodzinę, a dopiero na końcu konkretny plik fontu. Dzięki temu łatwiej utrzymać spójność na polskich znakach, w przyciskach i w długich opisach usług. Skoro to już jasne, można przejść do samych rodzin, z których korzysta się najczęściej.
Najważniejsze rodziny fontów, z których korzysta web
Jeśli ktoś pyta mnie o rodzaje czcionek w stronach internetowych, to zwykle chodzi nie o pojedyncze fonty, ale o kilka podstawowych rodzin. To właśnie one decydują o nastroju strony, a nie sam fakt, że tekst jest „ładny” albo „nowoczesny”.| Rodzina | Jak wygląda | Kiedy działa najlepiej | Na co uważać |
|---|---|---|---|
serif |
Krój z wyraźnymi zakończeniami liter | Dłuższe teksty, marki premium, kancelarie, treści editorialowe | Przy małych rozmiarach i słabym ekranie może być mniej czytelny |
sans-serif |
Prosty, bez zakończeń, zwykle bardziej neutralny | Strony usługowe, mobile, interfejsy, teksty sprzedażowe | Bez dobrego kontrastu może wyglądać zbyt generycznie |
monospace |
Każda litera ma podobną szerokość | Kod, ceny w tabelach, dane techniczne, komunikaty systemowe | W długich akapitach szybko męczy wzrok |
cursive |
Odręczny, bardziej dekoracyjny charakter | Krótkie akcenty, logotypy, pojedyncze hasła | Do treści głównej zwykle nie sprawdza się dobrze |
fantasy |
Mocno dekoracyjny, często efektowny | Bardzo krótkie nagłówki i kampanie specjalne | Łatwo przesadzić i obniżyć czytelność |
system-ui |
Font dopasowany do systemu użytkownika | Interfejsy, formularze, dashboardy, szybkie strony usługowe | Mniej buduje indywidualny charakter marki |
Poza klasyczną piątką CSS opisuje też rodzinę system-ui oraz nowsze warianty interfejsowe z prefiksem ui-. Ja traktuję je jako dobry wybór do paneli, aplikacji i serwisów, które mają wyglądać lekko i znajomo dla użytkownika. Dla zwykłej strony firmowej najczęściej i tak wygrywa prosty sans-serif albo dobrze dobrany serif w nagłówkach. Znając te różnice, łatwiej przejść do praktycznego wyboru dla konkretnego biznesu.
Jak dobrać krój do strony firmowej, żeby wspierał sprzedaż
Ja zwykle zaczynam od pytania, co ma zrobić tekst: opowiedzieć o marce, prowadzić do kontaktu czy wyjaśnić ofertę. Inny font wybiorę dla kancelarii, inny dla salonu beauty, a jeszcze inny dla serwisu technicznego, bo każdy z tych biznesów sprzedaje innym językiem.
- Do długich akapitów wybieraj prosty krój - na desktopie i mobile najlepiej sprawdza się coś czytelnego, bez nadmiaru ozdobników.
- Do nagłówków możesz dodać więcej charakteru - ale tylko wtedy, gdy nie walczy to z treścią.
- Ogranicz się do 2 rodzin fontów - jedna do tekstu, druga do akcentów zwykle wystarcza.
- Sprawdź polskie znaki - ą, ę, ł, ś, ź, ż i cudzysłowy typograficzne potrafią obnażyć słabą jakość fontu.
-
Zadbaj o rytm - 16px dla treści i
line-heightokoło1.5to bezpieczny punkt startu, choć przy gęstych layoutach trzeba to skorygować.
W marketingu lokalnym font nie powinien krzyczeć. Ma pomagać w odbiorze oferty, budować zaufanie i kierować wzrok tam, gdzie chcesz, czyli do formularza, telefonu albo CTA. Kiedy ta decyzja jest już podjęta, pozostaje techniczna część wdrożenia, a tam najłatwiej o drobne błędy.
Jak poprawnie zapisać fonty w CSS
Najprostszy zapis wygląda tak:
body {
font-family: "Inter", "Segoe UI", Arial, sans-serif;
}W tym układzie przeglądarka próbuje najpierw Inter, potem Segoe UI, a na końcu przechodzi do rodziny ogólnej. To ważne, bo nie wszystkie urządzenia mają ten sam zestaw fontów, a użytkownik nie powinien widzieć rozchwianej strony tylko dlatego, że pierwszy wybór był niedostępny.
Jeśli korzystasz z własnego pliku fontu, zwykle robi się to przez @font-face:
@font-face {
font-family: "MojaCzcionka";
src: url("moja-czcionka.woff2") format("woff2");
font-display: swap;
}
h1 {
font-family: "MojaCzcionka", "Georgia", serif;
}Ja zwracam uwagę na trzy rzeczy: nazwę rodziny w cudzysłowie, sensowny format pliku i fallback o podobnym charakterze. font-display: swap pomaga uniknąć pustego miejsca w czasie ładowania, a rodzina zapasowa sprawia, że tekst pozostaje czytelny nawet wtedy, gdy webfont nie wczyta się od razu. W nowszych projektach coraz częściej wchodzi też font zmienny, bo jeden plik może obsłużyć kilka grubości i oszczędzić trochę zasobów.
W praktyce variable font daje mi większą elastyczność bez mnożenia osobnych plików dla każdej wagi. To bywa szczególnie wygodne na stronach, gdzie nagłówki mają być mocniejsze, a tekst podstawowy lżejszy, ale nadal spójny. Po wdrożeniu zostaje jeszcze kontrola jakości, bo nawet dobry zapis CSS nie naprawi błędnej decyzji projektowej.
Najczęstsze błędy, które psują typografię
Najczęściej widzę te same potknięcia, i zwykle nie są to rzeczy spektakularne. Problem zaczyna się od drobiazgów: za dużo fontów, zbyt ozdobne nagłówki, brak fallbacku albo rodzina dobrana pod wygląd, a nie pod realną czytelność.- Brak rodziny zapasowej - jeśli font się nie wczyta, użytkownik dostaje przypadkowy wygląd strony.
- Za dużo odmian - 4-5 grubości na stronie firmowej to zwykle przesada.
- Złe parowanie krojów - dwa fonty o podobnym charakterze często wyglądają jak pomyłka, nie jak zamierzony system.
- Ozdobne fonty w długich tekstach - działają chwilę, potem męczą.
- Brak testu na mobile - krój, który wygląda dobrze na dużym monitorze, potrafi rozsypać się na małym ekranie.
- Ignorowanie ładowania - ciężki webfont może spowolnić pierwsze wrażenie bardziej, niż się wydaje.
Jaki zestaw fontów najczęściej sprawdza się na stronie lokalnej firmy
Jeśli miałbym zamknąć temat w jednej praktycznej zasadzie, powiedziałbym tak: najpierw czytelność, potem charakter, dopiero na końcu ozdoba. W projektach dla firm lokalnych ta kolejność zwykle daje najlepszy efekt, bo użytkownik ma szybko zrozumieć ofertę i bez wysiłku przejść do kontaktu.
Najlepsze rezultaty daje prosty zestaw: jedna rodzina do treści, jedna do nagłówków, sensowny fallback i kilka dobrze dobranych wag. Reszta to już dopasowanie do branży, tonu marki i tego, jak strona ma pracować na konwersję. Dobrze dobrane fonty nie są detalem na końcu projektu - bardzo często to one decydują, czy strona wygląda wiarygodnie od pierwszej sekundy.
W praktyce na stronach małych i średnich firm najczęściej wygrywa spokojny sans-serif w treści, bardziej wyrazisty font w nagłówkach i jeden akcent typograficzny, jeśli marka naprawdę tego potrzebuje. To wystarcza, żeby strona wyglądała nowocześnie, była czytelna na telefonie i nie odciągała uwagi od tego, co najważniejsze: oferty, kontaktu i zaufania.
