Skala typograficzna, która porządkuje stronę

Kiedy każdy nagłówek ma własny pomysł

Na jednej podstronie tytuł ma 42 px, na drugiej 46 px, a w formularzu pojawia się jeszcze 19 px, bo „tak lepiej weszło”. Każda decyzja z osobna może być rozsądna. Razem zaczynają tworzyć przypadkowy zbiór. Skala typograficzna pomaga uporządkować te wybory, zanim kolejna podstrona dopisze własne zasady.

Nie chodzi o podporządkowanie projektu kalkulatorowi. Skala to krótka lista rozmiarów, z której korzystasz świadomie. Dzięki niej tytuł, śródtytuł, akapit i podpis zaczynają mieć przewidywalne role. Użytkownik nie musi znać proporcji ani nazw stopni. Ma po prostu rozumieć, co jest najważniejsze i gdzie zaczyna się następna myśl.

Przygotuj próbkę w narzędziu skali, ale decyzję podejmij na rzeczywistym układzie. Jeśli nadal wybierasz rodziny, wróć do zasad łączenia fontów: zmiana kroju może wymagać korekty całej hierarchii.

Zacznij od tekstu, z którym spędza się czas

Najpierw ustaw zwykły akapit. Wybierz font, szerokość kolumny i rozmiar, przy którym tekst czyta się wygodnie na docelowym urządzeniu. Jako próbę możesz przyjąć 18 px, ale potraktuj tę liczbę jako początek pracy, nie zasadę dostępności. Inny krój, ekran i układ mogą wymagać innej decyzji.

Wstaw kilka akapitów, listę i link. Pojedyncze zdanie nie pokaże rytmu dłuższej strony. Jeśli tekst wydaje się drobny, sprawdź nie tylko rozmiar, lecz także wysokość małych liter, kolor i długość wiersza. Nie buduj całej skali na bazie, której później będziesz unikać. To właśnie z tym rozmiarem użytkownik może spędzić najwięcej czasu.

Proporcja daje porządek, nie gotowy projekt

Skala może powstawać przez mnożenie kolejnego rozmiaru przez stałą proporcję. Dla bazy 18 px i współczynnika 1,25 otrzymasz kolejno około 22,5, 28,1, 35,2 i 43,9 px. W drugą stronę pierwszy stopień wyniesie 14,4 px. To matematyczna propozycja zestawu, a nie obowiązek używania wszystkich wartości.

Spokojniejsza proporcja może pomóc w gęstym interfejsie, a większe skoki dają więcej kontrastu w układzie redakcyjnym. Porównaj dwa zestawy na tej samej stronie. Jeżeli różnice między poziomami prawie znikają, zwiększ kontrast albo uprość hierarchię. Jeśli tytuł dominuje nad wszystkim, nie próbuj na siłę wykorzystywać najwyższego stopnia.

Interlinia i szerokość dopowiadają resztę

Ta sama wielkość tekstu może dać wygodny akapit albo duszny blok. Zacznij próbę interlinii od wartości około 1,5–1,7 dla dłuższego tekstu i dopasuj ją do wybranego fontu oraz szerokości. Nagłówki często potrzebują ciaśniejszego rytmu, ale sprawdź akcenty i litery z wydłużeniami. Oglądaj również nagłówek, który zajmuje trzy wiersze.

W CSS interlinia bez jednostki ułatwia utrzymanie proporcji względem rozmiaru tekstu. Nie myl jednak własnej domyślnej interlinii z wymaganiem WCAG dotyczącym odstępów. Kryterium 1.4.12 dotyczy możliwości narzucenia określonych odstępów przez użytkownika bez utraty treści lub funkcji. Warto więc sprawdzić, czy karty i przyciski nie przycinają tekstu po takiej zmianie.

Znaczenie interlinii oceniaj razem z wysokością x. Dwa fonty ustawione na 18 px nie muszą wyglądać na równie duże. Dlatego porównanie w narzędziu porównawczym powinno obejmować dłuższy fragment, nie sam nagłówek.

Źródło: W3C: Understanding Text Spacing ↗

Nazwij role, zamiast kolekcjonować piksele

Zapisz niewielki zestaw: tekst główny, podpis, śródtytuł sekcji i tytuł strony. Jeżeli potrzebujesz dodatkowej roli, dopisz, do czego służy. „Trochę większy tekst” nie jest jeszcze przekonującym powodem. Każdy wyjątek utrudnia późniejsze utrzymanie spójności, zwłaszcza gdy stronę rozwija więcej niż jedna osoba.

Pamiętaj też, że poziom nagłówka HTML nie jest rozmiarem fontu. Nagłówki porządkują treść dokumentu, a CSS odpowiada za ich wygląd. Nie wybieraj h4 tylko dlatego, że akurat ma ładny rozmiar. Możesz zachować logiczną strukturę tekstu i dopasować styl do roli w konkretnym komponencie. Spójność wizualna i sensowna kolejność treści powinny się wspierać.

Telefon to ten sam projekt, ale inna przestrzeń

Duży ekran potrafi wybaczyć bardzo długi tytuł. Telefon szybko pokazuje, ile miejsca naprawdę potrzebują słowa. Sprawdź skalę na wąskiej szerokości z dłuższą wersją językową i rzeczywistą treścią. Największe nagłówki mogą potrzebować innego rozmiaru, podczas gdy akapit nadal powinien zachować komfort czytania.

Pozostaw możliwość powiększania tekstu. WCAG 1.4.4 opisuje powiększenie do 200% bez utraty treści lub funkcji, z określonymi wyjątkami. W praktyce obejrzyj po powiększeniu menu, formularz i komunikaty błędów, nie tylko idealny akapit. Nie naprawiaj przepełnienia przez blokowanie zoomu. Szukaj elastyczniejszych kontenerów, zawijania i odstępów.

Źródło: W3C: Understanding Resize Text ↗

Przelicz skalę, a potem przypisz jej zadania

Dla bazy 18 px krok pierwszy przy proporcji 1,25 to 22,5 px, a następny 28,125 px. Nie musisz wykorzystywać każdego kroku. Możesz przeznaczyć 18 px na tekst, około 28 px na śródtytuł i około 44 px na tytuł strony. Pominięcie pośredniej wartości często daje wyraźniejszą hierarchię niż zapełnianie projektu wszystkimi wynikami kalkulatora.

Porównaj ten sam układ z proporcją 1,2. Po czterech krokach osiągniesz około 37,32 px zamiast 43,95 px. Różnica dotyczy tempa narastania kontrastu. W gęstym panelu mniejszy skok może być wygodniejszy, a otwierająca stronę opowieść może potrzebować mocniejszej różnicy. Oceń obie wersje na tych samych słowach z kolekcji dla interfejsów lub zestawu do dłuższego czytania.

Powiększenie i odstępy: sprawdź odporność układu

Rozmiar zapisany w specyfikacji nie jest ostatnim słowem. Użytkownik może powiększyć tekst albo zmienić jego odstępy. Obejrzyj formularz, kartę i menu przy powiększeniu tekstu do 200%. Jeśli przycisk ma sztywną wysokość, dłuższa etykieta może zostać przycięta. Poprawka zwykle dotyczy elastyczności kontenera, nie zmniejszania liter.

WCAG 2.2 opisuje też odporność treści na ustawienia odstępów, w tym interlinię 1,5, odstęp po akapicie 2 razy większy od rozmiaru fontu, odstęp między literami 0,12 i między słowami 0,16 rozmiaru fontu. To parametry do sprawdzenia możliwości zmiany przez użytkownika, a nie polecenie stosowania ich jako domyślnych styli. Przejście jednego takiego przeglądu nie oznacza pełnej zgodności strony z WCAG.

Nie myl hierarchii wizualnej ze strukturą dokumentu

Duży tekst nie staje się nagłówkiem tylko dlatego, że ma więcej pikseli. Poziomy nagłówków wynikają ze struktury treści. Tytuł sekcji na dwóch różnych widokach może mieć inne rozmiary, zachowując ten sam poziom semantyczny. W sklepie nazwa produktu, cena i przycisk mają różne zadania; nie wszystkie wymagają znacznika nagłówka.

Źródło: W3C: Text Spacing ↗ · W3C: Resize Text ↗

Przekaż skalę jako mały kontrakt projektowy

Eksport wartości z kalkulatora skali potraktuj jako początek dokumentacji. Do każdej roli dopisz przeznaczenie, rodzinę, grubość, interlinię i odstępy wokół elementu. Dodaj przykład mobilny oraz najdłuższy dopuszczalny tytuł. Dzięki temu kolejna osoba nie musi wybierać między kilkoma niemal identycznymi wartościami.

W zmianach najpierw popraw rolę, a dopiero później pojedynczy ekran. Jeśli podpisy są zbyt małe na trzech podstronach, zwiększ wspólną rolę i obejrzyj wszystkie miejsca jej użycia. Wyjątek zapisz dopiero wtedy, gdy wynika z odmiennego zadania. To hamuje ponowne rozrastanie się skali i ułatwia prace nad projektem i wdrożeniem.

1. Zdefiniuj role na jednej reprezentatywnej stronie.
2. Sprawdź długi tekst, telefon, powiększenie i zmienione odstępy.
3. Przenieś te same role do drugiego, odmiennego widoku.
4. Zapisz uzasadnione wyjątki i usuń zbędne wartości.

Zrób próbę na jednej prawdziwej podstronie

Otwórz narzędzie skali w Fontsmate, wybierz font i porównaj dwie proporcje. Zapisz zestaw, który daje czytelną różnicę między rolami. Następnie użyj go w jednym kompletnym widoku: z tytułem, opisem, listą, przyciskiem i podpisem. Nie dopasowuj próbki tak, żeby wszystkie nagłówki były krótkie. Wybierz także ten niewygodny.

Po tej próbie usuń niepotrzebne stopnie i zapisz zasady. Eksport CSS jest materiałem do wdrożenia, nie gotową gwarancją responsywności. Sprawdź wartości w rzeczywistym projekcie, również przy innym domyślnym rozmiarze tekstu w przeglądarce. Dobra skala daje porządek bez odbierania stronie charakteru. Kalkulator może policzyć stopnie. Ty decydujesz, po których warto chodzić.