Typografia to jedna z tych rzeczy w projekcie, które albo trzymają całość razem, albo subtelnie ją rozsypują. Kiedy font nagłówka jest identyczny na każdej podstronie, a rozmiary tekstu zachowują konsekwentną hierarchię — strona wygląda profesjonalnie nawet bez wyjątkowego designu. Kiedy każda sekcja żyje własnym typograficznym życiem, coś jest nie tak i każdy to czuje, choć nie zawsze wie dlaczego.
W Divi 5 typografię globalną ustawia się raz. I to ustawienie obowiązuje w całym serwisie — chyba że świadomie zdecydujesz się je nadpisać w konkretnym miejscu.
Dlaczego typografia globalna jest ważniejsza niż myślisz
Zanim przejdziemy do tego jak to ustawić, warto zrozumieć dlaczego to w ogóle robi różnicę.
Wyobraź sobie projekt bez typografii globalnej. Budujesz stronę główną — wybierasz font nagłówka, ustawiasz rozmiar, wagę, odstępy między literami. Budujesz podstronę usług — robiasz to samo, może trochę inaczej bo tak pasowało do układu. Budujesz blog — znowu ręcznie, znowu „na oko”.
Po miesiącu masz serwis gdzie nagłówki H2 na stronie głównej mają 38px, na stronie usług 36px, a na blogu 40px. Font wszędzie „ten sam” ale jednak z drobnymi różnicami w ustawieniach. Odstępy między akapitami różne w zależności od tego w jakim nastroju byłeś przy budowaniu danej sekcji.
To jest to co projektanci nazywają typograficznym chaosem — i jest on znacznie częstszy niż się wydaje, szczególnie w projektach budowanych stopniowo przez dłuższy czas.
Typografia globalna w Divi 5 eliminuje ten problem u źródła.
Dwa fonty wystarczą
Zanim wejdziesz w ustawienia, warto podjąć jedną decyzję: jakich fontów używasz w projekcie.
Klasyczna odpowiedź to dwa fonty. Jeden dla nagłówków, jeden dla treści. Tyle wystarczy na zdecydowaną większość projektów stronowych.
Trzy fonty to maksimum dla serwisów gdzie trzecia rola jest bardzo wyraźna — na przykład font monospace do bloków kodu albo wyraźnie dekoracyjny font dla specjalnych akcentów. Więcej niż trzy to zazwyczaj za dużo i zamiast bogatszego designu dostajemy typograficzny rozgardiasz.
Kilka praktycznych wskazówek przy wyborze:
- font nagłówkowy może być bardziej charakterystyczny — to on buduje osobowość strony,
- font treści powinien być przede wszystkim czytelny — szczególnie na małych ekranach,
- dobre połączenie to font szeryfowy na nagłówkach i bezszeryfowy na treści, albo dwa bezszeryfowe z wyraźnie różną osobowością,
- Google Fonts ma w Divi 5 pełną integrację — wszystkie fonty dostępne od ręki bez instalowania czegokolwiek.
Jeśli pracujesz z gotowym brandbookiem, fonty są już wybrane. Jeśli projektujesz od zera — poświęć chwilę na ten wybór zanim przejdziesz dalej. Zmiana fontów w trakcie projektu jest możliwa, ale jeśli masz je globalnie ustawione to prosta, a jeśli nie masz — to mozolna.
Gdzie ustawić typografię globalną w Divi 5
Typografia globalna w Divi 5 mieszka w dwóch miejscach — i warto rozumieć różnicę między nimi.
Pierwsze miejsce to Theme Customizer, czyli klasyczne ustawienia motywu dostępne poza builderem. Tu ustawiasz bazową typografię dla całej witryny — domyślny font body, bazowy rozmiar tekstu, domyślny kolor tekstu. To są wartości które obowiązują wszędzie gdzie Divi nie ma bardziej szczegółowych ustawień.
Drugie miejsce to Design Variables w builderze — tam możesz stworzyć zmienne typograficzne, podobnie jak robiłeś to z kolorami. Zmienna dla fontu nagłówkowego, zmienna dla fontu treści, zmienna dla bazowego rozmiaru. Kiedy presety i moduły korzystają z tych zmiennych zamiast z wpisanych na sztywno wartości — zmiana jednej zmiennej aktualizuje całą typografię serwisu.
W praktyce przy typowym projekcie warto skonfigurować oba miejsca. Theme Customizer jako baza dla całej witryny, Design Variables dla bardziej precyzyjnej kontroli w builderze.
Hierarchia typograficzna — co naprawdę warto ustawić globalnie
Typografia globalna to nie tylko wybór fontu. To też decyzje o hierarchii — czyli o tym jak różne poziomy tekstu odnoszą się do siebie nawzajem.
Podstawowa hierarchia typograficzna dla typowego serwisu wygląda tak:
- H1 — tytuł strony, największy, jeden na stronę, zazwyczaj 44–60px,
- H2 — główne sekcje, 32–40px,
- H3 — podsekcje i nagłówki kart, 22–28px,
- H4 — drobniejsze wyróżnienia, 18–20px,
- Body — tekst treści, 16–18px, to jest absolutne minimum dla komfortu czytania,
- Small — podpisy, opisy, informacje pomocnicze, 13–14px.
Nie musisz trzymać się tych dokładnych wartości — to są punkty orientacyjne, nie zasady. Ważne jest żeby hierarchia była odczuwalna, czyli żeby każdy kolejny poziom był wyraźnie mniejszy od poprzedniego.
Kiedy te wartości siedzą w ustawieniach globalnych, cały serwis automatycznie respektuje hierarchię. Kiedy każdy nagłówek jest ustawiany ręcznie — hierarchia istnieje tylko dopóki pamiętasz o niej przy każdym module.
Line-height i spacing — detale które robią różnicę
Dwa parametry typograficzne które często są pomijane przy globalnych ustawieniach, a mają duży wpływ na czytelność:
Line-height to odstęp między wierszami tekstu. Dla tekstu treści wartość między 1.5 a 1.7 to bezpieczna strefa która działa w większości projektów. Zbyt mały line-height sprawia że tekst wydaje się ciasny i trudny do czytania. Zbyt duży rozbija akapity i utrudnia śledzenie kolejnego wiersza.
Letter-spacing — odstęp między literami. Dla tekstu treści zazwyczaj 0 lub bardzo mała wartość. Dla nagłówków, szczególnie pisanych dużymi literami, lekkie powiększenie letter-spacingu poprawia czytelność i nadaje charakteru.
Oba parametry warto mieć ustawione globalnie — szczególnie line-height dla body, który będzie obowiązywał w całym serwisie i zadecyduje o tym jak komfortowo czyta się dłuższe treści.
Kiedy nadpisywać ustawienia globalne
Typografia globalna nie oznacza że wszędzie musi być identycznie. Chodzi o to żeby globalne ustawienia były mądrym punktem startowym, od którego odchodzisz tylko wtedy gdy masz ku temu konkretny powód.
Nadpisywanie ustawień typograficznych ma sens w kilku sytuacjach:
- sekcja hero gdzie chcesz szczególnie dużego, efektowego nagłówka,
- cytat lub testimonial który ma wyglądać inaczej niż standardowy tekst,
- specjalny landing page z inną hierarchią niż reszta serwisu,
- elementy gdzie rozmiar tekstu zależy od kontekstu layoutu.
Wszystko inne — standardowe sekcje treści, nagłówki podstron, opisy usług, artykuły blogowe — powinno korzystać z ustawień globalnych. Wtedy projekt jest spójny i łatwy w utrzymaniu.
Jeden wybór, długofalowy efekt
Typografia globalna to jedna z tych decyzji które podejmujesz raz na początku projektu i które potem pracują za Ciebie przez cały czas jego trwania.
Nie chodzi o perfekcję od pierwszego dnia. Chodzi o to żeby mieć system — fonty wybrane, hierarchia ustalona, wartości wpisane globalnie. Potem możesz je korygować, ale na poziomie systemu, a nie sekcja po sekcji.
Kiedy masz gotowe Global Colors z poprzedniego kroku i typografię globalną z tego — masz już solidny fundament pod cały projekt. Kolejny krok to Theme Builder: nagłówek, stopka i szablony stron zanim zaczniesz właściwe budowanie.