Dostępna typografia to jeden z najtańszych i najskuteczniejszych sposobów poprawy użyteczności i zgodności ze standardami dostępności – a jednocześnie obszar, który wciąż jest często niedoceniany.
Dobrze dobrane czcionki i odstępy decydują, czy użytkownik swobodnie „płynie” przez treść, czy rezygnuje po kilku sekundach.
Poniżej znajdziesz rozbudowany, praktyczny przewodnik dla projektantów, front‑endowców i osób odpowiedzialnych za dostępność serwisów WWW.
Czym jest dostępna typografia i dlaczego ma znaczenie
Dostępna typografia to taki dobór krojów pisma, rozmiarów, odstępów i sposobu formatowania, który pozwala jak największej liczbie osób komfortowo czytać treści – w tym osobom:
- z wadami wzroku (krótkowzroczność, daltonizm, zaćma),
- z dysleksją i trudnościami w koncentracji,
- korzystającym z powiększeń, czytników ekranu i własnych stylów CSS,
- czytającym na gorszym sprzęcie, w trudnych warunkach oświetleniowych.
Jest to też element wymogów WCAG 2.x (m.in. kryteria 1.4.3 Kontrast, 1.4.4 Zmiana rozmiaru tekstu, 1.4.12 Odstępy w tekście), które obowiązują w sektorze publicznym i de facto stają się standardem w komercyjnych serwisach.
Dobrze zaprojektowana typografia:
- zwiększa czas spędzony na stronie i liczbę przeczytanych treści,
- zmniejsza błędy użytkowników (np. przy wypełnianiu formularzy),
- poprawia odbiór marki (profesjonalny, spójny wygląd).
Jak dobierać krój pisma (font) z myślą o dostępności
Bezszeryfowe, proste kroje do tekstu głównego
Polskie wytyczne dotyczące dostępności stron i dokumentów zalecają stosowanie czytelnych, prostych krojów bezszeryfowych, takich jak Verdana, Tahoma, Roboto, Arial.
Dlaczego?
- na ekranach są zwykle lepiej czytelne niż kroje szeryfowe, zwłaszcza przy małych rozmiarach,
- mają prostą, przewidywalną konstrukcję liter,
- są dobrze dostępne w różnych systemach i oferują bogate zestawy znaków (w tym polskie diakrytyki).
Kroje szeryfowe (np. Georgia) możesz stosować w nagłówkach lub w dłuższych tekstach o charakterze „wydawniczym”, ale przy zachowaniu dużej ostrożności i testach czytelności.
Cechy kroju sprzyjające czytelności
Wybierając font dla serwisu WWW, zwróć uwagę na kluczowe parametry:
- Wysokość x (x‑height) – litery „x”, „a”, „o” powinny być dość wysokie w stosunku do wielkich liter, co zwiększa czytelność przy mniejszych rozmiarach;
- Otwarte światła i czytelne kształty – znaki takie jak „e”, „a”, „s” nie powinny być „ściśnięte”, a ich wnętrza zbyt małe; ułatwia to czytanie osobom z osłabionym wzrokiem;
- Wyraźne różnice między podobnymi znakami – szczególnie między „I” (i wielkie), „l” (el małe), „1” (jeden) oraz „0” (zero) i „O” (o wielkie);
- Brak przesadnych ozdobników – unikaj krojów dekoracyjnych, pisankowych, „fantazyjnych”, zwłaszcza w tekście głównym; są zdecydowanie trudniejsze do czytania;
- Wystarczająca grubość kresek – unikaj krojów z bardzo cienkimi liniami, które przy mniejszej wielkości czy na gorszych ekranach „znikają”.
Zasada praktyczna: jeśli font w rozmiarze 16–18 px na monitorze, z domyślną grubością i kontrastem, wydaje Ci się mało czytelny, szukaj innego.
Ile krojów pisma na jednej stronie?
Dobrym standardem w projektowaniu stron jest używanie maksymalnie 2–3 spokrewnionych krojów pisma (np. jeden do tekstu głównego, drugi do nagłówków, ewentualnie trzeciego do elementów UI). Dzięki temu:
- zachowujesz spójność wizualną,
- łatwiej budujesz hierarchię (nagłówki, treść, podpisy),
- nie przeciążasz użytkownika nadmiarem bodźców.
Jeżeli sięgasz po rodziny z wieloma odmianami (Light, Regular, Medium, Bold), zwykle wystarczą 2–3 grubości (np. Regular i Bold).
Korzystaj z popularnych, sprawdzonych fontów
Zaleca się, aby – o ile to możliwe – korzystać z powszechnie stosowanych czcionek, dobrze przetestowanych w kontekście dostępności. Mają one kilka przewag:
- są dobrze renderowane w większości systemów i przeglądarek,
- użytkownicy są do nich przyzwyczajeni (niższe obciążenie poznawcze),
- łatwiej dobrać do nich odpowiednie fallbacki (np. systemowe sans‑serif).
Przykłady rodzin chętnie używanych w projektach webowych: systemowe – Arial, Helvetica, Segoe UI, Roboto (Android), SF Pro (iOS); popularne web‑fonty – Roboto, Open Sans, Lato, Source Sans 3, Inter.
Przed ostatecznym wyborem zawsze przetestuj font na realnych treściach (z polskimi znakami, dłuższymi akapitami, różnymi nagłówkami).
Rozmiar tekstu – ile „px” to minimum?
Rozmiar tekstu głównego
W kontekście czytelności na ekranach zaleca się stosowanie większych rozmiarów tekstu, zwłaszcza dla treści głównej. W wytycznych dla projektowania stron WWW pojawia się rekomendacja, aby tekst główny miał wyjściowo co najmniej 16–18 px, a nagłówki były odpowiednio większe (np. 24–36 px). To dobrze koresponduje z tym, jak przeglądarki domyślnie ustawiają rozmiar tekstu (często właśnie 16 px).
W praktyce 16 px jest absolutnym minimum dla standardowego tekstu akapitowego, a 17–18 px daje zauważalnie wyższy komfort czytania, zwłaszcza na większych monitorach i przy większych odległościach od ekranu.
Skalowalność tekstu i WCAG
Wymogi WCAG 2.2 (kryterium 1.4.4) nakazują, aby tekst dał się powiększyć do 200% bez utraty funkcjonalności i potrzeby przewijania w poziomie.
Konsekwencje dla projektu:
- używaj relatywnych jednostek w CSS (em, rem) zamiast wszędzie px,
- unikaj sztywnych wysokości bloków (height) w elementach z tekstem – przy powiększeniu tekst może się nie mieścić,
- projektuj tak, aby przy powiększeniu treści layout „rozszerzał się” lub „łamany był” w dół, a nie w bok.
Dobrą praktyką jest ustawienie w html i body następujących bazowych wartości:
html { font-size: 100%; /* zwykle 16 px */ }
body { font-size: 1rem; /* dziedziczy 16 px, łatwe skalowanie */ }
Interlinia (line-height) – odstęp między wierszami
Zbyt mały odstęp między wierszami powoduje „zlewanie” się tekstu i utrudnia śledzenie linii, szczególnie osobom z dysleksją i problemami wzroku. Zbyt duży – rozrywa tekst, utrudniając płynne czytanie.
Rekomendowane wartości
Dla tekstu akapitowego warto stosować line-height co najmniej 1.5 (150% wielkości czcionki). Inne źródła podają zakres 1.2–1.45 jako „standard” typograficzny, jednak w kontekście dostępności lepiej iść w kierunku górnej granicy lub nieco wyżej. Polskie wytyczne dostępności cyfrowej wskazują, że odstęp między wersami w zakresie 1.15–1.5 wyraźniej rozdziela wersy i ułatwia czytanie treści.
Dla serwisów stawiających na dostępność warto w tekście głównym stosować line-height: 1.4–1.6, a w nagłówkach – zwykle nieco mniejszy (np. 1.2–1.3), aby zachować zwięzłość.
Związek z WCAG 1.4.12 (odstępy w tekście)
Wytyczne oparte na WCAG 1.4.12 „Text Spacing” mówią, że użytkownik powinien móc ustawić interlinię na min. 1.5 (150%) oraz odstępy po akapicie na co najmniej 2× wielkość czcionki, a layout nie może się przy tym rozsypać.
Aby spełnić wymagania: unikaj sztywno ustawionych wysokości bloków i testuj stronę z wymuszonymi stylami użytkownika (np. wtyczki dostępności, style użytkownika w przeglądarce).
Przykładowe ustawienie w CSS:
p {
font-size: 1rem; /* ok. 16 px */
line-height: 1.5; /* 150% */
margin-bottom: 1.5rem;
}
Odstępy między akapitami
Odstępy między akapitami pomagają segmentować tekst i są kluczowe dla użytkowników, którzy „skanują” stronę. Polskie wytyczne dostępności wskazują, że odstęp między akapitami powinien być większy niż między wersami, najlepiej przynajmniej dwukrotnie większy od odstępów między wierszami. W praktycznych poradnikach zaleca się ustawienie odstępów po akapitach na co najmniej 2× rozmiar czcionki.
Przykład: jeśli rozmiar czcionki = 16 px, a line-height = 1.5 (24 px), to odstęp między akapitami może wynosić np. 32 px (2 × 16 px) albo nawet więcej.
Unikaj „pustych enterów”
W edycji treści (także w CMS‑ach) odstępy między akapitami twórz za pomocą ustawień przed/po akapicie lub stylów CSS (np. margin-bottom), zamiast wstawiania wielu pustych linii.
„Puste Entery”:
- są nieczytelne dla czytników ekranu (mogą tworzyć wrażenie „pustych akapitów”),
- utrudniają utrzymanie spójności formatowania,
- komplikują późniejsze modyfikacje stylów.
Odstępy między literami i wyrazami (letter‑spacing, word‑spacing)
Domyślne wartości a dostępność
Większość nowoczesnych krojów jest projektowana z dobrymi, domyślnymi odstępami między literami i wyrazami. Wytyczne oparte na WCAG 1.4.12 sugerują jednak, że w razie potrzeby użytkownik powinien móc zwiększyć letter-spacing do 0.12 wielkości czcionki oraz word-spacing do 0.16 wielkości czcionki, bez psucia układu.
Przykład w CSS (dla użytkownika):
body {
letter-spacing: 0.12em; /* 12% rozmiaru fontu */
word-spacing: 0.16em; /* 16% rozmiaru fontu */
}
Czego unikać
- nie „ściśniaj” tekstu drastycznie (
letter-spacing: -0.05emi więcej w dół), - nie stosuj zwiększonego trackingu w dłuższych akapitach – może utrudniać rozpoznawanie wyrazów, zwłaszcza osobom z dysleksją,
- drobne modyfikacje (np.
letter-spacing: 0.01–0.03em) mogą być sensowne w nagłówkach, ale zawsze testuj je na realnych treściach.
Długość wiersza i szerokość kolumny
Rekomendowane zakresy
Optymalna liczba znaków w wierszu to ok. 66 znaków (wliczając litery, spacje, interpunkcję), a akceptowalny zakres to 45–75 znaków dla dłuższych tekstów.
Zbyt długie linie występują często w układach „na całą szerokość ekranu” przy dużych monitorach. Rozwiązaniem jest ograniczenie szerokości kolumny treści (np. max-width: 65ch) lub zastosowanie wielokolumnowego layoutu na bardzo szerokich ekranach.
Różnice między desktopem a mobile
Na urządzeniach mobilnych linie są z natury krótsze, ale rośnie liczba przeniesień; ważne jest utrzymanie czytelnej interlinii (1.4–1.6) oraz odpowiednio dużego rozmiaru fontu (16 px na mobile to często minimum).
Możesz zastosować typowe wartości dla bloku treści:
.main-content {
max-width: 65ch;
margin: 0 auto;
}
Wartość w ch odnosi się do szerokości cyfry „0”, co dobrze koreluje z liczbą znaków w linii.
Wyrównanie tekstu (align) i struktura akapitów
Wyrównanie – lewa strona zamiast justowania
Polskie wytyczne dostępności cyfrowej zalecają wyrównywanie tekstu do lewego marginesu. Justowanie (do obu marginesów) w webie opiera się na różnicowaniu przerw między wyrazami, co tworzy „dziury” w tekście i pogarsza czytelność, szczególnie osobom z dysleksją oraz korzystającym z powiększeń. Dla dłuższych tekstów stosuj więc align-left, a pełnego justowania unikaj.
Tekst centrowany rezerwuj dla krótkich elementów (np. pojedyncze nagłówki, hasła, call‑to‑action), nie dla całych akapitów.
Krótkie akapity, nagłówki i listy
Wytyczne dotyczące typografii dostępnej zalecają, aby strukturyzować treść następująco:
- dzielić tekst na krótkie akapity,
- używać tytułów i śródtytułów,
- korzystać z list wypunktowanych i numerowanych, aby ułatwić skanowanie treści.
Dla użytkowników z zaburzeniami koncentracji oraz czytających szybko z ekranu taki układ jest znacznie łatwiejszy do przyswojenia niż długie „ściany tekstu”.
Kontrast i kolor tekstu
Choć temat kontrastu wychodzi poza same kroje i odstępy, jest integralną częścią dostępnej typografii.
Minimalne kontrasty wg WCAG
Dla zwykłego tekstu kontrast tekstu do tła musi wynosić co najmniej 4.5 : 1, a dla tekstu powiększonego (≥ 24 px lub ≥ 19 px bold) wystarczy 3 : 1. Dzięki temu osoby z osłabionym wzrokiem nadal mogą czytać treść, a tekst pozostaje czytelny w różnych warunkach oświetleniowych.
Unikaj zestawień typu jasnoszary tekst na białym tle lub tekst w kolorze brandowym o małej luminancji na podobnym tle.
Kolor nie może być jedynym nośnikiem informacji
W polskich wytycznych pojawia się wyraźny zapis: kolor nie może być jedynym wizualnym sposobem przekazywania informacji.
Jeśli wyróżniasz:
- błąd (czerwony tekst),
- ważny fragment (np. zielony),
- stan elementu (aktywny/nieaktywny),
użyj także innych wyróżników:
- ikony (np. znak ostrzeżenia),
- pogrubienie, ramka, tło,
- tekst opisowy („Błąd: niepoprawny e‑mail”).
Kapitaliki, wielkie litery, podkreślenia i inne wyróżnienia
Unikaj tekstu pisanego w całości wielkimi literami
Polskie wytyczne dostępności mówią wprost: unikaj tekstu pisanego w całości wielkimi literami. Tekst „Z PISANIEM WIELKIMI LITERAMI” jest trudniejszy do skanowania (wszystkie wyrazy mają podobny „kształt”) i w kulturze internetowej bywa kojarzony z „krzykiem”. Wielkich liter używaj wyłącznie w krótkich etykietach przycisków (np. „OK”) lub w skrótowcach (FAQ, UX, API).
Podkreślenia tylko dla linków
Zaleca się nie stosować podkreśleń w tekście, z wyjątkiem linków. Podkreślenie jest odruchowo odbierane jako odnośnik, więc podkreślanie tekstu nieklikalnego wprowadza zamieszanie. Jeśli chcesz coś wyróżnić w treści, użyj pogrubienia lub kursywy, ewentualnie zmień kolor – pamiętając o kontrastach i zasadzie „kolor ≠ jedyny nośnik informacji”.
Konsekwentne formatowanie
Jedna z kluczowych zasad typograficznych brzmi: konsekwencja w formatowaniu. Oznacza to m.in. spójne zasady nagłówków (np. H1 – 32 px bold, H2 – 24 px bold), jednolite formatowanie list (bullet/numbering) w całym serwisie oraz uporządkowany system wyróżnień (np. pogrubienie – ważne pojęcia, kursywa – cytaty).
Praktyczny przykład – bazowa skala typograficzna w CSS
Poniżej prosty, dostępny „szkielet” typografii dla serwisu WWW:
html {
font-size: 100%; /* ~16 px */
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem; /* ~16 px */
line-height: 1.5; /* zgodnie z zaleceniami dostępności */
color: #111; /* dobra czytelność na białym tle */
background-color: #fff;
}
/* Treść główna */
p {
margin-top: 0;
margin-bottom: 1.5rem; /* odstęp między akapitami > odstęp między wierszami */
}
/* Nagłówki – wyraźna hierarchia, line-height 1.2–1.3 */
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.2;
margin-top: 2rem;
margin-bottom: 1rem;
}
h2 { font-size: 1.75rem; } /* ok. 28 px */
h3 { font-size: 1.5rem; } /* ok. 24 px */
h4 { font-size: 1.25rem; } /* ok. 20 px */
/* Listy */
ul, ol {
margin-top: 0;
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
/* Linki – podkreślenie jako sygnał klikalności */
a {
color: #0055cc;
text-decoration: underline;
}
/* Szerokość kolumny treści */
.main-content {
max-width: 65ch; /* ok. 45–75 znaków w wierszu */
margin: 0 auto;
padding: 1rem;
}
Ten przykład:
- trzyma się zaleceń dotyczących rozmiarów, interlinii i długości wiersza,
- respektuje zasadę podkreślania tylko linków,
- zapewnia wystarczający kontrast przy użyciu ciemnego tekstu na białym tle.
Jak wybierać font dla konkretnego projektu – proces
Sama znajomość zasad to za mało – potrzebujesz też procesu, który pozwoli połączyć potrzeby marki z wymogami dostępności.
Zacznij od analizy treści i kontekstu
Zgodnie z dobrymi praktykami projektowania typografii, najpierw warto:
- przeanalizować zakres projektu, wymagania i cele – co będzie dominować: długie artykuły, krótkie komunikaty, interfejs aplikacji?,
- ustalić grupę docelową – wiek, typowe urządzenia, ewentualne potrzeby (np. serwis dla seniorów),
- zrozumieć charakter marki – formalny/nieformalny, lekki/techniczny itd.
Inne fonty sprawdzą się w serwisie informacyjnym dla szerokiej publiczności, inne w panelu B2B z gęstymi tabelami danych.
Opracuj styl wizualny, ale przetestuj go na realnych treściach
Dobre praktyki (także te zalecane przez narzędzia projektowe) mówią o:
- tworzeniu tablic inspiracji i wizualnego stylu w oparciu o badania użytkowników, a nie wyłącznie preferencje estetyczne zespołu,
- testowaniu krojów pisma na rzeczywistej, istotnej treści – nie tylko na „Lorem ipsum”, ale na faktycznych akapitach z Twojej strony.
To pomoże wyłapać:
- problemy z polskimi znakami,
- mylne litery (I/l/1, O/0),
- za małą/za dużą wysokość x,
- zbyt „ciasną” interlinię przy konkretnych rozmiarach.
Sprawdź font w kontekście kolorów i kontrastu
Zacznij od czarnego tekstu na białym tle i białego tekstu na czarnym – zobacz, jak font „trzyma się” ekstremalnych zestawień, a następnie użyj kolorów marki i sprawdź, czy przy nich zachowany jest odpowiedni kontrast i czytelność.
Pamiętaj o wydajności (performance)
Typografia wpływa nie tylko na czytelność, ale również na wydajność ładowania strony –
- im więcej rodzin fontów i odmian (waga, kursywa, light, bold), tym większy czas ładowania,
- rozważ użycie systemowych fontów (bez pobierania z zewnątrz),
- jeśli korzystasz z webfontów, ogranicz liczbę wag (np. Regular i Bold) i używaj podzestawów znaków.
Typograficzna checklista dostępności dla serwisu WWW
Skorzystaj z poniższej listy kontrolnej przy przeglądzie projektu lub audycie dostępności:
Kroje pisma –
- [ ] używam prostych, czytelnych krojów bezszeryfowych dla tekstu głównego (np. Verdana, Tahoma, Roboto, Arial), bez ozdobników i zbyt cienkich linii,
- [ ] liczba rodzin fontów w serwisie nie przekracza 2–3,
- [ ] font zapewnia wyraźne rozróżnienie podobnych znaków (I/l/1, O/0),
- [ ] font posiada pełny zestaw polskich znaków.
Rozmiar, interlinia i odstępy –
- [ ] tekst główny ma co najmniej 16–18 px,
- [ ] interlinia dla tekstu głównego wynosi około 1.4–1.6,
- [ ] odstęp między akapitami jest większy niż między wierszami, co najmniej 2× rozmiar czcionki,
- [ ] nie używam „pustych Enterów” do tworzenia odstępów – korzystam z marginesów/ustawień akapitów.
Odstępy w tekście –
- [ ] nie ścieśniam drastycznie odstępów między literami,
- [ ] layout wytrzymuje zwiększenie
letter-spacingdo 0.12em iword-spacingdo 0.16em oraz line-height do 1.5 bez utraty funkcjonalności.
Długość wierszy i kolumny –
- [ ] liczba znaków w wierszu dla głównej kolumny mieści się w zakresie 45–75, zbliżona do ok. 66 znaków,
- [ ] szerokość kolumny treści jest ograniczona (np. max-width: 60–70ch).
Wyrównanie i struktura –
- [ ] dłuższy tekst jest wyrównany do lewego marginesu (bez pełnego justowania),
- [ ] długie bloki tekstu są podzielone na sensowne akapity,
- [ ] stosuję nagłówki, listy i inne elementy struktury, aby ułatwić skanowanie treści.
Kontrast i kolor –
- [ ] kontrast tekstu zwykłego względem tła jest ≥ 4.5 : 1,
- [ ] kontrast powiększonego tekstu (≥ 24 px lub ≥ 19 px bold) jest ≥ 3 : 1,
- [ ] kolor nie jest jedynym nośnikiem informacji – ważne treści mają też inne oznaczenia (ikona, tekst, styl).
Styl wyróżnień –
- [ ] nie stosuję tekstu pisanego w całości wielkimi literami w dłuższych ciągach tekstu,
- [ ] podkreślenia stosuję wyłącznie dla linków,
- [ ] formatowanie jest konsekwentne w całym serwisie (nagłówki, listy, wyróżnienia).
