Typografia w web designie. Co musisz wiedzieć, by tworzyć piękne strony internetowe?

Important typography elements
Typografia ma dziś ogromne znaczenie w projektowaniu stron i aplikacji internetowych. Przygotowaliśmy krótki przewodnik po najważniejszych elementach typografii web designu. Dowiedz się jakie zasady typografii są najważniejsze, a jakich błędów typograficznych lepiej nie popełniać!
Nauka typografii nie musi być jednak nudna i trwać latami! Jeżeli zapoznasz się z jej najważniejszymi zasadami, będziesz w stanie projektować wygląd tekstów na stronach internetowych zgodnie z graficznym standardami. Jakie są sekrety dobrego web designu, które zagwarantują, że tekst na Twojej stronie będzie czytelny? W BOWWE przygotowaliśmy krótki poradnik, który przybliży Ci podstawy typografii. Dowiesz się też jakich błędów typograficznych unikać, aby nie zaburzyć czytelności tekstu na stronie. Oto praktyczne typo-porady do zastosowania na każdą witrynę.

Czym jest typografia?

Zanim przejdziemy do omówienia praktycznego zastosowania zasad typografii internetowej na Twojej stronie, wyjaśnijmy krótko, czym w ogóle jest typografia. Według definicji typografia to zbiór zasad dotyczących aspektów wizualnych tekstu. Jest to określenie wykorzystywane zarówno w druku tradycyjnym, jak i cyfrowym. Typografia internetowa jest niezwykle istotna przy pisaniu artykułów na bloga, tworzeniu treści na strony internetowe oraz wszelkich pracach graficznych, np. projektowaniu logo.

Typografia - pojęcia, które MUSISZ znać!

Czym różni się czcionka od fontu, a po czym rozpoznać szeryfy? Takie pojęcia musisz znać! Bez względu na to, czy jesteś blogerem, entuzjastą web designu, czy po prostu chcesz ulepszyć content na swojej stronie - warto zapoznać się z podstawowymi terminami, zanim zaczniesz zgłębiać tajniki typografii internetowej.

Krój pisma

Czym jest krój pisma? To zestaw znaków, które posiadają spójne cechy graficzne, np. kształt, styl, proporcje. Wiele osób myli krój pisma z czcionką lub fontem. Mając na myśli zmianę czcionki (Times New Roman, Arial, itd.), tak naprawdę odnosimy się do kroju pisma. Kroje pisma możemy podzielić na kategorie, biorąc pod uwagę różne cechy pisma. Najbardziej znane odmiany kroju pisma to:

Szeryfy

  • krój szeryfowy (serif font) - litery charakteryzują się spłaszczonymi zakończeniami (np. Times New Roman)
  • krój bezszeryfowy (sans serif font) - proste litery bez zakończeń (np. Arial)
Pamiętaj: każdy popularny krój pisma posiada swojego autora, a tym samym podlega prawom autorskim!

Czcionka czy font?

Czcionki i fonty są nośnikami kroju pisma, z których powstają teksty. Czym się od siebie różnią? Czcionka to termin używany w drukarstwie tradycyjnym. Jest to określenie na tzw. kostkę drukarską - metalowy prostopadłościan z literką druku służący do druku.

Z kolei font to zapis kroju pisma, ale w postaci cyfrowej. Inaczej mówiąc, jest to plik komputerowy z zakodowanymi kształtami znaków, które przybierają formę wektorów lub bitmap. W mowie potocznej przyjęło się jednak, że czcionka i font są traktowane praktycznie jak synonimy, dlatego w tym artykule będziemy używać ich zamiennie.

Co oznacza leading, tracking oraz kerning?

Leading, tracking oraz kerning to sposoby regulowania światła (czyli odległości) między literami. Są to popularne funkcje, które można znaleźć w wielu programach graficznych służących do pracy z tekstem. Na czym polega główna różnica pomiędzy tymi trzema sposobami?

  • Leading odnosi się do regulowania odległości między liniami pisma, na których stoją litery.
Leading explanation
  • Tracking (inaczej zmiana gęstości składu) może być zastosowany na większym obszarze tekstu, np. całym akapicie.
  • Kerning jest stosowany w tekście wybiórczo. Przykładowo, może być użyty pomiędzy podobnymi do siebie literami V i A, aby ułatwić czytelność. Co więcej, kerning określa odstępy nie tylko pomiędzy pojedynczymi literami, ale też znakami interpunkcyjnymi, czy cyframi.
difference between kerning and tracking

Czym są sierotki w tekście?

Sierotki to kolokwialne określenie spójników, które są zostawione na końcu wersu. Jeśli na końcu wiersza pozostawiamy jednoliterowy wyraz, jest to błąd składu tekstu. Pozostawione na końcu wersu spójniki należy więc zawsze przenosić do kolejnego wersu. Czasem, jeśli w tekście jest mało wiszących spójników, warto przenosić je ręcznie. Jednak większość programów graficznych oferuje szybsze opcje rozwiązania tego problemu. Warto się z nimi zapoznać, jeśli masz do czynienia z tekstem, który zawiera dużo tego typu błędów.

Rola typografii w web designie

Powiedzieliśmy już, czym jest typografia — teraz czas na wyjaśnienie jej znaczenia w projektowaniu stron. Rola typografii nie ogranicza się jedynie do funkcji dekoracyjnej. W świecie online jej głównym zadaniem jest ułatwienie użytkownikom odbioru komunikatu płynącego ze stron internetowych. Większość internautów nie czyta tekstów słowo po słowie, a jedynie skanuje treści, wybierając najistotniejsze fragmenty. Dlatego całą typografię strony należy zaprojektować w przemyślany sposób. Twoim celem jest przecież zwrócenie uwagi czytelnika na najważniejsze informacje, które chcesz mu przekazać. Nie da się ukryć, że dobrze dobrane fonty mogą ożywić Twoją stronę i nadać jej odpowiedni charakter, ale też wpłynąć negatywnie na odbiór całej witryny. Stosując się do zasad typografii, zyskujesz pewność, że treści na Twojej stronie będą estetyczne, czytelne i spójne z jej stylistyką.

Jak duże znaczenie ma wybór fontu na stronie internetowej?

Możesz mieć zaprojektowany najpiękniejszy design na stronie, ale jeśli nie dobierzesz do tego odpowiedniej czcionki, nie będzie efektu „wow”. Jeśli wątpisz, czy wielkość fontów na Twojej witrynie ma znaczenie, wyobraź sobie sytuację, w której użytkownik wchodzi na przestarzałą stronę pełną nieczytelnych ciągów tekstu. Co się dzieje jeżeli struktura treści na stronie internetowej nie ułatwia, a wręcz utrudnia użytkownikowi znalezienie najważniejszych informacji? Z pewnością szybko opuści on tak nieestetycznie wyglądającą stronę i uda się do konkurencji, nawet jeżeli sam tekst niesie ze sobą wartość merytoryczną.

Gotów by stworzyć własną stronę?

Skorzystaj z najwygodniejszego kreatora stron, któremu zaufały już tysiące użytkowników i twórz strony, które zapewnią Ci klientów!

Zaczynamy!

Typografia a branding

Tekst na stronie ma wpływ na to, jak Twoja marka będzie wizualnie odebrana w Internecie. Branding składa się z wielu elementów: nazwy, logo, kolorów marki, a także typografii.  A więc odpowiednio skonstruowana czcionka może stać się znakiem rozpoznawczym Twojej marki. Dlatego jeżeli chcesz stworzyć silną i rozpoznawalną markę, potraktuj typografię jak wizytówkę swojej strony!
Nasza rada: Podczas tworzenia strony, nie zapomnij omówić z grafikiem spójności typografii z identyfikacją wizualną swojego brandu.

Najczęstsze błędy typograficzne

Typograficzne zaniedbania skutecznie zniechęcają użytkowników do powrotu na stronę. 

Istnieją pewne typograficzne podstawy, których nie należy łamać, a o których zdarza się w pośpiechu zapomnieć nawet grafikom. Zlekceważenie ich może zaburzyć, a nawet całkowicie uniemożliwić czytelność komunikatu treści.
Oto najbardziej rażące typograficzne niedopatrzenia, których lepiej unikać, gdyż mogą zrujnować UX każdego projektu strony:

Zbyt mała czcionka

Nawet jeżeli uważasz, że mała czcionka wygląda ładnie i pasuje do stylistyki strony, pamiętaj, żeby nie przesadzić. Zbyt mała czcionka zawsze utrudnia czytanie. A to właśnie czytelność tekstu powinieneś stawiać na pierwszym miejscu, jeśli chcesz stworzyć witrynę user-friendly, czyli przyjazną użytkownikowi!

Zbyt szerokie i zbyt długie bloki tekstu

Wszelkie zaniedbania dotyczące struktury tekstu sprawią, że Twoja strona będzie odebrana jako chaotyczna. Jednak wielu grafików czy web designerów często popełnia błędy dotyczące struktury tekstu na stronie. Jeśli mamy do czynienia ze stroną, na której są zbyt długie ciągi tekstu, ciężko jest wychwycić najważniejszą informację. Nawet jeśli czujesz, że masz dużo informacji przekazania na swojej stronie, pamiętaj, że użytkownicy wolą krótkie teksty! A co dzieje się, jeśli czytelnik ma do czynienia ze zbyt szerokim tekstem, który zajmuje większość ekranu monitora? Użytkownik, aby w całości przeczytać tekst, musi ruszać głową od lewej do prawej i nadwyrężać ruch gałek ocznych. Jeśli więc chcesz, aby Twoje teksty były przyjazne dla internautów, warto temu zapobiec! Wystarczy, że skrócisz teksty i zastosujesz się do optymalnej ilości znaków w wersie, czyli pomiędzy 40, a 80.

Brak akapitów

Treść bez akapitów będzie wyglądać raczej jak niezorganizowany lub nielogiczny ciąg myśli, niż profesjonalny i merytoryczny tekst. Takiego efektu oczywiście na stronie nie chcemy!

Brak nagłówków w artykule

To kolejny przykład braku organizacji tekstu. Niby detal, a jednak może całkowicie rozmyć przekaz treści lub świadczyć o braku pomysłowości.

Zły dobór kroju pisma

Zgodnie z zasadą im mniej, tym więcej, postaw na maksymalnie dwie różne czcionki. Zanim dokonasz wyboru, zapoznaj się z powszechnie obowiązującymi standardami łączenia fontów. Zawsze możesz też wybrać te najbardziej popularne zestawienia. Najprostsze czcionki to wszystkie bezszeryfowe (Arial, Calibri, Lato). Możesz je łączyć z modnymi krojami pisankowymi, czyli  czcionkami z charakterystycznymi ozdobnikami.

Zostawianie sierotek, czyli wiszących spójników

Wiesz już, czym są sierotki i że nie należy zostawiać osamotnionych spójników na końcu wiersza. Nawet jeśli na pierwszy rzut oka nie jest to rażący to błąd, warto go unikać. Wówczas tekst czyta się zdecydowanie łatwiej.

Wzorki w tle

Z pewnością nie raz widziałeś stronę internetową, na której tekst jest nieczytelny z powodu wzorzystego tła. Umieszczanie tekstu na zdjęciu, czy nawet wyrazistym kolorze zawsze jest ryzykownym zabiegiem. Unikaj więc wszelkich wzorków w tle tekstu, jeśli nie chcesz męczyć oczu użytkownika.

Justowanie tekstu

Justowanie tekstu sprawi, że tekst będzie wyglądać nienaturalnie. Dlatego warto tego zabiegu unikać. Zamiast wrażenia organizacji i elegancji, tekst stanie się zwyczajnie nieczytelny. Justowanie wygląda dobrze tylko w kolumnach gazet. W Internecie skutkuje to tworzeniem się białych miejsc w tekście, czyli inaczej mówiąc luk. Co w takim razie zamiast justowania? Lepiej postawić na wyrównanie tekstu do lewej strony, tzw. układ chorągiewkowy.
Jeśli nie jesteś przekonany, czy tekst na Twojej stronie czyta się dobrze, poproś znajomych o test. Jeśli mrużą oczy i przybliżają się do monitora, aby przeczytać tekst, to znak, że należy coś zmienić!

Skąd czerpać wiedzę o typografii?

Oto kilka obowiązkowych pozycji książkowych niezbędnych dla każdego UX designera, entuzjasty web designu, a także każdego, kto chce zgłębić tajniki typografii internetowej.
  • Pierwsza pomoc w typografii (Friedrich Frossman, Hans Peter Willberg) - niezbędnik typograficzny, który wspomoże niejednego początkującego designera w potrzebie
  • Ciemne typki (Keith Houston) - nieco wiedzy o historii typografii oraz praktyczne opisy znaków typograficznych. 
  • Elementarz w stylu typografii (Robert Bringhurst) - lektura obowiązkowa dla typografów i nie tylko. Znajdziesz tu trochę teorii i wiedzę na temat budowania całych aranżacji typograficznych.
Z interesujących inspiracji w Internecie, warto zajrzeć na fanpage Fontfabric Type Foundry. znajdziesz tam trendy i ciekawostki typograficzne. Możesz też w ramach inspiracji śledzić poczynania współczesnych typografów. Łukasz Dziedzic to polski projektant, który jest twórcą kroju Lato i na swojej stronie regularnie zamieszcza nowości ze świata designu.

Stwórz idealny system typografii na stronę!

Reguły typograficzne stosowane podczas projektowania stron internetowych wbrew pozorom nie są bardzo skomplikowane, a ich znajomość może okazać się niezastąpiona. Nawet bez zaawansowanej wiedzy graficznej czy umiejętności kodowania, możesz postarać się dopilnować podstaw typografii na swojej stronie. A jeśli chcesz dowiedzieć się jak zaprojektować czytelny tekst na stronę, przeczytaj nasz artykuł i poznaj 7 złotych zasad każdego UX designera!

Gotowy do zbudowania własnej strony internetowej?

Nie martw się, pomożemy Ci! Możemy też to zrobić za Ciebie!

Zacznij teraz
banner image

Stwórz własną profesjonalną stronę internetową

Zacznij teraz
1