TypografiaWeb Design

Typografia internetowa – zwiększ czytelność na stronach www

Typografia internetowa odgrywa dzisiaj ogromną rolę w projektach stron i aplikacji internetowych. Pomimo tego, że obecne strony www posiadają coraz więcej grafik, animacji lub zdjęć, to właśnie tekst jest głównym elementem podczas ich przeglądania. Odpowiednio dobrany kolor, krój czy styl czcionki gwarantuje, że nasz artykuł przyciągnie uwagę większej liczby odwiedzających.

Powinniśmy więc znać i stosować zasady typografii w webdesignie, które sprawią, że czytelnicy z łatwością znajdą informacje, których szukają. W artykule tym pomogę Ci je poznać oraz przedstawię jak należy je stosować.

Na samym początku, zapamiętajmy – istnieje jedna, główna zasada dotycząca typografii internetowej:

Tekst powinien być zawsze łatwy do przeczytania

Jak wspominałem wcześniej, w artykule o trendach w webdesignie, dzisiaj częściej przeglądamy zasoby internetu na urządzeniach mobilnych niż komputerach. Z tego względu projektując strony www musimy zadbać o to, aby tekst był zawsze czytelny. Niezależnie od urządzenia, na którym witryna lub aplikacja jest wyświetlana.

Można wyróżnić kilka sposobów, dzięki którym osiągniemy ten cel:

  • wykorzystanie gotowego szablonu, który od razu będzie posiadał odpowiednio dopasowaną typografię,
  • stworzenie różnych wersji witryny, jednej dla desktopów, a drugiej dla urządzeń mobilnych,
  • użycie technik RWD (Responsive Web Design) za pomocą stylów CSS i media queries.

Pierwsze dwa sposoby nie wymagają zbyt dużego wytłumaczenia. Odpowiednio dobrany szablon zapewni nam na starcie czytelność tekstów, bez względu na wielkość wyświetlacza.
Z kolei od projektowania kilku różnych wersji witryny, w dzisiejszych czasach, odchodzi się całkowicie.

Odkąd Google zmienił algorytm pozycjonowania witryn w wyszukiwarce, promując te dostosowane do RWD, wykorzystywanie tej technologii jest jedynym, słusznym sposobem. Po więcej informacji w temacie stron www przyjaznych dla urządzeń mobilnych odsyłam do artykułów opublikowanych przez Google na stronach dla developerów.

Jeśli chcesz sprawić, by typografia internetowa dobrze współgrała z wyświetlaczami urządzeń Twoich użytkowników, przeczytaj poniższy tekst. Poznasz jak tego dokonać z pomocą CSS, ucząc się kilku dodatkowych technik.

Typografia internetowa – czyli jak zwiększyć czytelność tekstów

Rozmiar czcionki określany jest za pomocą odpowiedniego stylu w pliku CSS. Warto zaznaczyć, że jeśli nie określimy wielkości czcionki to standardowo zostanie przypisana domyślna wartość dla przeglądarki. Przeważnie jest to dokładnie 16px.

Do zmiany rozmiaru czcionek używamy właściwości o nazwie font-size. Standardowa deklaracja może przedstawiać się następująco:

p {
font-size: 1.2em;
}

W przykładzie użyto jednostki em, która jest skalowalna wraz ze zmianą podstawowego rozmiaru określonego dla dokumentu. Jeśli aktualna wielkość czcionki wynosi np. 16px, to 1em odpowiada 100%, czyli nadal 16px. Analogicznie 2em oznaczać będzie 200% czyli 32px itd. Jednostki em stają się bardzo popularne z powodu ich automatycznego skalowania, a przez to bycia przyjaznymi w projektowaniu na urządzenia mobilne.

Oprócz jednostek typu px i em rozmiar czcionek określimy jeszcze w punktach (pt) i procentach (%). Dokładne wytyczne doboru wielkości czcionek na responsywnych stronach internetowych określono w odpowiednim artykule Google.

typografia internetowa

Główne zasady, na których opiera się typografia internetowa, przedstawiają się następująco:

  • Określ podstawowy rozmiar czcionki dla dokumentu równy 16px. W miarę potrzeb dopasuj wielkość na podstawie właściwości używanej czcionki.
  • Używaj skalowalnych rozmiarów czcionek w odniesieniu do określonego rozmiaru podstawowego.
  • Zachowuj odpowiednią przestrzeń pomiędzy następującymi po sobie wierszami z tekstem. Rekomendowana wysokość, określana własnością CSS line-height, wynosi 1.2em (czyli 120%). Jest to standardowa odległość definiowana przez przeglądarkę.
  • Nie używaj zbyt wielu rodzajów i wielkości czcionek na stronie www. Nadmierna różnorodność doprowadzi do zbyt skomplikowanego układu strony www i ogólnego bałaganu.

Przyjrzyjmy się teraz dokładniej każdemu z powyższych zaleceń oraz uzupełnijmy tą listę o kilka dodatkowych.

1. Określ podstawowy rozmiar czcionki

Zasada jasno mówi, że na początku powinniśmy zadeklarować główny rozmiar czcionki dla naszej strony www lub aplikacji internetowej. Rozmiar ten powinien wynosić dokładnie 16px. W większości przypadków używa się odpowiedniej deklaracji stylu CSS dla całego dokumentu HTML, czyli:

body {
font-size: 16px;
}

lub

html {
font-size: 16px;
}

wpis3_2

2. Używaj skalowalnych rozmiarów czcionek

Po zdefiniowaniu podstawowej wielkości czcionek dla całej strony www na poziomie 16px, musimy określić rozmiar pozostałych elementów. Wykorzystywane nagłówki typu H1, H2 lub H3, paragrafy, akapity i inne bloki tekstu powinny być odpowiednio większe lub mniejsze od głównego rozmiaru.

Z definicji nagłówków wiemy, że są one większe niż np. paragrafy. Zgodnie z rekomendacją Google powinniśmy dobierać ich rozmiary w odniesieniu do ustawionych wcześniej 16px. Z pomocą przychodzą nam dwie jednostki: em lub procenty. W naszym przykładzie posłużymy się jednostką em.

Chcemy, aby rozmiar wszystkich paragrafów p na naszej stronie odpowiadał dokładnie podstawowej wielkości. Użyliśmy więc wartości 1em określającej nic innego jak 100% z 16px, czyli 16px. Z kolei wszystkie nagłówki H1 musimy mieć 2,5 raza większe od paragrafów. Łatwo to określić ustawiając analogicznie wartość font-size na poziomie 2.5em.

Takie ustawianie rozmiarów nazywa się właśnie relatywnym. Oznacza, że niezależnie od tego gdzie zadeklarujemy rozmiar czcionki, zawsze będzie ona większa lub mniejsza od podstawowych 16px. Takie  zachowanie jest o tyle ważne, że gwarantuje nam zawsze prawidłowo dopasowaną wielkość tekstu. Zależność między większymi nagłówkami, a mniejszymi paragrafami będzie zachowana zarówno na małych ekranach telefonów jak i urządzeniach o dużo większych rozdzielczościach (np. telewizorach).

wpis3_3

Dodatkowo, dzięki takiemu użyciu jednostek font-size jesteśmy pewni, że nasza strona www będzie zawsze czytelna. Nawet wtedy, gdy odwiedzą ją użytkownicy niewielkich ekranów smartfonów.

3. Zachowaj pionową przestrzeń między kolejnymi wierszami tekstu

Na czytelność tekstów pojawiających się na stronach www znaczący wpływ, oprócz rozmiarów czcionek, ma pionowy odstęp. Nie bez znaczenia Google dokładnie rekomenduje minimalną jego wartość.

Podczas przeglądania stron internetowych na ekranach naszych komputerów bez problemu odczytamy zdania, które są ułożone blisko siebie. Problem jednak zaczyna się w przypadku mniejszych ekranów. Na tego rodzaju wyświetlaczach ściśnięty tekst zaczyna być bardzo nieczytelny. Musimy więc wtedy stronę niepotrzebnie powiększać, by móc cokolwiek odczytać.

Z tego względu przy projektowaniu dzisiejszych stron i aplikacji www zaleca się stosowanie odległości pionowej między wierszami minimum 1,2 razy większej od wysokości samego tekstu. Oznacza to, że np. jeśli podstawowa czcionka ma wielkość 16px to pionowa przestrzeń powinna wynosić trochę ponad 19px.

wpis3_4

Oczywiście również w tym przypadku z pomocą przychodzą nam, poznane wcześniej, relatywne jednostki. Za pomocą stylów CSS pionową odległość określamy własnością line-height.

p {
font-size: 16px;
line-height: 1.2em;
}

Należy jednak zauważyć, że wartość 1.2em lub inaczej mówiąc 120%, jest wartością minimalną. Przyjąć można, że odległości w przedziale 1,3em – 1.8em na pewno nie obniżą czytelności tekstów. Śmiało można powiedzieć, że takie wartości znacząco user experience poprawią.

4. Uważaj na odstęp pomiędzy linkami

Przy okazji omawiania optymalnej wartości line-height zwróćmy jeszcze uwagę na odstęp pomiędzy linkami. Na urządzeniach przenośnych, szczególnie odsyłacze, potrzebuję więcej przestrzeni dookoła. Często deklarujemy linki na przykład w nieuporządkowanych listach typu ul. Zadbajmy o to, aby dla tego rodzaju wierszy tekstu ustawić odległość na poziomie wyższym niż dla reszty. Wartość 200% powinna być odpowiednia.

ul {
line-height: 2em;
}

Dopasujmy wysokość do designu projektowanej strony lub aplikacji internetowej. Jednak zawsze zachowując większą przestrzeń pionową niż dla zwykłych paragrafów. Czytelnicy na pewno odczują większy komfort, gdy będą z nich korzystać  🙂

5. Ogranicz liczbę czcionek i wielkość skali typograficznej

Nikt z nas nie lubi bałaganu na stronie www. Tego rodzaju treści albo źle się przegląda, albo nie ogląda się wcale. Dlatego należy dokładnie przestrzegać zasady – im mniej różnorodności w rodzajach i rozmiarach czcionek tym lepiej.

wpis3_5

Jeśli zamierzamy na przykład skorzystać z popularnej, bezszeryfowej czcionki Roboto nie dodawajmy akapitów z zupełnie innymi czcionkami szeryfowymi. Sprawdźmy wpierw czy nie istnieje inna wersja wybranego fontu. Do czcionki Roboto możemy więc dobrać Roboto Condensed. Sprawi to, że nasza witryna będzie wyglądała na spójną. Dzięki wykorzystaniu dwóch rodzajów podobnych czcionek zawsze będziemy mogli wyróżnić nagłówki innym krojem niż akapity.

Podobna zasada dotyczy rozmiarów czcionek. Ustalmy na początku wielkości podstawowych rodzajów tekstu.

body {
font-size: 16px;
}
p, span {
font-size: 1.1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}

Podczas projektowania trzymajmy się zadeklarowanych wartości. Najważniejsze – pilnujmy, aby zróżnicowanych pod względem rozmiaru czcionek było jak najmniej. Zbyt duża różnorodność sprawi, że na urządzeniach mobilnych odwiedzający po prostu się pogubią. Potrzebne informacje nie zostaną przez nich odnalezione, a nasza witryna nie zostanie przez nich dobrze zapamiętana.

6. Używaj wysokiego kontrastu

Typografia internetowa została ogólnie określona w omówionych powyżej zaleceniach. Istnieje jednak w tym zagadnieniu kilka dodatkowych zasad, które warto przestrzegać projektując strony www lub aplikacje internetowe.

wpis3_6

Bardzo ważnym aspektem jest utrzymywanie dużego kontrastu pomiędzy czytanym tekstem a jego tłem. Im większy i lepszy będzie kontrast tym lepsza będzie czytelność naszych tekstów. Należy unikać źle dobranych kolorów. Nigdy czytelnym nie będzie ostro żółty tekst na białym tle.

Warto w tym miejscu wspomnieć o dwóch ciekawych miejscach w sieci, które pomogą nam wybrać odpowiednią paletę kolorów. Jeśli jeszcze ich nie znacie, zachęcam do odwiedzenia:

Zbyt niski kontrast pomiędzy tekstem a tłem sprawia, że czytanie go staje się bardzo męczące. Odczuwalne jest to przede wszystkim, gdy mamy do czynienia z wieloma linijkami tekstu.

Tekst jest łatwy do przeczytania gdy znajduje się na przykład:

  • na mocno rozmytym tle, rozmyte tło jest dość popularnym sposobem dodania głębi na stronach,
  • na osobnej warstwie, która jest w kolorze innym niż kolor całego tła.

7. Pamiętaj o odpowiedniej długości wierszy

Weźmy pod uwagę jeszcze jedno ważne spostrzeżenie dotyczące typografii na stronach www. Patrząc na cały blok tekstu, który dajemy odwiedzającym do przeczytania, czy podajemy go na pewno w odpowiedniej formie?

Załóżmy, że nasz czytelnik zaczyna czytać pierwszy wiersz naszego długo przygotowywanego artykułu. Czytając pierwsze kilka linijek czuje, że wykonuje dość sporą pracę i zaczyna być przytłoczony ogromem wiadomości. Po czym przestaje czytać i przewija stronę w dół, by znaleźć informację szybciej, łatwiej, bardziej przystępnie.

Co jest powodem takiego zachowania?

Zbyt długa pojedyncza linijka tekstu

Możesz wierzyć lub nie, ale czytanie na stronach www rozciągniętych w nieskończoność, od lewej do prawej, wierszy tekstu, jest dla Ciebie dużo bardziej uciążliwe niż czytanie większej liczby, krótszych wierszy. Przyjęto, że optymalną długością pojedynczej linii tekstu jest ok. 50-60 znaków. Sporo dłuższe wiersze męczą czytelnika i nie pozwalają mu się skupić na tym czego dany tekst dotyczy.

wpis3_7

Z kolei zbyt krótkie wiersze sprawiają, że odwiedzający muszą zbyt szybko ruszać oczami z jednej strony do drugiej. Objawia się to niczym innym jak wybiciem czytającego z rytmu i przegapieniem kluczowych treści.

Dlatego zawsze tworząc strony www projektujmy miejsce z tekstem takie, aby nigdy nie przeszkadzało w prawidłowym odbiorze. Świetnym sposobem na przyciągnięcie uwagi czytelnika jest rozpoczęcie artykułu kilkoma, wyróżnionymi i krótkimi wierszami. Taka niejako krótka, acz treściwa reklama artykułu, zachęci użytkownika do sprawdzenia go w całości.

8. Utrzymuj krótkie paragrafy

Ostatnią zasadą, na której chciałbym się skupić jest długość akapitów. Udowodniono, że ok 75% wszystkich internautów nigdy nie czyta informacji na stronie internetowej od początku do końca, dokładnie zdanie po zdaniu. Skupiają się oni w zdecydowanej większości na tych elementach artykułów, które ich najbardziej interesują. Dlaczego więc my, jako projektanci stron www, nie możemy im w znalezieniu tych informacji pomóc?

Jeśli nie chcemy, aby nasi użytkownicy szybko przenieśli się na konkurencyjną stronę zadbajmy, aby informacje przekazać im jak najszybciej. Pomogą nam w tym krótkie paragrafy tekstu.

wpis3_8

Skrócone paragrafy zawierające wartościowe informacje nasi czytelnicy szybko dostrzegą. Gdy natkną się na taki, pozbawiony kluczowych informacji, szybko go ominą i przejdą do kolejnego. Bloki tekstu, które będą często od siebie oddzielone większym odstępem staną się dużo łatwiejsze do znalezienia i przeczytania. Analiza treści artykułu przez odwiedzającego będzie nie tylko szybsza, ale i dokładniejsza.

Dzięki temu prostemu trikowi nasz użytkownik znajdzie interesujące go informacje szybko i z dużo większą ochotą wróci w przyszłości po kolejne.

Krótkie podsumowanie

Projektując dzisiejsze strony i aplikacje internetowe powinniśmy nie tylko znać specjalne technologie, ale również prawa jakie rządzą ich odbiorem przez użytkowników. To właśnie dla nich przygotowujemy miejsca w sieci, które są przez nich odwiedzane. Typografia internetowa jeszcze nigdy nie była tak ważnym elementem stron www. Odpowiednie jej wykorzystywanie jest kluczem do sukcesu naszych witryn. Nic innego, jak właśnie informacje, przekazywane za pomocą tekstu, jeszcze długo będą głównym sposobem dialogu na stronach internetowych.

Typografia internetowa – zwiększ czytelność na stronach www
Ocena: 4.5 (2 głosów)
Łukasz Żurawski

Łukasz Żurawski

CEO/Właściciel at Lukante
Założyciel Lukante. Z branżą IT związany od 9 lat. Na co dzień stara się być na bieżąco z trendami nowoczesnych technologii internetowych. Stale pogłębiając swoją wiedzę w dziedzinie Front-Endu stara się wykorzystywać zdobyte doświadczenie przy każdym, nowym projekcie.
Łukasz Żurawski
Spodobał Ci się artykuł? Podziel się z innymi!
FacebookTwitterGoogle+LinkedInPin It