Czytanie na 100%
Jest taki dziwny syndrom, który dotyka wielu grafików-webdesignerów, że po prostu MUSZĄ zrobić w layoucie teksty jasnoszarym fontem 10-11 px (czyli zaledwie jakieś 7,5 -8 pt), bo inaczej będą czuli się niezdrowo 
Ile to razy już słyszałem, że duże literki i kontrastowy tekst są nieładne i psują layout… Akurat. Jak ci psują layout, drogi grafiku, to znaczy że słabo ci idzie projektowanie…
Web design to nie sztuka dla sztuki, a sztuka użytkowa i jeśli tworzymy np. stronę z opisem produktu albo stronę artykułu, to tekst powinien być czytelny, bo artykuł istnieje po to, aby go czytano (bez trudu), a nie dla ozdoby.
Mam wrażenie, że miniaturowe blade fonty w projektach biorą się stąd, że graficy rysując layouty w Photoshopie operują na “lorem ipsum” i rzadko kiedy przyjdzie im do głowy, żeby postawić się w roli człowieka, który naprawdę czyta te wszystkie “lorem ipsumy”. Dla grafika blok tekstu to abstrakcyjny zapychacz pustej przestrzeni, a nie najważniejsza część strony czyli content.
Jak powinien wyglądać tekst, żeby był czytelny?
Kontrast
Zupełnie czarny tekst na białym tle źle wygląda na ekranie, ale nie przesadzajmy w drugą stronę. Zbyt mało kontrastowy tekst jest jeszcze bardziej męczący dla oczu. Zwykli użytkownicy nie mają w domach monitorów tak dobrych jak profesjonalni graficy. Wyobraźmy sobie jak może wyglądać nasz sajt na laptopie z kiepskim LCD w trybie oszczędzania energii…
#333 na #FFF jest dobrym benchmarkiem. Jaśniejsze odcienie szarości mogą już nie przejść testu zgodności z normami WCAG. To czy poziom kontrastu tekstu z tłem jest wystarczający i zgodny z zaleceniami W3C można łatwo sprawdzić korzystając z programu Contrast Analyser (jest wersja pod Windowsy i na Maca).
Interlinia
Domyślna interlina w HTMLu jest zbyt mała. Line-height: 140% wygląda lepiej.
Szerokość kolumny tekstu
Pojedynczy wiersz tekstu nie powinien zawierać więcej niż 10-15 słów – szersze bloki tekstu źle czyta się z ekranu komputera.
Rozmiar tekstu
Generalnie teksty o rozmiarze mniejszym niż ok. 10 pt/13 px nie należą do najłatwiejszych w czytaniu.
Wielkość tekstu przyjęta jako domyślna we wszystkich nowoczesnych przeglądarkach to:
100% = 1 em = 16 px = 12 pt
i nie jest to standard wzięty z powietrza. Warto zachować te wartości dla dłuższych tekstów. Taki domyślny rozmiar tekstu jest używany na tym blogu. Za duży? Wcale nie. Mamy coraz większe ekrany i używamy coraz wyższych rozdzielczości. Po co się męczyć?
Oto przydatna tabelka konwersji jednostek wielkości fontów w CSS (zaczerpnięta stąd) – domyślny rozmiar podświetlony kolorem:
Przeczytajcie manifest The 100% Easy-2-Read Standard na blogu IA Japan i głoście słowo boże!
Podobne wpisy
Komentarze (7)
przecier: #webdesign "Web design to nie sztuka dla sztuki, a sztuka użytkowa i jeśli tworzymy np. stronę z otagowany webdesign | flaker.pl napisał(a) to lip 16 09 at 18:24[...] najważniejsza część strony czyli content. Jak powinien wyglądać tekst, żeby był czytelny?" uxdesign.pl/czytanie-na-100 wykup reklamę [...]
Z powodu który podałeś uważam (i kiedyś się z takim grafikem mocno kłóciłem), że tradycyjne „lorem ipsum” nie powinno być używane przy projektowaniu layoutów w Internecie.
Co do tego 100% były zdaje się badania, w których teksty o tej wielkości okazywały się być już za wolne do skanowania, a jeśli chodzi o łatwość i szybkość czytania to nie było już dużych różnic między 13-16px.
@Robert
No to zależy też od czcionki – jedne wydają się trochę za duże, inne ok. Poza tym zależy od rozdzielczości – w 1680×1050 albo większej 12pt nie wydaje się takie wielkie
Książki też zwykle są składane chyba czcionką 10-12 pt i nie ma powodu, żeby na ekranie komputera (z którego przecież czyta się mniej efektywnie) używać mniejszych rozmiarów.
Chyba Nielsen coś pisał o tym, że „lorem ipsum” nie powinno być wykorzystywane przy projektowaniu – czy to interfejsu czy grafiki. Ja na ogół nieco zmniejszam czcionkę, delikatne odejście od 1em nie powinno sprawiać problemów.
A co uważasz o (bez)szeryfowości czcionek? W przypadku tekstów drukowanych problem ten dawno już został rozstrzygnięty. W webie można spotkać się z różnymi opiniami, choć swego czasu czcionki bezszeryfowe zdawały się wygrywać.
@Krzysztof
Ja bym się jakoś specjalnie nie bał szeryfów
Po 1. obserwujemy powrót do szeryfów, po 2. lorem ipsum to przeżytek, po 3. 130% wygląda lepiej niż 140%, po 4. letter-spacing w tym textarea mnie dobija.
