Typografia – co to jest i jak efektywnie ją wykorzystać

Gdy piszemy coś naprawdę ważnego, poświęcamy ogromną ilość czasu, by doprowadzić do perfekcji tekst wiadomości lub e-maila i jak najdokładniej przekazać nasze intencje. Analizujemy znaczenie słów, zastanawiamy się, które sformułowanie najlepiej brzmi w danym kontekście. Ale jak często myślimy o wizualnym przekazie naszych wypowiedzi?

Specjaliści zajmujący się typografią dbają o to, by przez wizualną stronę tekstu wyrazić emocje, uwypuklić przesłanie i wiernie oddać atmosferę wypowiedzi. Słowa to nie tylko treść, sposób zapisu może podkreślać ich znaczenie lub je deformować. Aby to zrozumieć, wyobraź sobie np. znaki drogowe z ozdobnym liternictwem – ich skuteczność byłaby znikoma.

W tym opracowaniu przyjrzymy się potędze typografii. Zamieścimy definicję typografii, informację o kluczowych elementach oraz wskazówki, które pomogą Ci wybrać odpowiedni krój pisma do projektu Twojej strony internetowej.

Typografia – co to takiego?

Typografia – definicja jest dość skomplikowana, ale ogólnie mówiąc, typografia dotyczy do wizualnego aspektu tekstu. Stosowanie jej w praktyce polega na takim skomponowaniu elementów graficznych tekstu, aby był on czytelny i estetyczny. Może służyć tworzeniu pewnych wrażeń i doznań, wzmacniać przekaz wypowiedzi. Aby to osiągnąć, stosowane są różne kroje i style czcionek, a także odpowiednio dobrane rozmiary znaków, większe lub mniejsze odstępy między literami, słowami i wierszami.

Typografia to jedno z kluczowych pojęć w projektowaniu i bardzo istotny element każdego projektu. Te same słowa mogą wywoływać różne emocje, w zależności od tego, jak zostaną zapisane. Gdy tworzysz logo, piszesz teksty na swoją stronę internetową, wymyślasz książkę dla dzieci – zastanów się, w jaki sposób wizualna warstwa tekstu nadaje ton głównemu przesłaniu, a w przypadku tekstów marketingowych – czy dobrze współgra z osobowością Twojej marki.

Główne elementy typografii

Zanim zagłębimy się w świat typografii, musimy poznać głównych bohaterów. Istnieje obszerna lista terminów z zakresu typografii, ale na początek wystarczy znajomość poniższych pojęć:

Czcionki, fonty i kroje pisma

Nadszedł czas, aby rozwiać wątpliwości i zdefiniować sobie, co oznacza krój pisma oraz czym jest czcionka i font, ponieważ jest między nimi wyraźna różnica.

Krój pisma (ang. typeface) to zbiorcza nazwa pewnej rodziny czcionek, jak np. Helvetica, Times New Roman lub Comic Sans. Czcionki (ang. type) to małe metalowe kostki z wypukłymi literami, z których zecerzy niegdyś układali teksty do druku. Fonty stanowią cyfrowe odpowiedniki czcionek (są to pliki zawierające informacje o danym kroju pisma). W języku potocznym te pojęcia często stosowane są wymiennie. Czcionki mogą mieć różne style w ramach jednego kroju, np. pogrubienie, kursywa lub kondensacja. Zauważ, że ten tekst jest napisany jednym krojem pisma, ale zawiera wiele stylów.

Krój pisma Futura PT w trzech różnych stylach

Czytelność

Do typografii można mieć dowolnie kreatywne podejście, ale zawsze trzeba mieć na uwadze kwestię czytelności tekstu. Poza wyborem odpowiednio przejrzystego, łatwego do odczytania kroju pisma, warto też zwrócić uwagę na dodatkowe czynniki.

Przyjrzyj się uważnie na rozmiarowi tekstu oraz odstępom między literami i wierszami (w terminologii fachowej jest to kerning i leading). Zadbaj o odpowiedni kontrast pomiędzy kolorem tekstu i barwą tła. W przypadku strony internetowej ma to kluczowe znaczenie z punktu widzenia dostępności cyfrowej.

Czcionki szeryfowe i bezszeryfowe

Te terminy dzielą kroje pisma na dwie grupy. Każdy znak kroju szeryfowego zawiera małe, ozdobne zakończenia (linie lub ogonki na końcach linii), podczas gdy krój bezszeryfowy jest ich pozbawiony. Bezszeryfowe kroje pisma – takie jak ten, który stosujemy w tym wpisie na blogu – składają się z czystszych linii, bez żadnych ozdób na końcach liter.

Hierarchia

Hierarchia, jako jedna z podstawowych zasad projektowania, jest niezbędna także w typografii. Hierarchia pomaga rozróżnić poszczególne części tekstu i pomaga czytelnikom od pierwszego rzutu oka wiedieć, która informacja jest najważniejsza. Stosowaniu zasad hierarchii służą różne aspekty zapisu: wielkość znaków i ich szerokość, a także rozmieszczenie elementów (tekst na dole ekranu wydaje się mniej ważny niż ten na górze).

W gazecie tytuły artykułów są większe i bardziej widoczne niż teksty główne, co pozwala czytelnikowi szybko zapoznać się z poruszaną w wydaniu tematyką – wystarczy przejrzeć nagłówki i wiemy, czy warto czytać tekst. Stosowanie zasad hierarchii pomaga również w stworzeniu przejrzystego układu strony.

Światło (white space)

Światło (ang. white space, negative space) w typografii oznacza niezapełnione niczym obszary otaczające teksty lub obrazy. Pozostawienie odpowiedniej ilości miejsca pomiędzy elementami graficznymi pomaga uniknąć bałaganu i zapewnia przejrzystość. Szerokie marginesy lub pusta przestrzeń sprawiają, że dany element jest dobrze wyeksponowany. Światło pomaga także wyodrębnić poszczególne sekcje lub bloki informacji.

Wyrównanie

W typografii wyrównanie odnosi się do układu tekstu na stronie. Istnieją cztery podstawowe ustawienia:

• Wyrównanie do lewej strony – tekst jest wyrównywany do linii lewego marginesu.
  

• Wyrównanie do prawej strony – tekst jest wyrównany do linii prawego marginesu. Warto zwrócić uwagę na fakt, że wyrównanie do prawej strony nie jest zalecane dla tekstów pisanych w językach, które czyta się od lewej do prawej, ponieważ zaburza intuicyjny rytm czytania.
  

• Justowanie tekstu – pozwala na równomierne rozłożenie tekstu między lewym i prawym marginesem z automatycznie dostosowanymi odstępami między słowami.
  

• Wyśrodkowanie tekstu – ustawienie tekstu wzdłuż środkowej linii, wiersze zaczynają się i kończą w nieregularny sposób. Jest to układ odpowiedni raczej dla tytułów niż dużych ilości tekstu (czytelnik za każdym razem musiałby szukać początku następnego wiersza, a to utrudnia czytanie długich tekstów).

Typografia – co to znaczy dla strony internetowej

Przygotowanie treści na stronę internetową to jedno, ale decyzja o tym, jak najlepiej ją zaprezentować na stronie, to już zupełnie inna sprawa. Opisane poniżej zasady dotyczą tworzenia stron internetowych, ale mogą być również stosowane w innych projektach, np. plakatów, ulotek, biuletynów. Przed przystąpieniem do pracy nad własną stroną, przejrzyj kolekcję znakomitych stron online i zainspiruj się nimi, aby we własnym projekcie wykorzystać wszystko, co można osiągnąć dzięki znajomości zasad typografii.

Oto sześć wskazówek dotyczących typografii, które warto wziąć pod uwagę przy projektowaniu:

1. Odzwierciedlenie tożsamość marki

Zanim rozpoczniesz jakiekolwiek kreatywne przedsięwzięcie dla swojej firmy, jasno zdefiniuj tożsamość marki. Czy marka ma kojarzyć się z czymś dynamicznym i pogodnym? Czy raczej zwracasz się w kierunku spokojnych, tradycyjnych form?

Poszukaj kroju pisma, który wyrazi wyjątkową osobowość Twojej marki. Aby wybrać najlepszą czcionkę na swoją stronę internetową, zacznij od wyselekcjonowania kilku typów, które wydają Ci się odpowiednie, a potem zastanów się, który z nich najlpiej odpowiada Twoim potrzebom.

2. Konsekwencja

Budowania solidnej tożsamości marki polega na dążeniu do spójności. Kluczową kwestią jest zachowanie konsekwencji – dotyczy to zarówno preferowanej kolorystyki, jak i wyborów typograficznych. Trzeba utrzymać spójność każdego elementu treści na stronie internetowej. Mikroteksty, główny kontent, etykiety w menu strony i nagłówki na stronie głównej muszą zachowywać swoją logikę.

Konsekwentnie stosuj wybrane style czcionek i krojów pisma w całej witrynie. Oczywiście, wolno na jednej stronie stosować dwa lub trzy różne kroje pisma (więcej na ten temat powiemy poniżej), ale pamiętaj, by w tych samych kontekstach na różnych stronach używać dokładnie tego samego typu czcionek. Jeśli na np. Tytuł jednego posta na blogu jest napisany czcionką Helvetica Bold w rozmiarze 40px, to tytuły pozostałych postów muszą wyglądać tak samo. Aby nieco ułatwić sobie życie, zapisz wybrany zestaw stylów, a potem używaj ich na każdej stronie i podstronie.

Zobacz poniższy szablon strony fitness i zwróć uwagę, w jaki sposób zachowano spójność typograficzną we wszystkich sekcjach.

3. Czytelność i zrozumiałość

Każdy tekst służy jakiemuś celowi. Oczywiście, sam w sobie może stanowić element dekoracyjny i być ciekawym uzupełnieniem projektu, ale przede wszystkim musi być czytelny. Liternictwo zastosowane w przycisku call-to-action ma zupełnie inne znaczenie niż wybór kroju pisma do projektu logo, w obu jednak przypadkach czytelność decyduje o tym, czy tekst zostanie w ogóle odczytany i prawidłowo zrozumiany. Nikt nie ma ochoty walczyć z bólem oczu, aby dowiedzieć się, co napisano na blogu ani ryzykować kliknięciem w niewłaściwy przycisk, gdy trudno zobaczyć, co jest na nim napisane.

Sprawdź też, czy teksty są napisane wystarczająco dużą czcionką – tak, aby można je było czytać zarówno na monitorze komputera, jak i na ekranie telefonu. Z rozmiarem czcionki powinien dobrze współgrać jej krój. Istnieją kroje pisma, które świetnie wyglądają jako nagłówki, ale są znacznie mniej czytelne po zastosowaniu w mniejszym rozmiarze w głównym tekście.

4. Maksymalnie dwa-trzy kroje pisma

Kreatywność to nie zawsze pełna wolność, trzymanie wyobraźni na wodzy bywa konieczne – i to też dotyczy typografii. Zapisanie strony tekstami o wielu różnych krojach będzie sprawiać wrażenie chaosu i niedbalstwa. Wybierz dwa lub trzy kroje pisma i do nich się organicz w całej witrynie. Konsekwentnie stosuj je na każdej stronie i podstronie.

Dobra praktyka mówi, że warto wybrać dwa główne kroje pisma: jeden, który będzie używany do tytułów lub nagłówków, oraz drugi do dłuższych bloków tekstowych. Jeśli chcesz urozmaicić stronę, możesz dodać trzeci krój pisma, np. w przyciskach CTA i innych mikrotekstach.

5. Dopasowanie stylu

Poszukując najlepszej pary czcionek pamiętaj przede wszystkim o tożsamości swojej marki. Ustal, która czcionka będzie używana do tytułów, a która do długich tekstów. Dłuższe wypowiedzi powinny być łatwe do odczytania, natomiast w przypadku nagłówków możesz nieco zaszaleć i wybrać krój pisma, który eksponuje wyjątkowość Twojej marki.

6. Fonty przyjazne stronom internetowym

Jeśli chcesz, by Twoja strona wyglądała doskonale na wszystkich urządzeniach, używaj fontów przyjaznych przeglądarkom internetowym. Każde urządzenie ma wbudowany zestaw fontów, więc jeśli zastosujesz na stronach takie, których jakieś urządzenie nie rozpoznaje, cały tekst będzie na nim wyświetlony w zupełnie inny sposób niż oryginalnie zaplanowano – a Twoja skrupulatna praca nad projektem pójdzie na marne.

Możesz uniknąć tego ryzyka, jeśli zdecydujesz się na stworzenie strony na platformie Wix i zastosujesz jeden wielu dostępnych tu profesjonalnych, preinstalowanych fontów. Możesz także pobrać bezpieczne fonty webowe z ogólnodostępnych zasobów online (np. Google Fonts), a następnie załadować wybrany typ do Edytora Wix.

Joanna Kowalewska

Marketing Manager