Typografia, hierarchia i czytelność w mediach cyfrowych
Jak używać czcionki, aby prowadzić oko i wyrazić wiadomość — zarówno na ekranie, jak i na papierze
Wstęp
Duża część rzemiosła mediów cyfrowych dotyczy czegoś, co wielu ludzi nie zauważa, jeśli jest robione dobrze: typografii. Czcionka niesie przesłanie, a zła decyzja typograficzna może sprawić, że nawet najlepszą treść będzie trudno czytać. Dlatego typografia to dyscyplina, którą musisz opanować równie solidnie jak wybór kolorów i obróbkę obrazu.
Rodziny czcionek i ich osobowość
Czcionki dzielą się ogólnie na rodziny, z których każdy ma swoją własną ekspresję. Czcionkiszeryfowe mają małe stopy na końcu pociągnięć liter i są postrzegane jako klasyczne i poważne — są często używane do długich tekstów w druku. Czcionki bez szeryfów brakuje nóg, wydają się prostsze i bardziej nowoczesne, i dlatego są najszerzej rozpowszechnionym typem czcionki na ekranach. Czcionki monospace mają tę samą szerokość dla każdego znaku i są typowo używane do kodu. Czcionki wyświetlające są zaprojektowane jako dekoracyjne i działają najlepiej w dużych nagłówkach, nigdy w tekście głównym.
Koncepcje podstawowe: kerning, śledzenie i odstęp linii
- 01Kerning — odstęp między dwoma określonymi literami, regulowany tak, aby pary takie jak 'AV' czy 'To' nie wyglądały zbyt ciasno ani rzadko.
- 02Tracking (odstęp liter) — ogólny odstęp między wszystkimi literami w słowie lub tekście, często nieco zwiększony w wersalikach, aby ułatwić czytanie.
- 03Odstęp linii (leading) — odległość między liniami tekstu. Zbyt mały odstęp linii utrudnia czytanie tekstu; zbyt duży odstęp linii dzieli akapit wizualnie.
- 04Wysokość x — wysokość małych liter pisma bez wydłużeń ani skrótów, np. małe "x". Duża wysokość x czyni pismo bardziej czytelnym na małych ekranach.
Hierarchia — prowadź wzrok na całej stronie
Hierarchia wizualna mówi czytelnikowi, co powinno być przeczytane najpierw, następnie i na końcu. Tworzy się to zazwyczaj za pomocą wielkości, wagi (cienki, normalny, pogrubiony) i koloru: duży, pogrubiony nagłówek przyciąga oko najpierw, średni podtytuł następnie, a brutto tekst na końcu. Bez wyraźnej hierarchii wszystko jest równie ważne na stronie — a gdy wszystko krzyczy równie głośno, nic się nie słyszy.
Czcionki i ich typowe użycie
| Kategoria | Cecha | Typowe zastosowanie |
|---|---|---|
| Szeryfik | Małe stópki do liter, klasyczne wyrażenie | Długie teksty w druku, poważne wyrażenie |
| Sans-serif | Proste kreski bez szeryfów | Ekrany, sieć, nowoczesne wyrażenie |
| Monospace | Wszystkie znaki mają tę samą szerokość | Kod, dokumenty techniczne |
| Wyświetlacz | Dekoracyjna, często unikalna forma | Duże nagłówki i logotypy, nigdy nie tekst główny |
Kontrast i dostępność
Typografia nie jest tylko estetyką — jest to również wymóg dostępności. Zgodnie z WCAG (Web Content Accessibility Guidelines), zwykły tekst musi mieć stosunek kontrastu co najmniej 4,5:1 do tła, podczas gdy duży tekst może mieć co najmniej 3:1. Niski kontrast, np. jasnoszary tekst na białym tle, może wyglądać elegancko na moodboardzie, ale rzeczywiście czyni tekst nieczytelnym dla wielu użytkowników — również tych bez upośledzenia wzroku, jeśli siedzą w silnym słońcu na ekranie mobilnym.
Pułapki typograficzne
- 01Zbyt mały tekst na urządzeniu przenośnym — zawsze testuj projekt na realnym małym ekranie, a nie tylko na dużym ekranie designu.
- 02Zbyt długa długość linii — zbyt szerokie kolumny tekstu utrudniają oku powrót do następnej linii.
- 03Tekst wyśrodkowany w długich akapitach — wygląda pięknie w małych ilościach, ale jest zmęczający do czytania w całości.
- 04Brak zgodności z licencją czcionki — ładna czcionka jest bezużyteczna, jeśli nie masz prawa jej używać w gotowym produkcie.
“Dobra typografia jest niewidoczna — znika i pozostaje tylko wiadomość. Zła typografia to jedyne, co czytelnicy pamiętają.”
— Refleksja zawodowa na temat typografii w mediach cyfrowych