Typografia marki – jak ustalić hierarchię nagłówków, tekstów i podpisów

Typografia marki zaczyna się psuć zwykle nie wtedy, gdy wybrano zły krój pisma, lecz wtedy, gdy nikt nie ustalił, który tekst ma być ważniejszy od którego. Efekt widać szybko: nagłówek strony wygląda jak śródtytuł, podpis pod zdjęciem konkuruje z tekstem głównym, a przycisk CTA jest większy niż informacja, którą użytkownik powinien przeczytać przed kliknięciem.

Dobrze zaprojektowana hierarchia nie polega na przypisaniu przypadkowych wartości typu „H1 = 48 px, H2 = 32 px”. Trzeba jednocześnie ustalić rozmiar, interlinię, grubość, długość wiersza, odstępy oraz sposób skalowania na mniejszych ekranach. Dopiero taki zestaw można nazwać systemem typograficznym marki.

Najpierw ustal skalę, zamiast dobierać każdy rozmiar osobno

Najczęstszy błąd to projektowanie typografii ekran po ekranie. Na stronie głównej powstaje H1 wielkości 52 px, na podstronie 44 px, w prezentacji 38 pt, a miesiąc później ktoś dodaje 46 px, bo „lepiej wyglądało”. Po kilkunastu projektach firma ma dziesięć prawie identycznych rozmiarów i żadnej czytelnej hierarchii.

Lepszym punktem wyjścia jest tekst podstawowy, ponieważ to właśnie jego użytkownik czyta najwięcej. Dla serwisów internetowych rozsądna baza wynosi zwykle 16–18 px. Przy stronach z dużą ilością tekstu, raportach czy serwisach eksperckich często lepiej sprawdza się 17–18 px niż absolutne minimum 16 px.

Praktyczny zestaw startowy dla desktopu może wyglądać tak:

• tekst podstawowy: 18 px, interlinia 26–30 px,
• tekst pomocniczy: 14–16 px, interlinia 20–24 px,
• podpisy i metadane: 12–14 px, interlinia 16–20 px,
• H3: 24 px, interlinia 30–32 px,
• H2: 32 px, interlinia 38–42 px,
• H1: 44–48 px, interlinia 50–56 px.

Nie są to wartości, które należy kopiować bez sprawdzania. Krój z dużą wysokością x, taki jak Inter, Source Sans 3 czy IBM Plex Sans, będzie wyglądał przy 16 px większy niż font o drobniejszym rysunku. Dlatego rozmiar nominalny nie jest rozmiarem wizualnym.

Na urządzeniach mobilnych nie trzeba proporcjonalnie zmniejszać wszystkiego. Tekst podstawowy może pozostać przy 16–18 px, podczas gdy nagłówki należy ograniczyć mocniej. Przykładowa mobilna skala to:

• tekst podstawowy: 16 px / 24 px,
• podpis: 13–14 px / 18–20 px,
• H3: 20–22 px / 26–28 px,
• H2: 26–28 px / 32–34 px,
• H1: 32–36 px / 38–42 px.

H1 o wielkości 48 px przeniesiony bez zmian na ekran telefonu potrafi zająć cztery–pięć wierszy. To nie wygląda bardziej premium. Po prostu wypycha właściwą treść poza pierwszy ekran.

Przy ustalaniu skali dobrze działa współczynnik 1,2–1,25. Jeżeli tekst bazowy ma 16 px, kolejne poziomy mogą mieć około 20, 25, 31 i 39 px. Nie trzeba jednak trzymać się matematyki co do jednego piksela. System ma porządkować projekt, a nie wiązać projektantowi ręce.

Rozmiar jest zresztą tylko jednym sposobem budowania hierarchii. Do dyspozycji pozostają jeszcze:

• grubość kroju,
• kontrast między odmianą regular i bold,
• kolor,
• wielkie litery,
• odstępy nad i pod tekstem,
• szerokość kolumny,
• drugi krój pisma.

Im więcej tych mechanizmów działa jednocześnie, tym ostrożniej trzeba ich używać. Nagłówek nie musi być równocześnie dwa razy większy, pogrubiony, zapisany kapitalikami i w innym kolorze. Taki zestaw szybko zamienia system w wizualny hałas.

W większości identyfikacji wystarczą trzy lub cztery grubości. Na przykład 400 dla tekstu, 500 dla elementów interfejsu, 600 dla śródtytułów i 700 dla najmocniejszych nagłówków. Używanie 300, 400, 450, 500, 550, 600 i 700 tylko dlatego, że font zmienny daje taką możliwość, komplikuje system bez realnej korzyści.

Hierarchia musi działać w tekście, interfejsie i materiałach drukowanych

Brand book opisujący wyłącznie H1, H2 i tekst podstawowy jest niekompletny. W prawdziwej komunikacji pojawiają się jeszcze lead, podpis zdjęcia, cena, etykieta formularza, przycisk, breadcrumb, stopka, disclaimer, tabela, cytat, numer statystyczny czy tekst na banerze reklamowym.

Każdy z tych elementów powinien mieć przypisaną funkcję, nie tylko rozmiar.

Najważniejsza zasada: podobnie wyglądające teksty powinny mieć podobne znaczenie. Jeśli nagłówek karty produktu ma 20 px i wagę 600, nie używaj dokładnie tego samego stylu do informacji drugorzędnej w stopce. Użytkownik rozpoznaje hierarchię wizualnie szybciej, niż zdąży przeczytać treść.

Dla interfejsu marki sensowny podział może wyglądać tak:

• Display – największe hasła kampanii i hero section,
• Heading 1–3 – hierarchia treści strony,
• Body Large / Body / Body Small – treść właściwa,
• Label – formularze, filtry, kontrolki,
• Caption – podpisy i metadane,
• Button – tekst elementów interaktywnych.

Dobry system ma zwykle około 6–10 rzeczywiście używanych stylów, a nie 25 odmian różniących się o 1–2 px.

Trzeba też pilnować długości wiersza. W tekstach czytanych ciągiem najwygodniej utrzymywać około 55–75 znaków ze spacjami w jednym wierszu. Kolumna rozciągnięta na cały ekran monitora wygląda efektownie na makiecie, ale czyta się ją źle: wzrok musi pokonywać zbyt dużą odległość i trudniej znaleźć początek następnej linii.

Interlinia tekstu podstawowego najczęściej powinna wynosić około 145–165% wielkości fontu. Przy 16 px oznacza to zwykle 23–26 px, przy 18 px – około 26–30 px. Nagłówki wymagają ciaśniejszego składu; tam często wystarcza 110–125%.

Zbyt duża interlinia w nagłówkach jest częstym problemem gotowych systemów projektowych. Dwuwierszowy tytuł zaczyna wyglądać jak dwa niezależne elementy. Z kolei body ustawione 16/18 px szybko staje się męczące przy dłuższym czytaniu.

Osobnej uwagi wymagają podpisy i informacje pomocnicze. Nie powinny być pomniejszane do granicy czytelności tylko po to, aby pokazać, że są mniej ważne. Na ekranie 12 px można traktować jako dolny praktyczny zakres dla krótkich metadanych, ale tekst zawierający istotne informacje lepiej utrzymać na poziomie 14 px lub większym.

W materiałach drukowanych skala wygląda inaczej. Tekst główny broszury lub katalogu często mieści się w zakresie 9,5–11 pt, zależnie od kroju, szerokości kolumny i grupy odbiorców. Podpis 7,5–9 pt może być wystarczający w dobrej jakości druku, lecz dokładnie ten sam font oglądany na ekranie nie powinien być automatycznie przeliczany punkt za punkt.

Problem pojawia się również przy prezentacjach. Tekst 16–18 pt, który na laptopie wygląda poprawnie, na ekranie sali konferencyjnej bywa praktycznie nieczytelny. W slajdach lepiej zaczynać od około 24 pt dla tekstu właściwego i 32–44 pt dla podstawowych nagłówków, a szczegółowe informacje przenosić do notatek lub materiałów dodatkowych.

System typograficzny trzeba przetestować na prawdziwej treści, nie na lorem ipsum

Najdroższy font i najbardziej dopracowana skala nie uratują systemu, który przetestowano wyłącznie na krótkich angielskich hasłach. Polska wersja językowa szybko ujawnia problemy: dłuższe wyrazy, znaki diakrytyczne, rozbudowane odmiany i nagłówki, które po tłumaczeniu zajmują dwa razy więcej miejsca.

Przed zatwierdzeniem typografii trzeba sprawdzić między innymi słowa zawierające ą, ć, ę, ł, ń, ó, ś, ź i ż, polskie cudzysłowy „…”, myślniki, cyfry, procenty, symbole walut oraz nazwiska z polskimi znakami. To szczególnie istotne przy mniej popularnych fontach displayowych. Zdarza się, że podstawowy alfabet wygląda świetnie, a polskie znaki zostały dorysowane znacznie słabiej.

Koniecznie trzeba obejrzeć także:

• nagłówek jedno-, dwu- i trzywierszowy,
• bardzo krótki tytuł, np. „Dom”,
• długi tytuł zawierający 70–100 znaków,
• paragraf liczący 800–1200 znaków,
• listę punktowaną,
• tabelę z liczbami,
• cenę typu „12 999,90 zł”,
• datę i godzinę,
• przyciski z krótkim oraz długim tekstem,
• komunikaty błędów formularza.

Dopiero wtedy widać, czy system faktycznie działa.

Przy stronach internetowych trzeba dodatkowo kontrolować zachowanie tekstu przy zmianie szerokości viewportu. Nagłówek może mieć na przykład 46 px na dużym ekranie i płynnie zejść do 34 px na telefonie. Stosowanie płynnego skalowania ma sens, ale trzeba wyznaczyć minimum i maksimum. Pozostawienie rozmiaru bez ograniczeń prowadzi do absurdalnie wielkich nagłówków na monitorach ultrawide albo zbyt małej typografii na wąskich ekranach.

Ważna jest też licencja. Font użyty przez grafika na własnym komputerze nie musi automatycznie mieć prawa do publikacji jako webfont, element aplikacji czy materiał generowany dla klientów. Przy płatnych rodzinach warunki licencji potrafią różnić się zależnie od liczby użytkowników, odsłon strony i sposobu osadzania fontu. Ten punkt należy sprawdzić przed wpisaniem kroju do brand booka, a nie po wdrożeniu serwisu.

Drugi praktyczny problem to wydajność. Rodzina zawierająca kilkanaście osobnych plików fontów może niepotrzebnie zwiększać liczbę pobieranych zasobów. Dlatego w projekcie cyfrowym sensownie jest ograniczyć liczbę używanych odmian, a fonty zmienne stosować tam, gdzie faktycznie upraszczają wdrożenie.

Nie ma również powodu, aby marka za wszelką cenę korzystała z dwóch różnych krojów. Jeden dobrze rozbudowany font z wyraźnie zaprojektowaną hierarchią często działa lepiej niż przypadkowe połączenie dwóch rodzin. Drugi font warto wprowadzić dopiero wtedy, gdy ma konkretną funkcję: odróżnia komunikację editorialową, nadaje charakter nagłówkom albo rozwiązuje problem, którego podstawowa rodzina nie potrafi rozwiązać.

Najbardziej irytujący błąd pojawia się jednak później: firma tworzy brand book, ale zespoły używają własnych ustawień w PowerPointcie, Figmie, Canvie, Wordzie i systemie CMS. Wtedy dokument istnieje, lecz system nie.

Dlatego finalna specyfikacja powinna zawierać nie tylko nazwę fontu, ale przynajmniej:

• nazwę stylu,
• zastosowanie,
• rodzinę fontu,
• wagę,
• rozmiar,
• interlinię,
• tracking,
• wariant desktopowy i mobilny,
• zalecaną maksymalną szerokość tekstu,
• reguły użycia koloru,
• przykłady poprawnego i błędnego zastosowania.

Jeżeli identyfikacja wizualna jest projektowana lub porządkowana od podstaw, przy ocenie sposobu budowania całego systemu marki można zestawić własne założenia z realizacjami wyspecjalizowanych studiów. Sam wygląd portfolio nie powinien jednak rozstrzygać decyzji. Ważniejsze jest to, czy projekt przewiduje codzienne zastosowania: długi polski nagłówek, tabelę, formularz, prezentację sprzedażową i materiały tworzone później przez osoby spoza zespołu projektowego.

FAQ – najczęstsze pytania o hierarchię typografii marki

Ile rozmiarów tekstu powinna mieć marka?
W typowym systemie cyfrowym wystarcza około 6–10 podstawowych stylów. Większa liczba ma sens dopiero wtedy, gdy produkt zawiera rozbudowane tabele, dashboardy, aplikację lub wiele odmiennych formatów treści.

Czy każdy nagłówek musi mieć inną wielkość?
Nie. Hierarchię można budować również grubością, odstępami i kolorem. Różnica musi być jednak widoczna bez zastanawiania się, czy tekst ma 22 czy 24 px.

Czy 16 px zawsze wystarcza dla tekstu podstawowego?
Nie. To dobry punkt startowy dla interfejsów, ale w serwisach nastawionych na czytanie często lepiej działa 17–18 px. Decyzję należy sprawdzić na docelowym kroju, szerokości kolumny i urządzeniach mobilnych.

Czy można używać dwóch różnych fontów w jednej marce?
Tak, ale każdy powinien mieć jasno określoną funkcję. Jeżeli drugi krój został dodany wyłącznie dla urozmaicenia, prawdopodobnie zwiększy liczbę wyjątków bez poprawy komunikacji.

Co jest ważniejsze: rozmiar fontu czy interlinia?
Nie da się ich sensownie rozdzielić. Ten sam tekst 16 px z interlinią 18 px i 26 px daje zupełnie inne doświadczenie czytania. Dla dłuższych treści relacja wielkości do interlinii jest jednym z pierwszych parametrów, które trzeba sprawdzić.

Czy brand book powinien określać typografię mobilną?
Tak. Sam zestaw wartości desktopowych jest niewystarczający. Dokument powinien określać co najmniej zachowanie H1–H3, tekstu podstawowego, podpisów i elementów interfejsu na mniejszych ekranach.

Pierwszą rzeczą do sprawdzenia nie jest więc font H1 ani efektowny krój displayowy. Otwórz trzy realne materiały swojej marki – stronę internetową, prezentację i dokument sprzedażowy – i porównaj tekst podstawowy, nagłówki oraz podpisy. Jeśli te same funkcje mają różne rozmiary, grubości i odstępy, najpierw usuń właśnie tę niespójność. Dopiero potem dopracowuj skalę i detale.

Więcej informacji na: warto sprawdzić Whiteart – https://www.whiteart.pl