user experience design

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!