Kod CSS, który poprawi czytelność Twoich tekstów

User experience
kod CSS

Czytelność jest jednym z najważniejszych elementów prezentacji zawartości strony. To w jaki sposób artykuł zostanie zaprezentowany na stronie, może mieć wyraźny wpływ na to jak łatwo będzie go przeczytać i przyswoić. Zawartość strony internetowej powinna zostać przygotowana tak, aby ułatwiać śledzenie wzrokiem kolejnych akapitów oraz pozwolić na maksymalne skupienie się na stronie. Jak to zrobić wykorzystując kod CSS?

Reguły kaskadowych arkuszy stylów nie zawsze przygotowane są tak, aby zmaksymalizować pozytywny odbiór tekstu w ujęciu jego czytelności. Oto reguły CSS, na które należy zwrócić uwagę, jeżeli chcemy, aby nasze artykuły prezentowały się dobrze.

Rozmiar fontu

Deklaracja font-size to jeden z najważniejszych aspektów w wymiarze czytelności tekstu. To jak duży jest tekst, istotnie przekłada się na to czy łatwo możemy go przeczytać czy też nie. Nie istnieje jedyna słuszna linia, którą warto podążać ustalając wartości dla tej deklaracji, jednakże przyjmuje się iż podstawową wielkością jest 1em, który zwykle przekłada się na 16px. Im większy jest font, tym mniej znaków mieści się w linii, i tym dłuższy wizualnie jest cały artykuł. Dobrze jest zatem poeksperymentować. Według wielu znawców tematu optymalnym rozwiązaniem byłoby zapisanie w jednej linii ciągu tekstowego nie dłuższego niż 70 znaków ze spacjami. Robert Bringhurst w swojej książce The Elements of Typographic Style pisze o znakach w linii pomiędzy 45 a 70 (ze spacjami). Poniżej przedstawiam przykład takiego rozwiązania ze swojej strony. Po lewej widzimy większy rozmiar fontu i mniejszą ilość znaków w linii, po prawej oryginał:

sugerowana szerokość linii

Obecnie zastosowałem jednak taki kod CSS, który pozwala na wyświetlanie przeciętnie 90 znaków w wierszu na desktopie oraz około 55 znaków w wersji mobilnej. O ile powiększanie fontu na desktopie w moim przypadku raczej raziłoby po oczach (mógłbym jeszcze zwęzić obszar tekstowy, ale nie chcę optycznie wydłużać artykułu) ze względu na swoją wielkość, to rozwiązanie z wersji mobile wydaje się być optymalne. Jeżeli jednak prowadzicie serwis, który raczej nie posiada zbyt wielu długich artykułów, możecie obniżyć width diva odpowiedzialnego za przechowywanie obszaru tekstowego. Przykład z The Guardian pokazuje jak zrobić to dobrze:

Proporcje The Gaurdian

Na powyższym zrzucie widzimy jaki procentowo obszar zajmuje główna kolumna (z artykułem) na The Guardian – około 62%. Ten udział pozwala stosunkowo swobodnie czytać tekst (kolumna nie jest zbyt szeroka), a przy zachowaniu optymalnej ilości znaków ze spacjami (tutaj około 70) w wierszu, czytelność jeszcze się podwyższa.

Poniżej podam jeszcze inny przykład, tym razem zły, wystrzegajmy się takich proporcji pomiędzy nagłówkami a akapitami, wygląda to tragicznie:

proporcje fontów
Akapit został spikselowany celowo, treść nie ma tutaj znaczenia, chodzi nam o proporcje wielkości.

Wielkość powyższego akapitu to 16px, nagłówka h2 aż 42px. To za dużo. Prosty test pozwala dojść do wniosku, że 26px jest absolutnie wystarczające:

wielkosc h2

Wysokość linii

Deklaracja line-height jest istotna przede wszystkim ze względu na możliwość uniknięcia zlewania się tekstu. Ustawienie wysokości linii jest kluczowe, jeżeli chcemy aby nasz tekst był czytelny, dobrym pomysłem jest ustawienie jej w rozmiarze 50-60% większym niż font-size, ale często tekst wygląda dobrze także z większymi ustawieniami. Jeżeli ustawiliśmy font-size jako 1em, font-height możemy ustawić np. na 1.5em.

Font

Sam font to również bardzo istotny aspekt z punktu widzenia czytelności. Istnieją przynajmniej dwa obozy zwolenników różnych typów zapisów. W pierwszym obozie mamy ludzi, którzy preferują fonty szeryfowe czyli „z ogonkami”, natomiast w drugim mamy osoby, które preferują fonty bezszeryfowe czyli „bez ogonków”.

Krój bezszeryfowy w internecie jest bardziej powszechny, chociaż oczywiście znajdziemy wiele serwisów, w których fonty szeryfowe dominują. W moim odczuciu powinny być jednakże stosowane głównie w miejscach, w których zapisujemy coś w stylu wyróżnika, jeżeli w ogóle bardzo chcemy ich użyć. Bardzo rzadko uda nam się znaleźć serwisy, w których font szeryfowy jest zwyczajnie przyswajalny dla oka i nie przeszkadza w czytelności. Deklarację zapisujemy jako np. font-family: Helvetica; lub font-family: "Open Sans";. Według standardów W3 nazwy fontów zawierające więcej niż jedno słowo wymagają użycia cudzysłowu. W artykule o brytyjskim designie stron podawałem przykładem fontu szeryfowego, który został zastosowany na brytyjskiej wersji BBC (font-family: ReithSerif). Rzadko dzieje się tak, aby font szeryfowy był zwyczajnie przyswajalny i szybko nie męczył. Tutaj jednak ogonki nie kłują tak w oczy jak np. w przypadku Times New Roman, Baskerville, Georgia czy Garamond.

ReithSans
Źródło zrzutu: http://www.bbc.co.uk/gel/articles/introducing-bbc-reith

Odwrotnym przykładem jest krój w serwisie Wired, którego nachalność szeryfów jest tak duża, że utrudnia skupienie się na tekście (nie wspominając o świetle w wierszach, którego jest za mało):

Wired

Grubość fontu

Wartość deklaracji font-weight notujemy od 100 do 900. Im większa liczba, tym font jest grubszy (o ile jego autor to w ogóle zaprojektował). Nie powinniśmy stosować tej deklaracji w taki sposób, aby krój był bardzo cienki, wtedy tekst staje się nieczytelny, a nawet częściowo może zlewać się z tłem. Dla większości fontów dobrym rozwiązaniem jest użycie font-weight od 300 do 500. Rzeczą, o którą należy pamiętać projektując jakąkolwiek stronę jest to, że grubsze rozmiary fontów zostawiamy wyłącznie na nagłówki, jeżeli wtłaczamy je do akapitów tekst nie będzie czytelny.

Odstępy

Deklaracje padding oraz margin stosuje się po to, aby estetycznie rozdzielić poszczególne elementy tekstów na stronie. Zbyt mały padding sprawia, że tekst wygląda na zlany i trudno jest go skanować wzrokiem, zaś zbyt duży odstęp sprawia, że wygląda nienaturalnie.

Deklaracja margin to z kolei odstęp na zewnątrz danego elementu. Generalnie różnice pomiędzy padding a margin w samym tekście są stosunkowo niewielkie, margin ma większe znacznie w budowie layoutu całej strony, aczkolwiek teoretycznie możemy używać obu zapisów w tworzeniu odstępów np. pomiędzy kolejnymi akapitami, pomiędzy nagłówkiem a akapitem czy pomiędzy obrazkiem a akapitem.

Jednym z bardziej dobitnych negatywnych przykładów jest strona agencji Widoczni, która jest skonstruowana fatalnie. Na wielkości wyświetlania 100% (scroll w przeglądarce) praktycznie nie da się jej przeglądać nie zastanawiając się nad tym kto wpadł na pomysł, aby wszystko było tak wielkie, miało tak ogromne przerwy czy nagłówki zajmujące blisko 50% wysokości całego widocznego obszaru strony. Musiałbym zeskrinsztować wiele elementów, więc po prostu podlinkuję.

Podkreślenie

Użycie deklaracji text-decoration: underline; stosowane jest zwykle dla linków – zarówno wewnętrznych jak i zewnętrznych. Użytkownicy przyzwyczaili się do tego, że słowo lub cały zwrot wyróżnione w ten sposób, może prowadzić go do innego miejsca, z tego względu powinniśmy pamiętać o tym, że jeżeli szukamy sposobu na wyróżnienie linków, pierwszym z nich powinno być pomyślenie o text-decoration: underline;.

Efekty po najechaniu kursorem

Stosowanie tego typu deklaracji również ma związek głównie z odnośnikami. Jeżeli zastosujemy deklarację np. a:hover { color: gold; }, wtedy nasze linki tekstowe zmienią się na kolor złoty, użytkownik od razu będzie miał pewność, że link jest klikalny i za chwilę coś może się wydarzyć (po jego akcji). Efekty „na hover” to zwykle zmiana koloru, zmiana tła, delikatne powiększenie czy np. zmiana położenia (padding + transition-duration). Pamiętajmy jednak, że nie wszystko musi być mocno animowane i powinniśmy używać efektów najazdowych sensownie i w ograniczonej ilości.

NNG linki

Powyższy przykład pochodzi ze strony firmy Nielsen Norman Group, która specjalizuje się w UX. Stosując podstawowe, tradycyjne rozwiązania, sprawia, że jej artykuły cechują się dobrą czytelnością.


Podsumowanie

Artykuł miał za zadanie zestawić w jednym miejscu najważniejsze elementy wpływające na czytelność tekstu znajdującego się na stronie internetowej. Jest ona bardzo ważna w odbiorze tekstów i ich właściwym zrozumieniu, teksty które nie są czytelne często bowiem skanujemy tylko wzrokiem skupiając się na nagłówkach, pogrubieniach, listach czy zdjęciach. Stosując kilka podstawowych zasad stylowania kodu CSS, jesteśmy w stanie przedstawić użytkownikowi tekst, które nie odrzuca swoim wyglądem, a wręcz zachęcania do dokładnego zgłębienia.

Ostatnio zmodyfikowano: 28 listopada 2018

Radek

Z marketingiem internetowym związany od 2014 roku. Specjalizuje się w SEO oraz komunikacji wizerunkowej. Zainteresowany UX, designem, programowaniem oraz innowacyjnymi technologiami.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Załaduj więcej z działu User experience