Czy wiesz, że często nie ma znaczenia, jak dobre są twoje treści? I tak mogą zostać nieprzeczytane!
Jeśli napiszesz naprawdę świetny tekst, ale przedstawisz go w złej formie, to odbiorca podświadomie pomyśli, że zawartość merytoryczna jest tak samo źle podana, jak forma tekstu.
Nie jest to wyznacznik, ale naprawdę warto dbać zarówno o merytoryczne treści, jak i dobre praktyki przy ich serwowaniu. Dlatego w tym tekście zajmiemy się tym jak w dobry sposób, podać Twoje treści. Nie ważne czy jesteś grafikiem, blogerem, właścicielem małej firmy czy ninja od social media. Zawsze warto, żebyś znał podstawy dobierania i łączenia fontów i wystrzegał się złych praktyk.
Kiedy tworzysz cokolwiek to prędzej czy później staniesz przed tym wyzwaniem. Jaki font wybrać? Niby oczywiste, jednak wiele osób popełnia podstawowe błędy przy wyborze typografii do swoich publikacji. Mam nadzieje, że ten artykuł pomoże Ci zrozumieć podstawowe zależności w typografii i znacznie ułatwi pracę.
Czego się dziś nauczysz?
Zaczniemy od całkowitych podstaw. Co to jest typografia i czym różni się font szeryfowy od bezszeryfowego. Następnie przejdę do konkretnych wskazówek i błędów przy dobieraniu fontów. W dalszej części tekstu omówię dobre praktyki przy formatowaniu tekstu. Ta część bardzo może przydać się zarówno twórcom treści, jak i początkującym projektantom. Pokaże Ci wiele zależności, o których łatwo na co dzień zapomnieć. One naprawdę bardzo wpływają na finalny odbiór tekstu.
Co to jest typografia?
Typografia jest tak naprawdę wszędzie tam, gdzie pracujesz z tekstem. Nawet przy składaniu dokumentów, umów faktur. W takich miejscach całkowicie nie zwracamy na nią uwagi. Odgrywa ważną rolę, jeśli używasz jej przy projektowaniu, składaniu lub formatowaniu tekstu. Zależy mi, żeby po lekturze tego artykułu nawet osoba, która nie projektuje zawodowo, wyniosła kilka rzeczy dla siebie.
Typografia jest to zbiór zasad, które mówią, jak powinien wyglądać prawidłowo ułożony tekst. Jak go składać, układać i formatować. Typografia jest o tyle dużym tematem, że zaczyna się od podstaw takich jak litera. Mówi, co składa się na pojedynczą literę, tłumaczy takie elementy jak wersalik, szeryf, trzon, oko, wydłużenie, brzuszek, zwieńczenie. To części składowe litery. Nie będziemy jednak dziś tego szerzej omawiali, bo jeśli nie projektujesz fontów zawodowo, a jesteś osobą, która chce ładnie zaprojektować swój tekst z pobranych fontów, nie jest to potrzebne w codziennej pracy. Jeśli jesteś zainteresowany szerzej tematem typografii, to na końcu materiału podam kilka fajnych źródeł, z których można dodatkowo czerpać wiedzę.
Sądzę, że podstawową wiedzę powinien mieć każdy, kto przygotowuje jakiekolwiek materiały tekstowe, dokumenty, e-booki, publikacje. Znajomość kilku zasad może naprawdę dużo zmienić w odbiorze tego, co tworzysz. A jeśli zajmujesz się, przygotowaniem tekstu profesjonalnie np. jesteś copywriterem, blogerem to jest to bardzo przydatne i wskazane.
Jakie błędy popełniamy przy tworzeniu stron www? Przeczytaj 8 podstawowych błędów na stronie www.
Font bezszeryfowy i szeryfowy
Na początek trochę podstaw i oczywistości dla niektórych. Jak najczęściej dzielimy fonty? Na szeryfowe i bezszeryfowe. No dobrze, czym w takim razie jest ten szeryf? To jest poprzeczne lub ukośne zakończenie kreski litery. Stosowane głównie w celu dekoracyjnym, nadają wyjątkowy charakter literom. Fonty szeryfowe charakteryzują się tym, że wyglądają bardziej elegancko i stylowo.
Wiele osób odradza pisanie fontem szeryfowym długich treści. Jednak są przypadki, gdzie ta zasada jest łamana i font szeryfowy się sprawdza. To jednak wyjątki. Jeśli jesteś początkujący, to zapamiętaj jedną podstawę. Font szeryfowy to taki, który dodaje więcej elegancji i stylu do publikacji. Nie stosuj go do dłuższych form tekstowych, ponieważ tekst stanie się mniej przejrzysty. Publikacja zamiast elegancka będzie mało profesjonalna. Oczywiście jest masa wyjątków od tej reguły.
Jednym z najczęstszych błędów jest to, że tak bardzo chcemy pokazać elegancki wygląd projektu, że wszędzie używamy ozdobnych fontów szeryfowych. Finalnie wrażenie jest zupełnie odwrotne. Tekst wygląda nieczytelnie i słabo. Dlatego obserwuj, jak robią to inni. Najczęściej font szeryfowy używany jest do nagłówków, ewentualnie wyróżnień tekstu.
Fonty bezszeryfowe są pozbawione ozdobnych kresek. Dzięki temu łatwiej się czyta, nawet gdy są pisane małym rozmiarem i w dłuższych tekstach. Oczywiście, używane są także do nagłówków.
Kilka lat temu, gdy monitory miały małe rozdzielczości. Z tego powodu przyjęło się głównie korzystanie z czcionek bezszeryfowych. Ponieważ, szeryfy, czyli małe ozdobne kreski słabo się wyświetlały na takim ekranie i tekst stawał się mało czytelny. Z biegiem czasu jednak rozdzielczości stały się lepsze. Co za tym idzie, fonty szeryfowe częściej zaczęły gościć na naszych ekranach.
Podsumowując, istotne jest, że fonty szeryfowe rzadko nadają się do długiej treści. Natomiast są eleganckie i często wykorzystywane w nagłówkach.
Wskazówki przy dobieraniu fontów
Podzielę się z Tobą wskazówkami, które mam nadzieje pomogą Ci przy odpowiednim wybraniu fontów.
Zadbaj o odpowiedni styl całej publikacji
Odpowiednio dobrane czcionki nadają cały charakter Twojej treści. Dobierając font, pomyśl o Twojej grupie odbiorców. Ważne jest, w jakim stylu chcesz do nich mówić i dopiero później szukaj czcionek.
Innego kroju pisma użyjesz, jeśli projektujesz plakat do filmu komediowego a innego, jeśli do westernu. Font powinien przedstawiać ten klimat i być spójny z całą publikacją.
Tak samo jest z innymi dłuższymi formami publikacji. Jeśli strona www jest kierowana do dzieci, to warto próbować z bardziej miękką typografią, taką, która ma większą ilość zaokrągleń. Co innego, jeśli np. przygotowujesz e-booka odnośnie do sprzedaży luksusowych mieszkań czy aut. W takiej sytuacji możesz śmiało skorzystać z fontów szeryfowych w nagłówkach, które oddadzą odpowiedni wyrafinowany styl do publikacji.
Nie ma na to jednej żelaznej reguły, jaki font dobrać do jakiego typu publikacji. Dużo zależy od konkretnej marki oraz grupy klientów, z którą się komunikujesz. Dlatego, jeśli projektujesz, to poświęć sporo czasu na inspiracje i obserwowanie innych. Czyli próbuj, testuj i sprawdzaj.
Font wizerunkowy i contentowy
Ja wyróżniam dodatkowe dwa typy fontów, ze względu na ich zastosowanie.
Wizerunkowe i contentowe, zastanawiasz się pewnie skąd taki podział i o co chodzi?
Bardzo często spotykałem się z sytuacją, gdy ktoś używał ozdobnej czcionki do treści lub długich nagłówków. Mimo że nie zawsze był to font szeryfowy, więc niby wszystko się zgadzało, jednak typografia nie wyglądała najlepiej. Stąd powstał podział na fonty wizerunkowe i contentowe. Ponieważ nie każdy font jest do wszystkiego.
Wizerunkowa funkcja fontów polega na tym, że font może być bardziej unikalny i mniej czytelny, ale za to bardzo charakterystyczny. Przykładem fontów wizerunkowych mogą być różnego rodzaju fonty pisane lub unikalne fonty z plakatów filmowych czy przygotowane specjalnie pod logotyp.
Fontów wizerunkowych pod żadnym pozorem nie powinieneś używać do długich treści. Czasami nadają się one do nagłówków, ale jest to też zależne od stylistyki i danej czcionki. Dobry font wizerunkowy to taki, który możemy bez problemu przeczytać, ale gdy zobaczymy go bez kontekstu, ale w tej samej kolorystyce to od razu skojarzymy go z konkretną firmą.
Jeśli byś do menu restauracji użył fontu, który nawiązuje do np. czcionki nawiązującej do logo PlayStation. To podświadomie restauracja zacznie kojarzyć się z gamingiem.
Funkcja contentowa fontów polega na tym, że są one bardziej użyteczne niż unikatowe. Są to wszystkie najpopularniejsze fonty, których używasz. Oczywiście, ważne jest to, aby dany font miał swój określony styl i wyróżniał Twoją publikację. Jednak nie jest aż tak unikalny i niepowtarzalny jak font wizerunkowy. Nie jest już zarezerwowany tylko dla Twojej marki lub grupy konkretnych produktów. Wiele firm, korzysta tylko i wyłącznie z fontów contentowych i to wcale nie jest złe podejście, to jest bezpieczne.
W dobrych publikacjach najlepiej jest umiejętnie połączyć font wizerunkowy z tym do treści. Najlepiej, aby obydwa były w spójnej stylistyce i tworzyły ładną całość. Zbyt duża przewaga charakterystycznego fontu wizerunkowego potrafi naprawdę wszystko zniszczyć. To jest błąd popełniany nawet przez duże i popularne firmy. Dlatego pamiętaj, bądź unikatowy, ale nie przesadzaj.
Tylko jeden font charakterystyczny
Często początkujący projektanci lub blogerzy, którzy nie mieli wiele do czynienia z designem, chcą tak bardzo zrobić świetną grafikę, że użyją wszystkich możliwych wypasionych i fikuśnych czcionek. Nie tędy droga! Pamiętaj, że Twój tekst ma się wyróżnić, przykuć uwagę, ale przede wszystkim ma być spójny z całością. Dlatego, żeby nie robić jarmarku ze swojej publikacji, zdecyduj się na jeden font charakterystyczny. Taki który jest spójny z całą stylistyką pracy.
Ile użyć różnych rodzajów fontów w jednym projekcie?
Aby Twojemu tekstowi nadać spójności, to nie powinien posiadać więcej niż 3 różne kroje pisma. Zazwyczaj jest to font z tej samej rodziny w wersji regular i bold i czasami dodatkowo np. font do nagłówków z zupełnie innej rodziny np. szeryfowy.
Nie ma potrzeby, aby w jednym projekcie używać fontów z tej samej rodziny w wersji light, medium, regular bold i italic, ponieważ wtedy projekty stają się nieczytelne.
Pamiętaj o hierarchii komunikatów
Spójrz na swoją treść w taki sposób, jakbyś widział ją pierwszy raz i tylko przez kilka sekund. Co chciałbyś, żeby inni zapamiętali? No właśnie, to powinieneś zaakcentować. Wyróżnij rzeczy istotne, tak aby osoba, która na to patrzy, od razu wiedziała, co chcesz przekazać. Wtedy odbiorca w kilka sekund wie, czy ma zagłębiać się w treść, czy szukać dalej. Błędem jest brak hierarchii. Ponieważ wtedy wymagasz od czytelnika, żeby sam znalazł ważne informacje, zamiast podać je od razu. Hierarchię treści ustalasz dzięki temu, że jedna część jest grubsza, większa lub pisana KAPITALIKAMI. Po prostu bardziej widoczna. Jeśli akcentujesz coś w jeden sposób, to bądź spójny i wszędzie rób to tak samo.
Pamiętaj, kiedy wszystko jest wyróżnione, to nic nie jest wyjątkowe. Nie wyróżniaj większości. Dobieraj uważnie fragmenty, które są ważniejsze od reszty i chcesz, żeby były bardziej widoczne. Dzięki temu odbiorca bardzo łatwo się odnajdzie w Twoim tekście.
Hierarchia informacji szczególnie istotna jest przy projektowaniu różnego rodzaju e-commerce. Tam użytkownik powinien czuć się bezpiecznie. Ważne dla niego komunikaty powinny być wystarczająco widoczne, aby nie szukał ich po ekranie.
Próbuj, testuj, używaj nowych rzeczy
Jest naprawdę masa stron z inspiracjami i darmowymi fontami. Dlatego nie warto decydować się na pierwsze z brzegu rozwiązanie. Na końcu artykułu dam Ci kilka narzędzi, z których warto korzystać. Jeśli projektujesz zawodowo, to pamiętaj. Jeśli dany zestaw fontów sprawdził się u jednego klienta, to nie znaczy, że każdy następny klient będzie chciał to samo. Często się spotykałem z sytuacjami, gdy idąc na łatwiznę, projektanci za każdym razem proponowali te same rozwiązania, nie poświęcając ani chwili czasu na próbę czegoś nowego.
Dobre praktyki przy formatowaniu tekstu
Kerning i tracking — czyli dbaj o odstęp
W 2020 roku dbanie o odstęp nabrało nowego znaczenia — tak wiem, to było trochę suche. 😉
Nawiązując do typografii, wyróżniamy kerning i tracking. Ten pierwszy odpowiada za odstęp pomiędzy dwoma sąsiadującymi ze sobą znakami. O trackingu mówimy natomiast, gdy mamy do czynienia ze zmianą odstępu nie pomiędzy dwoma literami obok siebie, ale ze wszystkimi literami w wyrazie.
Często te dwa wyrażenia są mylone nawet przez profesjonalistów, ale czy to ważne?
Istotniejsze jest to, co może być, gdy zaniedbamy te odstępy.
Za mały tracking, sprawia wrażenie, że tekst jest ściśnięty i czyta się go słabo. Duży tracking jest często stosowany, aby nadać większej elegancji np. przy logo lub ładnych nagłówkach.
Rozstrzelony kerning za to wpływa negatywnie na czytelność tekstu.
Świadome korzystanie z dostosowania odstępu między literami może naprawdę dać fajny rezultat. Aby tekst wyglądał naprawdę ciekawie to polecam delikatnie zwiększyć tracking. Dzięki temu łatwiej się czyta i jest przyjemniej dla oka.
Jak opowiadać angażujące historie w marketingu? Przeczytaj artykuł o storytellingu.
Interlinia działa cuda
Kolejnym ważnym aspektem formatowania tekstu jest interlinia, czyli odstęp pomiędzy wierszami w tekście. Tutaj podobnie jak przy poprzednim punkcie, można przesadzić w każdą stronę. Za mała interlinia, ściska cały tekst, przez co staje się on mało czytelny. Skrajnie duża interlinia powoduje, że tekst jest zbyt rozstrzelony. Jaka więc powinna być? To zależy. Jeśli nie chcesz zbytnio w to się zagłębiać, to polecam 150% wielkości fontu. Zastanawiasz się pewnie, dlaczego aż tyle? Aby oko mogło spokojnie poruszać się między wierszami. Większa interlinia sprawia, że tekst jest przyjaźniejszy dla oka.
Jak wybrać kolor fontu?
Kolor powinien być dobrze kontrastujący z tłem. Tak, aby tekst dało się bezproblemowo przeczytać. Aby sprawdzić czytelność, polecam narzędzia do zgodności z WCAG. Rozwiewa to wszelkie wątpliwości na temat kontrastu i czytelności tekstu. Link do takich narzędzi na końcu artykułu.
Ile tekst powinien mieć znaków w linii, do wygodnego czytania
Kolejną dobrą praktyką jest, zwrócenie uwagi na to ile właściwie słów lub znaków jest w jednej linii tekstu. Dziwne co? Nie, nie czepiam się, to naprawdę istotne. Zwróć uwagę na to, że zarówno w gazetach, jak i na stronach www, tekst nie jest ułożony maksymalnie od lewej do prawej (a jak jest to źle). Dlaczego? Ponieważ łatwiej jest skanować wzrokiem mniejsze obszary tekstu. Jak rozłożysz tekst po całej stronie, to ktoś na dużym monitorze będzie musiał ruszać głową z lewej strony na prawą. Więc jak nie sprzedajesz sprzętu medycznego, to ból szyi nie jest pożądanym efektem u Twojego czytelnika (Kolejny sucharek. Jestem dziś w formie! ;)). Dlatego zwróć uwagę na to, aby tekst nie miał więcej niż 75 znaków w wierszu. Wpłynie to bardzo pozytywnie na czytelność. Wtedy tekst można łatwiej skanować wzrokiem, czytać szybciej i bardziej przyswajać.
Pogrubiaj — tylko żeby wyróżnić
Wcześniej już opisywałem jak wyróżniać komunikaty i ustalać hierarchię.Tutaj wspomnę tylko, że pogrubiony tekst należy stosować tylko do podkreślenia jakiegoś komunikatu. Cały tekst pisany grubym fontem czyta się źle. Nie jest to dobra praktyka. Męczy oczy, dodatkowo przestajemy odróżniać nagłówki od reszty tekstu. Oczywiście wszystko zależy od projektu. Jednak w normalnych okolicznościach, font o standardowej grubości jest lepszym rozwiązaniem. Pogrubienie zostaw do wyróżnienia treści.
Formatowanie tekstu nie może być nudne!
Dobre formatowanie tekstu nie może być monotonne. Odbiorca, patrząc na treść, powinien mieć ochotę ją przeczytać. Gdy szukasz odpowiedzi na jakieś pytanie w internecie. Znajdujesz, wchodzisz, patrzysz. A tam ogromny stek tekstu napisany fontem 11 z jeszcze mniejszą interlinią. Wiedza, która jest przekazana w takim artykule, może być naprawdę ogromna. Jednak tak mało ludzi zechce zapoznać się z tym od początku do końca, że warto poświęcić chwilę na formatowanie tekstu. Wyżej opisałem różne dobre praktyki i błędy. To na co chcę zwrócić Twoją uwagę teraz to zainteresowanie użytkownika.
Treść powinno dać się przeskanować szybko wzrokiem. W internecie dostajemy każdego dnia tyle komunikatów, że nikt nie ma czasu zagłębiać się w szczegóły. Użytkownicy chcą szybko dowiedzieć się, czy akurat tu znajdą odpowiedź na swoje pytanie. Dlatego tak ważne są nagłówki. Wyciągnięcie z tekstu istotniejszych informacji i wyróżnienie ich w odpowiedni sposób.
Warto pisać w mniejszych blokach tekstu i urozmaicać przejścia pomiędzy nimi. Może być to cytat, zdjęcie czy grafika. To naprawdę kilka reguł, dzięki którym z surowej treści powstaje ciekawy artykuł połączony z grafikami lub zdjęciami.
Łam zasady. Tylko wtedy gdy je znasz
Ostatnia zasada jest taka, że wszystkie powyższe możesz złamać.
Ha! Cały artykuł do kosza, cyk.
A tak całkiem poważnie, jeśli już poznałeś wystarczająco zasady, które rządzą typografią, to nic nie stoi na przeszkodzie, abyś niektóre z nich złamał. Możesz dodać dzięki temu zupełnie innej stylistyki i dynamiki tekstu. Zarezerwowane to jest jednak dla tych, którzy zjedli zęby na składaniu tekstu. Łamanie zasad powinno być w konkretnym celu. Powodem nie może być to, że Ci się nie chce albo coś Ci nie pasuje. To powinien być przemyślany proces.
Narzędzia do doboru fontów
Contrastchecker — pozwala sprawdzić zgodność kontrastu z wytycznymi WCAG (Web Content Accessibility Guidelines). fonts.ninja — pozwala sprawdzić, jaki font jest użyty na każdej stronie www. Typespiration — Inspiracje pokazujące fajne połączenia fontów. Google Fonts — przeogromny zbiór fontów.
Mam nadzieję, że tym tekstem udało mi się dokładnie zgłębić temat podstaw typografii.
Jeśli masz jakieś pytania, zapraszam do kontaktu! 🙂
