Jak wybrać fonty
dla firmy i strony?

Font, krój, rodzina — krótko o pojęciach

Zanim zaczniesz wybierać, warto uporządkować słowa, bo w rozmowach z projektantem i drukarnią padają zamiennie:

• Krój pisma to projekt liter — ich kształt, proporcje i charakter.
• Rodzina to komplet odmian jednego kroju: zwykła, pogrubiona, cienka, kursywa.
• Font to technicznie plik z jedną odmianą kroju. Potocznie mówimy „font” o całym kroju i w tym artykule też tak robię.

Kroje dzieli się najczęściej na szeryfowe (z małymi „stopkami” na końcach kresek), bezszeryfowe, pisane i dekoracyjne. Na stronie dochodzi jeszcze jeden podział: fonty systemowe, które już są na urządzeniu odwiedzającego, i fonty internetowe, które przeglądarka musi pobrać razem ze stroną. Ten drugi wybór ma wpływ na szybkość, o czym niżej.

Ile fontów potrzebuje firma i jak je łączyć

Zwykle wystarczą jedna lub dwie rodziny pisma. Typowy podział ról wygląda tak:

• font do nagłówków — może mieć wyraźniejszy charakter, bo czyta się go w dużym rozmiarze i krótkimi fragmentami,
• font do tekstu — ma przede wszystkim być czytelny w małym rozmiarze i w długich akapitach, także na telefonie,
• czasem trzecia rola — na przykład cyfry w cenniku albo tabelach — ale zwykle obsłuży ją jedna z dwóch rodzin.

Dwie rodziny powinny się wyraźnie różnić albo być tą samą rodziną w kilku grubościach. Dwa bardzo podobne kroje obok siebie wyglądają jak pomyłka. Hierarchię — co jest najważniejsze, a co drugorzędne — buduje się rozmiarem, grubością i odstępami, a nie dokładaniem kolejnych fontów.

Czego unikać: kroju odręcznego lub dekoracyjnego w długim tekście, trzech różnych rodzin na jednej stronie i całych akapitów pisanych wersalikami. Charakter kroju odbieramy intuicyjnie, ale o tym, czy pasuje, decyduje kontekst — ten sam font może wyglądać nowocześnie w jednej branży, a przypadkowo w innej.

Polskie znaki: test, który zajmuje minutę

Wiele krojów z katalogów projektuje się z myślą o języku angielskim. Polski potrzebuje liter ą, ć, ę, ł, ń, ó, ś, ź, ż — także wielkich. Jeśli fontowi brakuje którejś z nich, przeglądarka lub program podstawi ją z innego kroju. Efekt: pojedyncze litery wyglądają inaczej, a tekst sprawia wrażenie łatanego.

Zanim zdecydujesz, wpisz w podglądzie kroju zdanie „Zażółć gęślą jaźń” i to samo wersalikami. Sprawdź:

• każdą odmianę, której będziesz używać — także kursywę i pogrubienie, bo bywa, że polskie znaki ma tylko odmiana zwykła,
• czy ogonki w ą i ę nie zlewają się z literą i nie są mikroskopijne,
• czy kreska w ł jest wyraźna, a kreski nad ć, ń, ś, ź i kropka nad ż nie kolidują z linią wyżej,
• polskie cudzysłowy „ ”, półpauzę –, a także cyfry, znak % i skrót zł w cenniku.

Technicznie litera ó należy do podstawowego zestawu znaków łacińskich, a pozostałe polskie litery — do rozszerzonego. W katalogach fontów ten rozszerzony zestaw opisuje się zwykle jako „Latin Extended” albo „latin-ext”. Przy samodzielnym hostowaniu fontów łatwo pobrać tylko podstawowy zestaw — wtedy ó wyświetli się poprawnie, a ą czy ł już fontem zastępczym.

Licencja fontu: co wolno, a czego nie

Font to oprogramowanie chronione prawem autorskim. Pobierając go lub kupując, dostajesz licencję na określone warunki — a te bardzo się różnią. Producenci komercyjnych krojów często rozdzielają licencje według zastosowań:

• na komputer — do dokumentów, druku i grafik, zwykle z limitem stanowisk,
• na stronę internetową — czasem z limitem odsłon lub liczby domen,
• do aplikacji, e-booków, materiałów wideo czy reklam.

Licencja na komputer nie musi więc obejmować strony, a licencja na stronę — aplikacji mobilnej. Zawsze czytaj warunki konkretnego producenta.

Fonty na otwartej licencji

Dużo prostsze są kroje na otwartych licencjach. Najpopularniejsza z nich, SIL Open Font License (OFL), pozwala używać fontu komercyjnie — także w logo, druku i na stronie — bez dodatkowej zgody. Nie wolno sprzedawać samego fontu, a przy jego rozpowszechnianiu trzeba dołączyć tekst licencji. Odpowiedzi na typowe pytania znajdziesz w oficjalnym FAQ licencji OFL.

Na otwartych licencjach udostępniany jest katalog Google Fonts — najczęściej na OFL, rzadziej na Apache 2.0 albo Ubuntu Font Licence. Każda rodzina ma swój plik licencji, więc warto go sprawdzić przy konkretnym kroju.

Na co uważać

• Fonty z dopiskiem „free for personal use” — darmowe tylko do użytku prywatnego, nie dla firmy.
• Fonty skopiowane z czyjegoś komputera albo pobrane z przypadkowej strony bez informacji o licencji.
• Kroje dostępne w ramach subskrypcji narzędzi graficznych — mają własne warunki. Sprawdź, czy obejmują użycie poza tym narzędziem i co dzieje się po zakończeniu subskrypcji.
• Licencja kupiona przez projektanta na siebie. Sprawdź, na kogo jest wystawiona i czy obejmuje Twoją firmę.

Plik licencji przechowuj razem z plikami marki. Gdy za kilka lat ktoś zapyta, czy wolno użyć fontu w nowej aplikacji, odpowiedź będzie w jednym miejscu.

Fonty a szybkość strony

Każda odmiana fontu internetowego to osobny plik do pobrania. Zwykła, pogrubiona, cienka i dwie kursywy to już pięć plików, zanim strona pokaże tekst tak, jak zaprojektowano. Dlatego przy wdrożeniu pilnuję kilku rzeczy:

• format WOFF2 — ma najlepszą kompresję i jest obsługiwany przez współczesne przeglądarki,
• mało odmian — tylko te, których naprawdę używasz; czasem jeden font zmienny zastępuje kilka plików, ale przy jednej czy dwóch odmianach może być większy niż one,
• podzbiór znaków — zestaw łaciński z polskimi literami, bez alfabetów, których strona nie potrzebuje,
• sposób wyświetlania — ustawienie font-display decyduje, czy tekst pojawi się od razu fontem zastępczym (swap), czy przeglądarka chwilę poczeka i pominie font, jeśli nie zdąży (optional),
• wczesne ładowanie tylko najważniejszego fontu — nadużywane spowalnia inne zasoby,
• dopasowany font zastępczy — żeby tekst nie „przeskakiwał”, gdy właściwy font się doczyta.

Ten ostatni punkt ma znaczenie dla wskaźnika CLS, który mierzy przesunięcia układu — więcej o nim w artykule o Core Web Vitals po ludzku. Dobre zestawienie praktyk publikuje też Google w poradniku o fontach na web.dev.

Fonty można wczytywać z zewnętrznego serwera albo hostować razem ze stroną. Przy zewnętrznym serwerze przeglądarka odwiedzającego łączy się z nim i przekazuje mu między innymi adres IP. Hostowanie fontów na własnym serwerze tego unika i daje pełną kontrolę nad plikami — pod warunkiem, że nie zgubi się przy tym polskich znaków.

Jest też najprostsze wyjście: font systemowy do tekstu głównego. Nie trzeba go pobierać, więc nie spowalnia strony. Wada: na różnych urządzeniach wygląda nieco inaczej. Częsty kompromis to własny font w nagłówkach i systemowy w treści.

Czytelność: rozmiar, interlinia i długość wiersza

• Rozmiar. Przeglądarki domyślnie ustawiają tekst na 16 px i dla tekstu głównego zwykle nie warto schodzić niżej. Część krojów przy tym samym rozmiarze wygląda na mniejsze — oceniaj na ekranie, nie po liczbie.
• Interlinia. W długim tekście wiersze potrzebują oddechu. Wytyczne WCAG wymagają, by strona nie rozsypała się, gdy użytkownik zwiększy odstępy — na przykład interlinię do 1,5 rozmiaru pisma.
• Długość wiersza. Zbyt długi wiersz męczy, bo trudno trafić wzrokiem na początek następnego. WCAG na najwyższym poziomie podaje maksymalnie 80 znaków, a w praktyce typograficznej często przyjmuje się od 45 do 75.
• Bez justowania. Wyrównanie do obu krawędzi na wąskim ekranie tworzy dziury między słowami. Na stronie lepiej wyrównywać do lewej.
• Powiększanie. Tekst powinien dać się powiększyć do 200% bez utraty treści i funkcji — to wymaganie WCAG na poziomie AA.
• Kontrast. Nawet najlepszy font nie pomoże, jeśli tekst jest jasnoszary na białym. O progach kontrastu piszę w artykule o kolorach firmowych.

Typografia w materiałach firmy: dokumenty, maile i druk

Strona to tylko jedno miejsce. Ten sam font pojawi się w ofercie, prezentacji, piśmie i na wizytówce — i tam też potrafi sprawić kłopot.

• Dokumenty i prezentacje. Font musi być zainstalowany na komputerze, na którym otwierasz plik. Gdy wyślesz edytowalny dokument klientowi bez tego fontu, program podstawi inny i układ może się rozjechać. Do wysyłki lepiej używać PDF-ów z osadzonymi fontami — o ile licencja na to pozwala — a w szablonach do edycji przewidzieć zamiennik.
• Poczta. Nie każdy program pocztowy wyświetli własny font. Treść maili i stopka powinny działać także na fontach systemowych.
• Druk. Drukarnia potrzebuje plików z osadzonymi fontami albo z tekstem zamienionym na krzywe. Przy logo to standard.

Zasady zapisz krótko: które fonty, w jakich rolach, rozmiarach i grubościach, czym je zastąpić w dokumentach i mailach, gdzie leżą pliki i licencje. Dla małej firmy wystarczy jedna strona w księdze znaku.

Jak wybieram typografię dla firmy

1. Spisuję miejsca, w których pismo będzie używane: strona, dokumenty, social media, druk, oznakowanie.
2. Wybieram dwa lub trzy kroje kandydujące, które pasują do charakteru firmy.
3. Testuję je na prawdziwych treściach: nazwie firmy, nagłówku oferty, długim akapicie, cenniku z cyframi i przyciskach — na komputerze i na telefonie.
4. Sprawdzam polskie znaki we wszystkich potrzebnych odmianach.
5. Weryfikuję licencję dla każdego zastosowania i ewentualne koszty.
6. Przygotowuję pliki do wdrożenia na stronie i zamienniki do dokumentów.
7. Spisuję zasady, żeby każdy w firmie używał pisma tak samo.

Kolory i typografię możesz zamówić u mnie jako pojedynczy element marki — od 1 490 zł netto. Przy projekcie strony dobór i wdrożenie fontów są częścią pracy nad wyglądem, a w pełnej marce, od 4 900 zł netto, typografia jest jednym z jej fundamentów.