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! 😉
@Cm
Tak, masz oczywiście rację, ale określając wielkość na 12pt lub 16px przeglądarka wyświetli zbliżony rozmiar fontu. Myślę, że chodziło mi o to, że punkty są jakąś referencją dla każdego kto pisał coś i drukował w Wordzie 😉 Straszna to staroć! 😉
PS. Apple stosuje w OSX punkty, jako jednostki absolutne, ale nie odpowiadające punktom w świecie fizycznym.
Artykuł ma już dobre kilka lat, ale pozwolę sobie sprostować zestawienie jednostek pt oraz px (cal na ekranie komputera nie nadaje się do konwersji na px).
Polecam rekomendacje na http://www.w3.org/Style/Examples/007/units.en.html oraz zweryfikowanie, dzięki przykładowej grafice, czy cal na ekranie odpowiada jego rzeczywistej długości (przyda się linijka).
Kolejny ciekawy artykuł: http://css-tricks.com/css-font-size/
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.
@Krzysztof
Ja bym się jakoś specjalnie nie bał szeryfów 😉 http://www.loiterink.com/i-shot-the-serif/362/
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ć.
[…] najważniejsza część strony czyli content. Jak powinien wyglądać tekst, żeby był czytelny?" uxdesign.pl/czytanie-na-100 wykup reklamę […]
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.
@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.
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.