Płynna typografia w CSS — jak używać clamp()

Problem z punktami przerwania

Klasyczne podejście do responsywnej typografii to kilka reguł @media: 16 px na telefonie, 18 px na tablecie, 20 px na komputerze. Rozmiar skacze wtedy przy określonych szerokościach, a między nimi tekst bywa za mały lub za duży. Płynna typografia zmienia rozmiar stopniowo, proporcjonalnie do szerokości ekranu.

Funkcja clamp()

clamp(minimum, wartość preferowana, maksimum)

Przeglądarka używa wartości preferowanej, ale nigdy nie schodzi poniżej minimum i nie przekracza maksimum. Jeśli wartość preferowana zależy od szerokości okna (vw), dostajemy płynną zmianę w ograniczonym zakresie.

Jak policzyć wartości

Chcemy, aby tekst miał 16 px przy ekranie 375 px i 24 px przy 1280 px. Nachylenie wynosi (24 − 16) ÷ (1280 − 375) ≈ 0,00884, czyli 0,884vw. Przesunięcie to 16 − 375 × 0,00884 ≈ 12,685 px, czyli około 0,7928rem. Wynik:

font-size: clamp(1rem, 0.7928rem + 0.884vw, 1.5rem);

Ręczne liczenie jest żmudne, dlatego regułę wygeneruje generator clamp(). Zamianę px na rem pokaże przelicznik px na rem.

Dlaczego rem w środku

Samo vw nie reaguje na powiększenie tekstu w ustawieniach przeglądarki. Osoba słabowidząca, która ustawi większą czcionkę, nie zobaczy zmiany. Dodanie części w rem sprawia, że rozmiar rośnie razem z ustawieniami użytkownika. Minimum i maksimum także warto podawać w rem.

Nie tylko czcionki

clamp() działa z każdą właściwością przyjmującą długość: marginesami, odstępami w siatce (gap), szerokością kontenera czy promieniem zaokrąglenia. Płynne odstępy dobrze współgrają z układami opisanymi w poradnikach CSS Grid i Flexbox, a siatkę wygeneruje generator CSS Grid.

Dobre praktyki

• Nie przesadzaj z różnicą. Nagłówek 28–48 px jest w porządku, 16–60 px już nie.
• Ustal skalę typograficzną, np. tekst, mały nagłówek i duży nagłówek, każdy z własnym clamp().
• Sprawdź stronę na wąskim telefonie i szerokim monitorze, a także przy powiększeniu 200%.
• Pilnuj kontrastu i długości wiersza. Dostępność kolorów opisuje poradnik kontrast kolorów.

Wsparcie przeglądarek

clamp() obsługują wszystkie współczesne przeglądarki od około 2020 roku. W bardzo starych przeglądarkach można przed regułą z clamp() zostawić zwykłą wartość w rem jako rozwiązanie awaryjne.