Większość amatorskich projektów rozpoznaje się po typografii, zanim ktokolwiek przeczyta pierwsze zdanie. Pięć zasad poniżej wynosi Twoją stronę z "zrobione samemu w weekend" do "to chyba robił designer".
W skrócie: Ogranicz się do maksymalnie dwóch fontów - jednego do nagłówków, jednego do treści - i dobieraj je do charakteru marki: sans-serif do nowoczesnych, serif do klasycznych i luksusowych. Trzymaj line-height w okolicach 1.5 dla tekstu i 1.1-1.2 dla nagłówków, ogranicz długość linii do 65-75 znaków i zamiast wymyślać rozmiary na czuja, korzystaj z gotowej skali typograficznej. Te pięć zasad razem eliminuje 90% błędów, które od razu zdradzają amatorski projekt.
Zasada 1: maksymalnie dwa fonty na projekt
Font display do nagłówków i font body do tekstów podstawowych to zwykle wszystko, czego potrzebuje projekt. Trzeci, czwarty font w innym miejscu strony niemal zawsze wygląda jak przypadek, nie decyzja projektowa - oko od razu wyłapuje niespójność, nawet jeśli patrzący nie potrafi nazwać, co jest nie tak.
Ważny wyjątek: ten sam font użyty w kilku grubościach (regular, medium, bold, semibold) to wciąż jeden font, nie trzy. Granie wagami i rozmiarem w obrębie jednej rodziny fontów to jeden z najtańszych sposobów na zbudowanie hierarchii bez ryzyka chaosu.
Zasada 2: dobierz charakter fontu do charakteru marki
Kroje bezszeryfowe (sans-serif) kojarzą się z nowoczesnością, prostotą i technologią - dlatego dominują wśród startupów i marek technologicznych. Popularne, sprawdzone opcje to Inter, Manrope i Space Grotesk. Kroje szeryfowe (serif) niosą skojarzenia z tradycją, prestiżem i klasyką - stąd ich obecność w brandingu marek prawniczych, luksusowych czy wydawniczych. Tu sprawdzają się Playfair Display, EB Garamond czy Cormorant.
Branże, które łączą oba światy - na przykład restauracje czy marki lifestyle'owe - często dobrze wypadają z mieszanką: serif w nagłówkach dla ciepła i charakteru, sans-serif w treści dla czytelności na ekranie.
Zasada 3: pairing, czyli sprawdzone zestawienia fontów
Dobór dwóch fontów, które się wzajemnie uzupełniają, bywa trudny, jeśli robi się to intuicyjnie. Łatwiej sięgnąć po kombinacje, które sprawdzają się od lat: Inter w kilku wagach jako jedyny font, Space Grotesk (nagłówki) z Inter (treść), Playfair Display z Source Sans Pro, albo Fraunces z Inter dla projektów o bardziej ciepłym charakterze. Te zestawy nie gwarantują oryginalności, ale prawie nigdy nie zawodzą pod względem czytelności i profesjonalnego wrażenia.
Wskazówka: Jeśli nie masz pewności co do pairingu, zacznij od jednej rodziny fontów w kilku wagach. To rozwiązanie zerowego ryzyka - nie da się go "zepsuć" złym zestawieniem, bo w gruncie rzeczy zestawiasz font sam ze sobą.
Zasada 4: line-height między 1.4 a 1.6 dla tekstu
Line-height (interlinia) poniżej 1.4 sprawia, że linie tekstu wyglądają na wciśnięte, a oko ma trudność z odnalezieniem początku kolejnej linii. Powyżej 1.6 tekst zaczyna sprawiać wrażenie porozdzielanego i traci zwartość, co przy dłuższych akapitach męczy podczas czytania. Wartość w okolicach 1.5 sprawdza się w zdecydowanej większości przypadków dla tekstu podstawowego. Dla nagłówków dobrym punktem odniesienia jest 1.1-1.2 - są już wystarczająco duże, żeby ciasna interlinia im nie szkodziła, a dodatkowo zbija je wizualnie w spójny blok.
Zasada 5: maksymalnie 65-75 znaków na linię
Linia licząca ponad 100 znaków zmusza oko do długiej wędrówki i częstego gubienia miejsca przy przeskoku do kolejnej linii. Linia krótsza niż 50 znaków z kolei sprawia, że wzrok przeskakuje niemal co trzy słowa, co też męczy, tylko w drugą stronę. Optymalny zakres to 65-75 znaków - w CSS najprościej wymusić go przez max-width: 65ch na kontenerze tekstu, niezależnie od szerokości ekranu.
Bonus: skala typograficzna zamiast rozmiarów na czuja
Wymyślanie rozmiarów fontu osobno dla każdego elementu prowadzi do przypadkowej hierarchii i niespójnych odstępów między poziomami nagłówków. Dużo bezpieczniej jest ustalić z góry skalę, np. 12, 14, 16, 20, 24, 32, 48, 64 piksele, i trzymać się jej konsekwentnie w całym projekcie. Alternatywą jest modular scale - narzędzia takie jak typescale.com generują całą skalę na podstawie jednego mnożnika, co dodatkowo ułatwia zachowanie proporcji między poziomami.
| Element | Rozmiar (orientacyjnie) | Line-height | Font |
|---|---|---|---|
| H1 / nagłówek główny | 48-64px | 1.1 | Display |
| H2 / nagłówek sekcji | 32px | 1.15 | Display |
| H3 / podtytuł | 20-24px | 1.2 | Display lub body (bold) |
| Tekst podstawowy | 16px | 1.5 | Body |
| Podpisy, meta | 12-14px | 1.4 | Body |
Najczęściej zadawane pytania
Czy mogę używać fontów Google Fonts w projektach komercyjnych?
Zdecydowana większość fontów dostępnych w Google Fonts jest objęta licencjami pozwalającymi na dowolne użycie komercyjne, łącznie z osadzaniem na stronach i w materiałach reklamowych. Warto jednak sprawdzić licencję konkretnego kroju przed użyciem, bo pojedyncze wyjątki się zdarzają.
Jak dobrać font, jeśli nie znam się na typografii?
Najprostsza droga to skorzystanie ze sprawdzonego pairingu - np. Inter w kilku wagach, albo Playfair Display z Source Sans Pro - zamiast eksperymentowania od zera. Gotowe zestawienia są przetestowane pod kątem czytelności i kontrastu charakteru, więc trudno je "zepsuć".
Dlaczego mój tekst wygląda amatorsko, mimo że użyłem ładnego fontu?
Najczęstsza przyczyna to zła interlinia lub zbyt długie linie tekstu, nie sam wybór fontu. Nawet bardzo dobry krój źle się czyta przy line-height poniżej 1.4 albo liniach dłuższych niż 90-100 znaków.
Czy serif zawsze oznacza "luksusowy", a sans-serif "nowoczesny"?
To użyteczne uproszczenie, ale nie sztywna reguła - konkretny krój, jego grubość i kontekst użycia mają duże znaczenie. Niektóre serify (np. geometryczne) wyglądają bardzo współcześnie, a niektóre sans-serify potrafią sprawiać wrażenie surowe lub industrialne.
Ile fontów powinienem mieć w brand booku firmy?
Dla większości małych i średnich firm dwa fonty - display i body - w połączeniu z jasno opisaną skalą rozmiarów w zupełności wystarczą. Trzeci font warto dodawać wyłącznie do bardzo specyficznych, rzadkich zastosowań, np. cytatów czy elementów dekoracyjnych.
Jak sprawdzić, czy dobrany line-height jest odpowiedni?
Najprostszy test to przeczytanie na głos dłuższego akapitu i zwrócenie uwagi, czy oko gubi linię przy przeskoku, czy wręcz przeciwnie - tekst sprawia wrażenie rozciągniętego. W praktyce warto zacząć od wartości 1.5 dla tekstu i korygować ją tylko wtedy, gdy konkretny font wygląda przy niej nienaturalnie.
Kluczowe wnioski
- Maksymalnie dwa fonty na projekt - display do nagłówków, body do treści.
- Sans-serif kojarzy się z nowoczesnością, serif z tradycją i prestiżem - dobieraj do charakteru marki.
- Sprawdzone pairingi (np. Inter w kilku wagach) to rozwiązanie zerowego ryzyka.
- Line-height 1.5 dla tekstu, 1.1-1.2 dla nagłówków, linia 65-75 znaków.
- Skala typograficzna ustalona z góry eliminuje przypadkowość rozmiarów.
Potrzebujesz wsparcia z tematu tego artykułu?
Zobacz: Projektowanie Stron
Komentarze