Najczęściej problemy z czytelnością zaczynają się wtedy, gdy tekst rośnie, a układ pozostaje sztywny. W tym artykule pokazuję, jak ustawić rozmiar pisma w CSS, które jednostki pomagają zachować skalowalność i jak sprawdzić, czy menu, karty oraz formularze nadal działają po powiększeniu treści. To jeden z tych tematów, które w frontendzie szybko pokazują różnicę między ładnym mockupem a działającym interfejsem.
Najważniejsze zasady są prostsze, niż wygląda to w CSS
- Tekst powinien dać się powiększyć do 200% bez utraty treści i funkcji.
- `rem` to najbezpieczniejsza baza dla typografii całej strony.
- `em` sprawdza się w komponentach, a `clamp()` przy płynnych nagłówkach.
- Najczęściej psują się sztywne wysokości, skracanie treści i elementy zbyt mocno związane z pikselami.
- Testuj nie tylko wygląd, ale też reflow, fokus z klawiatury i zachowanie na wąskim ekranie.
Dlaczego duża czcionka to temat dostępności, a nie kosmetyki
Wytyczne WCAG, czyli standard dostępności treści internetowych, oczekują, że tekst da się powiększyć do 200% bez utraty treści i funkcji. To oznacza nie tylko większe litery, ale też sensowny reflow, czyli płynne dopasowanie układu do szerokości widocznego obszaru, bez wymuszania poziomego przewijania.
Z perspektywy użytkownika najprostszy sposób na większy tekst to zoom w przeglądarce. Z perspektywy frontendu zadanie jest prostsze do opisania niż do wykonania: strona ma to wytrzymać bez ucinania treści, bez poziomego scrolla i bez rozjechanych komponentów. Ja patrzę na to jak na test odporności interfejsu, a nie na estetyczny detal.
- Osoby z niższym komfortem wzroku potrzebują większego fontu, żeby w ogóle czytać bez wysiłku.
- Na telefonie, w słońcu albo w ruchu czytelność spada szybciej niż na spokojnym desktopie.
- Na dłuższych treściach większy tekst ogranicza zmęczenie i przyspiesza orientację w akapitach.
- W formularzach i nawigacji zbyt mały font często psuje nie sam wygląd, tylko używalność.
Do tego dochodzą odstępy. WCAG zakłada, że treść powinna nadal działać przy line-height na poziomie 1,5, odstępie po akapicie równym 2 razy wielkości fontu, a także przy zwiększonym letter spacing i word spacing. W praktyce to właśnie rytm typograficzny, a nie sam rozmiar liter, decyduje o komforcie czytania.
Żeby ten komfort utrzymać, trzeba wybrać jednostki CSS, które nie zablokują skali już na starcie.
Jak ustawić rozmiar tekstu w CSS, żeby dało się go skalować
Ja najczęściej zaczynam od rem, bo daje przewidywalny wynik w całym projekcie i lepiej współpracuje z ustawieniami użytkownika niż sztywne piksele. em zostawiam do lokalnych komponentów, a clamp() biorę do nagłówków i elementów, które mają rosnąć płynnie, ale w kontrolowanym zakresie.
| Jednostka | Jak działa | Kiedy ma sens | Na co uważać |
|---|---|---|---|
px |
Stała wartość, niezależna od ustawień użytkownika. | Drobne detale UI, gdzie liczy się precyzja, nie skala tekstu. | Przy treści użytkownika szybko staje się zbyt sztywna. |
rem |
Bazuje na rozmiarze roota, więc skaluje się przewidywalnie. | Tekst główny, nagłówki, odstępy i cały system typografii. | Wymaga spójnej bazy, żeby skala nie rozjechała się między komponentami. |
em |
Liczy się względem rodzica i rośnie lokalnie z komponentem. | Przyciski, badge, elementy wewnątrz jednego modułu. | Potrafi się kumulować w zagnieżdżeniach. |
clamp() |
Łączy minimum, wartość preferowaną i maksimum. | Duże nagłówki i tekst, który ma reagować na szerokość ekranu. | Nie zastępuje dobrej bazy typograficznej. |
px zostawiam raczej dla detali interfejsu niż dla tekstu użytkownika. Jeśli cały system typografii oprzesz o piksele, każdy wzrost skali będzie wymagał ręcznego poprawiania kolejnych modułów. To się szybko mści w większych projektach.
html {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.6;
}
h1 {
font-size: clamp(2rem, 4vw + 1rem, 4rem);
line-height: 1.1;
}Taki układ daje prostą bazę, a jednocześnie pozwala stopniować nagłówki bez sztywnego przywiązania do jednego rozmiaru. Sama deklaracja rozmiaru nie wystarczy jednak, jeśli kontener nie ma miejsca na wzrost treści.
Co się psuje, gdy tekst urośnie
Najczęściej nie psuje się sam font. Pękają założenia o wysokości, szerokości i stałym układzie. Przy 150-200% zoomu najpierw wychodzą rzeczy, których na desktopie w 100% prawie nie widać.
- Sztywne wysokości w kartach, banerach i przyciskach kończą się uciętym tekstem albo dziwnymi odstępami.
-
overflow: hiddeniline-clamppotrafią ukryć ważną treść, zamiast ją uporządkować. W teaserach bywają akceptowalne, ale w treści właściwej łatwo zabierają sens. - Menu i sidebary zaczynają łamać się w nieprzewidywalnych miejscach, zwłaszcza gdy elementy mają szerokości liczone w pikselach.
- Tekst w obrazach w ogóle nie skaluje się tak, jak powinien, więc traci sens przy powiększeniu.
- Formularze cierpią, gdy etykiety, placeholdery i komunikaty błędów nie mają miejsca na dwie linie.
To właśnie dlatego nie projektuję typografii w oderwaniu od layoutu. Gdy tekst ma rosnąć, kontener też musi mieć gdzie rosnąć, a to prowadzi prosto do zasad kompozycji interfejsu.
Jak projektować interfejs, który znosi większe litery
Najlepiej działa tu prosty zestaw decyzji. Daj tekstowi oddech, pozwól mu się zawijać i nie przycinaj komponentów tylko po to, by zachować idealnie równy rząd kafelków. Ja zwykle celuję w line-height 1,5-1,7 dla treści i zostawiam około 60-75 znaków w wierszu, bo dłuższe linie szybciej męczą wzrok, zwłaszcza gdy font jest większy.
article {
max-width: 70ch;
line-height: 1.6;
}
button {
min-height: 2.75rem;
padding: 0.75rem 1rem;
}W treści artykułów trzymam zwykle szerokość w okolicach 60-75 znaków w wierszu. Dłuższe linie przy większym tekście męczą szybciej, bo wzrok musi pokonywać większą odległość przy powrocie do początku kolejnej linii. Przyciski i linki wolę budować na paddingu oraz minimalnej wysokości niż na twardym height.
Jeśli używasz zmiennych krojów pisma, pomocne bywa też font-optical-sizing: auto, bo silnik renderowania może lepiej dopasować optykę liter do konkretnego rozmiaru. To nie naprawi złego layoutu, ale przy dobrze zaprojektowanej typografii daje wyraźnie lepszy efekt. Na mobile nie wyłączam automatycznego skalowania tekstu bez wyraźnego powodu; jeśli pojawia się text-size-adjust, traktuję to jako świadomą decyzję, nie domyślne lekarstwo.
Tu wygrywa prostota: jeden system typografii, spójne odstępy i brak sztucznych blokad. Dzięki temu większy tekst nie walczy z layoutem, tylko w nim naturalnie pracuje. A najpewniej wychodzi to dopiero wtedy, gdy przejdziesz przez prosty test powiększenia i klawiatury.
Jak sprawdzić, czy powiększony tekst nadal działa
Ja testuję to zawsze w dwóch przebiegach: najpierw patrzę, czy treść nadal jest czytelna, potem sprawdzam, czy interakcja dalej działa bez kombinowania. Sam widok „ładnie wygląda” nic nie znaczy, jeśli użytkownik nie może kliknąć przycisku albo musi przewijać stronę poziomo.
- Ustaw zoom przeglądarki na 200% i sprawdź nagłówki, akapity oraz CTA.
- Przetestuj szerokość około 320-360 px, bo tam najłatwiej wychodzą błędy reflow.
- Przejdź całą stronę klawiaturą i zobacz, czy focus nie ginie poza ekranem.
- Sprawdź formularze: etykiety, błędy walidacji i komunikaty pomocnicze muszą mieć miejsce na zawinięcie.
- Otwórz sekcje z kartami, teaserami i menu, bo to one najczęściej pękają jako pierwsze.
Jeżeli coś znika, nachodzi na siebie albo wymaga poziomego scrolla, masz jasny sygnał, że układ opiera się na zbyt sztywnych założeniach. Wtedy poprawki trzeba zacząć od elementów strukturalnych, a nie od samego podkręcania fontu.
Co poprawiłbym najpierw w portalu z treściami
W serwisie takim jak Jscwiczenia.pl największy efekt zwykle dają trzy ruchy: ustawienie czytelnej bazy typograficznej w rem, usunięcie twardych wysokości z kart i sekcji oraz dopuszczenie zawijania dłuższych tytułów. To nie są spektakularne zmiany, ale właśnie one sprawiają, że strona przestaje się rozsypywać przy większym tekście.
- Ustal jedną bazę dla tekstu głównego i buduj skalę nagłówków od niej.
- Nie blokuj wysokości tam, gdzie treść może się wydłużyć.
- Daj przyciskom i linkom więcej przestrzeni pionowej, zamiast wciskać je w ciasne ramki.
- Testuj zmianę skali razem z układem, nie osobno.
Jeśli miałbym zostawić jedną praktyczną myśl, powiedziałbym tak: projektuj typografię tak, jakby użytkownik miał prawo ją powiększyć bez proszenia o zgodę. Wtedy strona jest czytelna, bardziej odporna na różne urządzenia i mniej kosztowna w utrzymaniu, bo nie trzeba ratować każdego komponentu osobno.
