I czemu jedna implementacja nigdy nie wystarczy.
Skalowanie czcionek to jeden z najważniejszych elementów dostępności. A jednocześnie jeden z najbardziej źle rozumianych.
Wielu projektantów i deweloperów zakłada, że skoro strona działa na mobilnym i na desktopie, to sposób skalowania tekstu też może być taki sam.
Niestety — nie może.
I jeśli spróbujemy użyć jednego podejścia „dla wszystkich”, tekst na urządzeniach mobilnych albo się nie powiększy, albo wyleci poza ekran, albo część treści po prostu zniknie.
W tym artykule wyjaśnię, dlaczego tak się dzieje, na czym polega różnica między środowiskiem web i natywnym mobile oraz jakie źródła trzeba znać, żeby wdrożyć to poprawnie — nawet jeśli nie jesteś developerem.
Choć na pierwszy rzut oka wygląda to podobnie („użytkownik chce większe litery”), technologia stojąca za tym procesem jest zupełnie inna.
W przeglądarce web czcionka skaluje się dzięki CSS
Przeglądarka skaluje tekst zgodnie z tym, co deweloper zapisze w CSS. Jeśli czcionka jest ustawiona na:
- px – nie zmieni swojego rozmiaru,
- rem / em / % – urośnie / zmniejszy się prawidłowo.
Dlaczego?
Bo piksele są jednostkami stałymi.
Deweloper mówi przeglądarce: „ten tekst ma zawsze mieć 16px”, więc przeglądarka trzyma się tej instrukcji, niezależnie od ustawień użytkownika.
Stąd pierwszy duży problem: tekst ustawiony w px nie będzie się prawidłowo skalował (a także nie spełni WCAG 1.4.4).
Jednostki rem (root em) są bardziej przewidywalne niż em, ponieważ skalują się one tylko w stosunku do rozmiaru czcionki ustawionej na elemencie głównym (<html>), co zapewnia spójne skalowanie tekstu. Zastosowanie rem jest preferowaną strategią dla skalowania samej czcionki (Font Scaling), zwłaszcza w kontekście mobilnym.
Z kolei jednostki względne, szczególnie rem, pozwalają czcionce zmieniać rozmiar bez psucia layoutu strony. To sprawdza się świetnie w webie, również na mobile, ale tylko w przeglądarce mobilnej, bo aplikacje natywne rządzą się swoimi prawami.
W aplikacjach mobilnych powiększaniem czcionki i ekranu steruje system, a nie CSS
Na telefonie użytkownik może ustawić sobie „większy tekst” w ustawieniach systemowych i wszystkie aplikacje powinny to respektować. Niestety zrobią to tylko wtedy, gdy deweloper użyje właściwych narzędzi.
Jeśli implementacja dotyczy aplikacji natywnej na iOS lub Androida, należy odwołać się do platformowych mechanizmów skalowania. Zawsze należy zaimplementować przewijalne kontenery dla treści, które mogą się przepełnić, i pozwolić widokom na rozszerzanie się, zamiast ustawiać stałe wymiary.
Na iOS działa Dynamic Type
Apple ma dynamiczny system skalowania czcionek, który wymaga użycia:
- gotowych stylów (
.body,.headlineitd.), - albo
UIFontMetricsdla czcionek niestandardowych.
Na iOS-ie, deweloperzy muszą aktywnie wspierać funkcję Dynamic Type. Oznacza to użycie odpowiednich wbudowanych stylów tekstu lub upewnienie się, że ich niestandardowe czcionki są skalowane dynamicznie przez system. Jeśli te ustawienia zostaną pominięte, rozmiar czcionki pozostanie zablokowany, niezależnie od tego, co użytkownik ustawi w systemie
Jak to zrobić?
Włącz wsparcie dla Dynamic Type (typ dynamiczny), funkcji systemowej, która skaluje czcionki zgodnie z preferencjami użytkownika.
- Używaj UIScrollView (lub
ScrollVieww SwiftUI) w widokach z dużą zawartością - Ustaw numberOfLines na 0 dla tekstu, który może się przepełnić
- Implementuj czcionki niestandardowe za pomocą UIFontMetrics.
Na Androidzie działa SP (scale-independent pixels)
Używaj SP (scale-independent pixels) dla całego tekstu, a nie DP.
- Używaj elementu
ScrollViewjako kontenera dla elementów układu, aby treść mogła się przewijać po powiększeniu.
- Pozwól widokom (
TextView) na rozszerzanie się, ustawiając wysokość na wrap_content.
Co najczęściej psuje skalowanie na mobile?
Bez względu na platformę, główne błędy są trzy:
1. Sztywne jednostki (px, dp) zamiast skalowalnych (rem, sp).
Tekst po prostu nie jest w stanie się powiększyć.
2. Sztywne kontenery
Czyli elementy o stałej wysokości. Jeśli tekst rośnie — nie mieści się. Można to fajnie przetestować np. używając Firefoksa. Tam da się powiększyć (w ustawieniach przeglądarki) tylko czcionkę i obejrzeć całe spektrum problemów.
3. Brak przewijania
Jeśli ekran ma dużo treści, a deweloper nie użył ScrollView, treść wychodzi poza ekran.
Z jakich źródeł korzystać, żeby to zrobić dobrze?
Wytyczne WCAG – 1.4.4 – Resize Text (AA)
https://docs.deque.com/devtools-mobile/2025.7.2/en/text-scaling dobry artykuł od Deque
A jeżeli potrzebujesz wsparcia w audytowaniu dostępności – sprawdź nasze autorskie narzędzie AUDITA11Y: https://tusietestuje.pl/p/audita11y-kurs/
