Typografia internetowa, czyli jak sprawić, aby Twój tekst był czytelny

Czy zdarzyło Ci się wejść na stronę, która była tak pstrokata i chaotyczna, że już po kilku sekundach postanowiłeś sprawdzić, co tam u konkurencji? Albo z drugiej strony – czy natknąłeś się kiedyś na witrynę wyglądającą, jakby ktoś spędził nad nią 5 minut w Paintcie i która przytłoczyła Cię kolumną nieczytelnego tekstu?

Zasadnicze pytanie brzmi jednak: jak się przed tym uchronić w przypadku własnej strony?

Treści na stronie – czy wygląd ma znaczenie?

Często się słyszy, że forma to sprawa drugorzędna, a przede wszystkim liczy się treść. Jednak w internecie takie założenie już dawno przestało się sprawdzać. Co z tego, że Twój przekaz będzie szczytowym osiągnięciem marketingu, jeśli do nikogo nie trafi – będzie nieczytelny, trudny w nawigacji czy po prostu odpychający wizualnie.

Typografia stron internetowych to dziś kluczowe zagadnienie, którego nie możesz pominąć przy projektowaniu swojej witryny.

Odpowiedni font, szerokość wiersza, justowanie, kerning – to wszystko, a nawet więcej – ma wpływ na User Experience. Przy pierwszym zetknięciu z tym zagadnieniem może jednak wydawać się, że związanych z typografią pojęć i zmiennych jest niesamowicie dużo.

Jak zatem się w tym nie pogubić i na co przede wszystkim zwrócić uwagę? Spokojnie, ogarniemy to razem!

Rola typografii – komu to potrzebne?

Na początku należałoby wyjaśnić, o co chodzi z tą całą typografią. Co to takiego? Najprościej mówiąc, to wszystkie działania mające na celu właściwe uporządkowanie tekstu: od kształtu pojedynczych liter po rozmieszczenie poszczególnych akapitów, nagłówków czy przypisów.

Nadrzędną typograficzną misją jest uczynienie treści czytelną dla odbiorcy, jej forma ma po prostu nie przeszkadzać w czytaniu – tylko tyle i aż tyle. Jednak z tego względu już na samym początku projektowania swojej strony internetowej powinieneś doprecyzować, do kogo ją kierujesz.

Krój pisma, czcionka, font – wyjaśnijmy to raz na zawsze

W definicji podstawowych pojęć typografii panuje niestety spory bałagan. Zapewne w różnych miejscach spotkałeś się z takimi terminami jak krój pisma, czcionka i font. Zarówno amatorzy, jak i specjaliści chętnie żonglują tymi określeniami, co może zmylić osobę spoza branży. Wbrew pozorom po wejściu w szczegóły nie oznaczają one jednak tego samego. Jak to zatem wygląda?

Gdybym miał pisać przystępny słowniczek pojęć na ten temat, zrobiłbym to tak:

• Krój pisma – zbiór znaków, które mają wspólne cechy i są do siebie dopasowane.
• Czcionka – fizyczny nośnik kroju pisma stosowany w tradycyjnym druku, najczęściej w postaci prostopadłościanów. Każdy z nich zawiera określony znak, który można odbić na papierze.
• Font – cyfrowy nośnik kroju pisma, zawierający nierzadko wszystkie odmiany danego kroju. Wykorzystuje się go w wirtualnej przestrzeni (w Wordzie, postach na social mediach, treściach na stronie WWW itd.). W pewnym uproszczeniu jest do zatem „czcionka internetowa”.

„Prawdziwa” czcionka

Jak widać, różnice między tymi pojęciami są całkiem spore. Z tego powodu profesjonaliści nierzadko się oburzają, gdy ktoś nazwie font czcionką. Czy słusznie?

Nie do końca. Po pierwsze dlatego, że złość piękności szkodzi, a po drugie trudno nie popełniać tego błędu, skoro we wszelkich dostępnych nam edytorach spotykamy się właśnie z nazwą „czcionka” w miejscu, gdzie powinien być font.

Warto znać te różnice, aby się nie pogubić w komunikacji z projektantem. Na co dzień nie ma to jednak większego znaczenia i można stosować te pojęcia wymiennie.

Typograficzny podział krojów pisma

Istnieją cztery podstawowe rodzaje krojów pisma:

• Szeryfowe (serif) – charakteryzują się wydłużeniami górnymi i dolnymi (szeryfami) większości krawędzi znaków. Z pewnością kojarzysz ten rodzaj kroju z Times New Roman czy Georgii.
• Bezszeryfowe (sans serif) – nie zawierają żadnych wydłużeń. Popularnymi krojami są tu Calibri, Arial i Helvetica.
• Skryptowe – mają za zadanie naśladować odręczny charakter pisma, np. Dreaming Outloud Script Pro.
• Ozdobne – to najbardziej zróżnicowana grupa. Rolą tych krojów jest przykucie uwagi swoją formą. Przykładem może tu być Algerian.

Rodzaje krojów pisma

Jak dobrać właściwy font?

Przy wybieraniu odpowiedniego kroju pisma na swoją stronę internetową pamiętaj przede wszystkim o tym, że nie jest to publikacja książkowa. Niby banalne, jednak w trakcie pracy czasem o tym zapominamy, a w praktyce różnice są tu ogromne.

Obecnie dużą część treści przeglądamy na niewielkich ekranach urządzeń mobilnych. Dlatego kluczowe jest to, jak dany font prezentuje się przy znacznym pomniejszeniu. Nikt przecież nie chce rozszyfrowywać znaków przypominających kolonię mrówek.

O ile w powieściach kroje szeryfowe dzięki swoim wydłużeniom ułatwiają czytelnikowi lekturę tekstu głównego, to na smartfonie zdecydowanie już stanową utrudnienie. Lepiej sprawdzą się tu odmiany bezszeryfowe.

Wpływ na czytelność ma też kontrast grubości linii w obrębie pojedynczych znaków. Najlepiej, aby był on jak najmniejszy.

Kontrast pisma

Nie należy również zapominać o tzw. wysokości x danego kroju pisma, czyli o wysokości małych liter (bez wydłużeń górnych i dolnych) w porównaniu do wielkich. Im większy jest ten parametr, tym łatwiej będzie odczytać font na niewielkim ekranie.

Wysokość krojów pisma

Warto też dostosować krój pisma do jego przeznaczenia:

• Fonty szeryfowe świetnie sprawdzą się w nagłówkach, podtytułach czy cytatach. Możesz także je wykorzystać w tekstach, które będą najprawdopodobniej odczytywane na monitorze. Treść będzie się wtedy prezentowała bardziej profesjonalnie.
• Fonty bezszeryfowe będą łatwe do odczytania w tekście głównym.
• Fonty skryptowe mogą nadać się do imitacji podpisu, do hasła reklamowego bądź krótkiego cytatu.
• Fonty ozdobne sprawdzą się w głównych sloganach, nadając Twojej marce charakterystyczny wygląd.

Zdecydowanie odradzam stosowanie dwóch ostatnich rodzajów do zapisywania dłuższych treści. Szybko zmęczy to czytelnika i zniechęci do dalszej lektury.

Pamiętaj także, aby wygląd fontu był spójny z wizerunkiem Twojej marki. W końcu inaczej powinien wyglądać tekst skierowany do młodego indywidualnego odbiorcy, a inaczej taki przeznaczony dla dużych firm. Warto tu nadmienić, żebyś w kontekście samej treści zadbał też wyeliminowanie branżowego żargonu.

Skąd brać fonty?

Nie masz pomysłu, jaki krój pisma wybrać? Poznaj sekret innych stron! Możesz znaleźć nazwę cyfrowej czcionki innej strony w celach inspiracyjnych. Służą do tego m.in. takie rozszerzenia do przeglądarki jak Fonts Ninja.

Jeśli zależy Ci na darmowych fontach, które mają licencję na komercyjne wykorzystanie, skorzystaj z bazy Google Fonts. Możesz tam wygodnie je filtrować pod względem rodzaju, języka czy innych właściwości. Podobne rozwiązanie oferuje np. Adobe Fonts, choć tutaj dostęp jest już płatny.

Niezależenie od Twojego wyboru sprawdź przed pobraniem, czy dany krój zawiera polskie znaki diakrytyczne (litery ą, ę, ć itd.). Inaczej będą się one wyświetlały w inny sposób niż reszta tekstu. Tak nieestetyczny, że nie chcesz tego widzieć, serio.

Zasady typografii w projektowaniu stron internetowych

Wybór odpowiedniego kroju pisma to dopiero połowa sukcesu. Przy tworzeniu strony WWW trzeba jeszcze odpowiednio ułożyć treść, tak aby wygląd tekstu był zgodny z regułami UX. Poznaj więc kilka kolejnych zasad typograficznych, dzięki którym Twoi klienci rozsiądą się wygodnie na Twojej stronie niczym na leżaku w pięciogwiazdkowym hotelu [opcjonalnie: na luksusowej kanapie].

Nie używaj zbyt wielu krojów pisma

Dobrze, gdy wygląd tekstu na stronie nie jest monotonny. Łatwo tu jednak „przedobrzyć”. Jeśli Twój potencjalny klient co chwilę będzie widział inny kształt liter, zacznie bardziej zwracać uwagę na formę niż na treść. Zbyt dużo bodźców nie wpłynie pozytywnie na sprzedaż.

Warto zatem zachować zdrowy umiar. Częstą praktyką jest wybieranie kroju szeryfowego do nagłówków, a bezszeryfowego do tekstu głównego.

Można nawet używać jednego rodzaju, ponieważ w wielu bazach fontów (takich jak Google Fonts) znajdziesz kroje pisma w ich różnych odmianach. Wszystkie wersje zbiorczo nazywa się wtedy rodziną danego kroju pisma.

Rodzina krojów fontu Roboto

Uwzględnij linię zanurzenia

Wchodzisz na losową stronę i co widzisz? Na pierwszy rzut oka, bez scrollowania. Mówiąc ogólnie, masz przed oczami obraz powyżej tzw. linii zanurzenia. Jeśli naszła Cię ochota, aby przewinąć dalej – punkt dla autora projektu witryny.

Jest to dowód na to, że powyżej owej linii znalazły się kluczowe informacje, których potrzebuje odbiorca, żeby zainteresować się treścią. Pójdź za tą myślą i umieszczaj najważniejsze komunikaty jak najwyżej.

Pamiętaj o właściwie sformatowanych nagłówkach

Zarówno w treściach ukazujących się na papierze, jak i tych, które widzimy w przeglądarkach internetowych, odpowiednio zhierarchizowane nagłówki pomogą odbiorcy szybciej znaleźć potrzebne informacje. Używaj zatem znaczników H1, H2 oraz H3 (nie więcej), a poprawi to UX całej strony, a także Twoją pozycję w Google.

Jeśli Twój slogan lub nagłówek został napisany bardzo dużym fontem, zwróć uwagę na kerning. Są to odstępy między poszczególnymi literami.

Najczęściej autorzy krojów pisma zadbali już o to, aby nie było na tym polu problemów. W dużej skali mogą się jednak one pojawić przy niektórych konfiguracjach liter, szczególnie jeśli stosujesz różne fonty w obrębie jednego zdania lub wyrazu. Warto wtedy poprosić projektanta strony o interwencję.

Kerning

Zadbaj o czytelność akapitów

Jest to kluczowe zagadnienie w przypadku tekstów sprzedażowych. Jeśli formatowanie akapitów utrudnia czytanie, możesz być pewien, że Twój odbiorca nie będzie się specjalnie wysilał, żeby poznać Twoją ofertę. Jak zatem maksymalnie poprawić czytelność treści na stronie?

1. Zoptymalizuj długość wersów. Spraw, aby Twój potencjalny klient, czytając tekst od lewej do prawej (co wcale nie jest takie oczywiste w kontekście innych kręgów kulturowych) nie musiał cały czas biegać wzrokiem. Liczba znaków w wersie powinna się zamykać w przedziale od 50 do 60.
2. Nie justuj tekstu. Równe linijki dobrze wyglądają w książkach czy dłuższych artykułach czytanych na komputerze. Jeśli jednak zależy Ci na przyciągnięciu uwagi klienta, unikaj długich bloków tekstu. Nie prezentują się one przystępnie, a także utrudniają odnalezienie kluczowych informacji. Oprócz tego mogą powodować nienaturalne rozciągnięcie treści w niektórych wierszach. Zamiast tego wyrównaj tekst to lewej.
3. Zastosuj odpowiednią interlinię. Standardowy odstęp pomiędzy kolejnymi liniami powinien wynosić 20% stopnia pisma tekstu, czyli np. jeżeli Twój tekst ma 15 pkt. wielkości, sprawdzi się interlinia rzędu 3 pkt. Zależy to jednak również od funkcji treści i całego designu strony.
4. Dziel tekst na krótkie akapity. W Kuźni Treści wszelkim długasom mówimy bez skrupułów „bajo!”, o czym opowiadamy też na naszych szkoleniach. Dlaczego? Miej na uwadze, że duża część odbiorców (jeśli nie większość) będzie przeglądać Twoją stronę na urządzeniach mobilnych. Wtedy tekst, który na monitorze ma raptem 8 wersów, na ekranie smartfona zmieni się w spory blok zdecydowanie zniechęcający do czytania. Dbaj zatem o to, aby akapity miały maksymalnie kilka linijek (3–5).
5. Pamiętaj o podstawowych zasadach typografii – zatroszcz się o odpowiednią ilość światła (odstępy między literami i wyrazami) oraz nie stosuj zbyt wielu wersalików (wielkich liter) obok siebie. Te same wyrazy nie powinny się znajdować pod sobą w kolejnych linijkach.

Ułatw odbiorcy skanowanie tekstu

Typografia na stronie internetowej musi być dostosowana do zwyczajów przeciętnego użytkownika sieci. A jego charakterystyczną cechą jest to, że obecnie rzadko czyta tekst od deski do deski. Zamiast tego skanuje treści w poszukiwaniu interesujących go informacji.

Zresztą, czy sam tak czasem nie postępujesz, szukając rozwiązania jakiegoś problemu lub chcąc kupić dany produkt? Obstawiam, wielokrotnie odpalałeś w wyszukiwarce kilka zakładek, a następnie wyłuskiwałeś na nich tylko kluczowe elementy w procesie eliminacji nieprzydatnych stron. I nie ma w tym nic dziwnego, w końcu czas to pieniądz.

A zatem w jaki sposób przyspieszyć wyszukiwanie kluczowych informacji?

• Stosuj zasadę „jeden wątek, jeden akapit” – użytkownicy łatwiej rozeznają się w artykule czy ofercie, jeśli każda nowa myśl zostanie graficznie wydzielona, najlepiej odstępem (wcięcia pierwszego wiersza są już w internecie passe). Odgrywa to szczególną rolę w przypadku długich tekstów.
• Umieść na górze spis treści – nie ma nic lepszego dla odbiorcy niż możliwość szybkiego przejścia do potrzebnej informacji.
• Stosuj punktory i nagłówki H3 zależnie od okoliczności – dobra typografia w internecie charakteryzuje się brakiem długiej treści przy punktorach. Jeśli zaczynają one wyglądać zbyt obszernie, lepiej zastosować w takiej sytuacji nagłówki H3.
• Wyróżniaj kluczowe fragmenty – możesz to zrobić za pomocą pogrubień, wersalików, kolorów czy kursywy (tę ostatnią najlepiej zachować dla cytatów i słów w języku obcym). Przy selekcji różnych krojów pisma na własną stronę sprawdź, czy dana rodzina zawiera odpowiednie wersje, np. bold, aby nie spotkać się później z przykrą niespodzianką.
• Podpisuj ilustracje – dzięki temu przy scrollowaniu tekstu użytkownik od razu będzie wiedział, czy powinien przeanalizować obraz, np. zamieszczony wykres.

Sprawdź, czy tekst jest dobrze widoczny

Nie wystarczy trafnie wybrać krój pisma, aby tekst marketingowy prezentował się właściwie. Warto również dobrać odpowiednie kolory tła oraz samego fontu. Inaczej dana treść może nadwyrężać wzrok odbiorcy (i jego cierpliwość), a nawet sprawić, że stanie się niemożliwa do odczytania.

Kluczem jest tu odpowiedni kontrast w barwach. Im większy, tym czytelność będzie większa. Najprościej byłoby pisać wszystko czarnym kolorem na białym tle. Taki design strony zdecydowanie nie porwałby jednak klientów do skorzystania z usług Twojej strony. Warto zatem zastanowić się chwilę nad tą kwestią, aby zbalansować oba aspekty. Istnieją na szczęście pomocne narzędzia, takie jak Color Tool, dzięki którym szybko wypróbujesz różne warianty.

Pamiętaj też, żeby nie przesadzić ze wzorami w tle wokół tekstu lub za nim. Umieszczenie ich może wydawać się efektowne, ale przy braku umiaru niepotrzebnie odciągną one uwagę czytelnika od treści.

Sporo tego, prawda? Faktycznie, zasad internetowej typografii jest dużo, ale podobnie jak w przypadku reguł z innych dziedzin – wraz z doświadczeniem wchodzą one w krew i po czasie zaczyna się je stosować już intuicyjnie.

Jeśli jednak nie masz ochoty spędzać nad formatowaniem swoich tekstów długich godzin, rozwiązać ten problem może pomoc doświadczonego copywritera. Zrealizuje on lwią część typograficznych wymogów już na etapie pisania tekstu w arkuszu. Zastosuje m.in. właściwą gradację nagłówków, umieści punktory, uwypukli kluczowe fragmenty. Słowem – uczyni tekst łatwym w skanowaniu.

Gdzie znajdziesz takich speców? No pewnie, że w Kuźni Treści! Nasi copy wiedzą, co w typografii piszczy, zastosują się również do Twoich wymagań, a także posłużą swoją radą w razie potrzeby.