Responsywna typografia zaczyna się wtedy, gdy tekst jest wygodny do czytania na telefonie, laptopie i dużym monitorze bez osobnego poprawiania każdej sekcji. Sama zmiana rozmiaru fontu nie wystarczy. Trzeba jeszcze pilnować długości wiersza, interlinii, odstępów, kontrastu i skali nagłówków.

Najprostszy test: otwórz stronę na telefonie i przeczytaj dwa akapity na głos. Jeśli gubisz linię, mrużysz oczy albo przewijasz po jednym zdaniu, typografia wymaga pracy.

Rozmiar tekstu: nie zaczynaj od pixel perfect

Dobry tekst bazowy na stronie zwykle mieści się w okolicy 16-18 px, ale sama liczba nie załatwia sprawy. Różne fonty mają inną wysokość optyczną. Ten sam rozmiar może wyglądać lekko albo ciężko w zależności od kroju.

W CSS warto używać skali, która płynnie reaguje na szerokość ekranu. Funkcja clamp() pozwala ustawić minimum, wartość elastyczną i maksimum, na przykład:

body {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
}
h1 {
font-size: clamp(2rem, 1.4rem + 3vw, 4rem);
line-height: 1.1;
}

Dzięki temu tekst nie skacze między breakpointami, tylko zmienia się płynnie.

Interlinia: najczęściej jest za ciasno

Przy długich akapitach bezpieczny punkt startowy to line-height około 1.5-1.7. Nagłówki mogą mieć mniejszą interlinię, bo są krótkie. Nie ustawiaj interlinii na sztywno w pikselach, jeśli nie musisz. MDN zwraca uwagę, że wartości bez jednostki lepiej skalują się przy powiększaniu tekstu.

Innymi słowy: line-height: 1.6 jest zwykle rozsądniejsze niż line-height: 24px, bo skaluje się proporcjonalnie do rozmiaru fontu.

Długość wiersza ma większe znaczenie niż się wydaje

Na desktopie problemem bywa zbyt szeroki tekst. Akapit rozciągnięty na całą szerokość monitora wygląda imponująco w layoucie, ale czyta się słabo. Dobrą praktyką jest ograniczenie szerokości treści, na przykład przez max-width w okolicy 65-75 znaków na linię.

.article-content {
max-width: 72ch;
margin-inline: auto;
}

Na telefonie problem jest odwrotny: za mały font, za ciasne odstępy i nagłówki, które łamią się co słowo.

Skala nagłówków

Nagłówki powinny prowadzić użytkownika, a nie konkurować ze sobą. Jeśli każde H2 wygląda jak billboard, strona traci rytm. Ustal prostą skalę: H1 duży, H2 wyraźny, H3 pomocniczy. Nie przeskakuj poziomów tylko dlatego, że któryś styl ładniej wygląda.

H1: jedna główna obietnica strony.
H2: sekcje, po których użytkownik skanuje treść.
H3: doprecyzowanie w ramach sekcji.
Listy: używaj, gdy tekst ma być wykonawczy, nie dekoracyjny.

Checklist do szybkiej poprawy

Czy tekst da się czytać przy powiększeniu strony do 200%?
Czy line-height jest bez jednostki?
Czy akapity mają sensowny odstęp, zamiast samego łamania linii?
Czy szerokość treści jest ograniczona na dużym ekranie?
Czy nagłówki na telefonie nie tworzą przypadkowych schodków?
Czy tekst linków jest zrozumiały poza kontekstem?

Kiedy typografia wpływa na biznes?

Na stronie usługowej typografia decyduje, czy ktoś przeczyta ofertę do końca. W sklepie wpływa na zrozumienie wariantów, zwrotów i kosztów dostawy. W panelu klienta zmniejsza liczbę błędów. To nie jest kosmetyka. To ergonomia czytania.

Najlepsza typografia nie zwraca na siebie uwagi. Po prostu pozwala użytkownikowi szybko zrozumieć, co ma zrobić dalej.

Źródła pomocnicze: MDN: clamp(), MDN: line-height.