Wstęp:
Typografia na stronie internetowej pełni znaczącą rolę w kształtowaniu odbioru treści i wizerunku marki. To nie tylko estetyczny element, ale przede wszystkim skuteczne narzędzie komunikacyjne. W dzisiejszym cyfrowym świecie, gdzie pierwsze wrażenie często decyduje o pozostaniu na stronie, właściwe zastosowanie typografii staje się kluczowe. Warto zrozumieć, jakie elementy typografii mają wpływ na czytelność i estetykę strony, a także jak dopasować je do charakteru marki. Poniżej omówimy kluczowe pojęcia związane z typografią internetową oraz jej roli w projektowaniu stron.
To, co najprostsze, zwykle bywa najtrudniejsze. Tak często bywa w przypadku typografii. W tym wpisie chciałabym wyjaśnić, dlaczego typografia jest ważnym elementem każdej strony internetowej oraz co wziąć pod uwagę, aby tekst wyświetlał się na Twojej witrynie jak najlepiej.
Typografia internetowa w większości jest zbieżna z zasadami typografii projektów drukowanych. Jest projektowaniem i stosowaniem krojów pisma jako środka komunikacji. Ułożenie liter, cyfr czy znaków oraz rozplanowanie akapitów na stronie to elementy, o których musimy pamiętać, będąc na etapie projektowania tekstów.
Na początek przytoczymy kilka pojęć, które są związane z typografią.
Czcionka – nośnik pisma w kształcie prostopadłościanu (zwykle metalowego), którego odbicie tworzy znaki pisma. Podstawowy materiał zecerski, który służy do druku typograficznego. Tyczy się druku papierniczego.
Font – nośnik pisma w postaci cyfrowego zapisu.
Krój pisma – charakterystyczny kształt graficzny kompletu znaków. Obraz graficzny liter, cyfr oraz znaków interpunkcyjnych (i innych) składa się na krój pisma. Każdy z nich ma swoją indywidualną nazwę, niektóre pochodzą z tych samych rodzin krojów pisma
Dukt – wygląd grubych i cienkich elementów liter, ich kątów pochylenia, zakończeń czy długości.
Pismo szeryfowe (z ang. slab serif) – to takie, które posiada elementy zdobień, ornamenty. Jednym z najpopularniejszych krojów takiego pisma są Times New Roman i Georgia.
Pismo bezszeryfowe (z ang. sans serif) – będzie pozbawione dodatkowych zdobień przy zakończeniach. Jeden z najpopularniejszych przykładów to Arial.
Maniskuła – mała litera alfabetu.
Majuskuła – wielka litera alfabetu.
Wersaliki – wielkie litery.
Kapitaliki – niższa wersja wielkich liter. Ich wysokość odpowiada wysokości maniskuł. Są stosowane np. w stronach tytułowych.
Kerning – to odstęp pomiędzy konkretnymi literami. Odstępy można zwiększać bądź zmniejszać, w zależności od zastosowania tekstu.
Tracking – jednakowe odstępy pomiędzy wszystkimi literami.
Typografia jest elementem wizualnym, jednak nie ogranicza się do funkcji dekoracyjnych. Na stronie internetowej zamieszczony tekst ma nieść informację, która trafi do odbiorcy. Trzeba mieć na uwadze, że większość internautów nie czyta tekstów dokładnie, a jedynie skanuje je wzrokiem, zatrzymując się na fragmentach, które wzbudzą ich zainteresowanie. Zadaniem typografii (obok elementów wizualnych) jest zwrócenie uwagi odbiorcy na najważniejsze informacje, które chcemy przekazać.
W większości starszych poradników dotyczących projektowania stron odnajdziemy dwie zasady – na ekrany krój bezszeryfowy oraz wielkość dopasowana do 16px (domyślna wielkość krojów w najpopularniejszych przeglądarkach). Obecnie wiele się zmieniło. Kroje pisma są dostosowane do charakteru informacji, głosu marki oraz (wciąż) powinny spełniać podstawowe zasady.
Wygląd tekstu na stronie wpływa na wizualny aspekt strony. Może przekazać charakter witryny oraz nakierować użytkownika, na jakie sekcje strony ma zwrócić uwagę. Dobrze dobrany font sprawi, że menu będzie czytelne, więc strona będzie łatwiejsza w nawigacji. Dobrze dobrana typografia sprawia, że witryna wygląda profesjonalnie.
Przy ustalaniu typografii dla swojej marki upewnij się, że wybrany krój pisma ma swoją wersję webfonta. Oznacza to, że jego twórcy wzięli pod uwagę, że będzie on wyświetlany na ekranie. Zdarza się, że kroje są zaprojektowane tylko pod kątem druku lub tylko do wyświetlania w internecie.
Co to oznacza? Czy w wybranym przez nas kroju pisma znajdują się wszystkie polskie znaki? Jeżeli nie ma, w projekcie litery ą, ę, ś, ź, ż, ł będą się wyświetlały innym krojem pisma. Aby temu zapobiec, warto w filtrach wyszukiwarki zaznaczyć opcję Latin Extended lub wersję językową, o ile jest taka możliwość. Wyłączanie polskich znaków ma wpływ nie tylko na aspekt wizualny, ale także na płynność czytania tekstu. Jeżeli coś wygląda nietypowo i inaczej niż reszta, nasze oko, zamiast skoncentrować się na tekście, będzie skupiać się na odróżniających się elementach.
Jednym z najważniejszych elementów przy wyborze kroju do długich tekstów jest czytelność. Niejeden właściciel branży chciałby użyć fontu, który odzwierciedla jego markę, np. pochyłego kroju naśladującego odręczne pismo. Może się wydawać, że takie rozwiązanie jest świetne, ale w rzeczywistości treści będą nieczytelne.
Jeżeli zdecydujesz się na ozdobne fonty, warto ograniczyć je do nagłówków lub krótkich fraz, które pojawią się na stronie i będą estetycznym uzupełnieniem.
Kontrast ma wpływ na czytelność. Czym jest kontrast w typografii? To różnica między najgrubszą a najcieńszą kreską w literze. Są kroje pisma, w których wszystkie linie są prawie jednakowej grubości.
Kroje, które charakteryzują się dużym kontrastem, mogą być problematyczne. Przy długich tekstach, np. na blogach, najcieńsze kreski mogą być niewidoczne. Takie kroje warto zostawić dla nagłówków, które występują w większych rozmiarach.
Wysokością x nazwiemy wysokość małych liter w kroju. Kroje pisma są różne, więc i wysokość x może się różnić. Jaki ma to wpływ na tekst i jego czytelność? Im mniejsza wysokość x, tym bardziej powinniśmy zwiększać litery. Wynika to z wysokości małych i wielkich liter.
Należy pamiętać, że jest to jedynie zalecenie. Mała wysokość x nie wyklucza kroju jako dobrego składania długich tekstów. Warto zaplanować testy A/B w momencie, w którym jest wątpliwość odnośnie wyboru fontów – niech wygra ten, który jest czytelniejszy dla odbiorców.
Warto zwrócić uwagę, jak wybrany krój pisma wygląda w wersji mobile. Nie jest konieczne implementowanie specjalnego fontu pod wersję mobile, po prostu wybrany ma pasować do każdej formy wykorzystania, czyli wyglądać dobrze również na telefonie komórkowym. Typografia może Cię również wyróżnić w procesie SEO w regionie (więcej na https://www.sunrisesystem.pl/pozycjonowanie-stron/lokalne/).
Branding marki składa się z nazwy, logo, typografii oraz innych elementów identyfikacji wizualnej. Typografia ma duży wpływ na branding – na osobowość marki oraz to, jak jest postrzegana przez konsumentów. Dobrze dobrana typografia może podkreślić wiarygodność marki i pokazać, że jest godna zaufania. Niektóre fonty mają charakter techniczny, a niektóre sprawiają wrażenie „zmiękczenia” tekstu. Źle dobrana typografia może spowodować, że marka będzie wyglądać tanio i nieprofesjonalnie.
Branding może – i powinien – wpływać na typografię. Marka może się zdecydować na wykorzystanie danego fontu, ponieważ jest on powiązany z konkretnym typem klienta. Charakter marki wpływa również na przedstawienie tekstu. Decyduje o zastosowanym kolorze, odstępach, rozmiarze czy kącie pochylenia. Typografia ma tworzyć spójną część z pozostałymi elementami identyfikacji wizualnej marki. Jest to obowiązkowa strona w brand booku. Należy pamiętać, że krój pisma to nasz element reprezentacyjny i powinien być spójny z tym, co marka chce przekazać.
Przy tworzeniu makiety strony internetowej jednym z celów do osiągnięcia jest zaprojektowanie jej w sposób przejrzysty. Niczym odkrywczym nie będzie stwierdzenie, że nie warto przekazywać użytkownikowi ściany tekstu. Poniżej wskazówki, które ułatwią początek prac:
Akapit – ważne fragmenty tekstów powinny zaczynać się od nowego wiersza oraz wcięcia (zwykle od 1 do 2 firetów).
Nagłówki – jeżeli poświęcimy im chwilę, poprawimy również pozycjonowanie swojej strony internetowej. Nagłówki, którymi posługujemy się na stronie internetowej, czyli H1, H2, H3, to tytuły danej sekcji tekstowej wskazujące czytelnikowi, o czym będzie kolejna część. Warto je zoptymalizować również pod kątem SEO.
Whitespace – niezaznaczony obszar pomiędzy elementami strony internetowej, np. zdjęciami, grafikami, tekstem czy formularzami. Projektując whitespaces, poprawiamy estetykę, odbiór oraz skupienie nad przekazem do odbiorcy.
Elementy zbędne – warto spojrzeć na stronę internetową oraz przeanalizować jej czytelność. Czy coś nas rozprasza? Czy coś odciąga uwagę od ważnego tekstu? Jeżeli tak, warto pomyśleć o zmianie ułożenia lub wyeliminowaniu niektórych elementów.
Testuj – warto stworzyć różne kompozycje i je porównać. Zrób wizualizację, jak nagłówek np. strony głównej będzie wyglądał przy zastosowaniu różnych fontów.
Oto kilka zasobów, które pomogą Ci zgłębić wiedzę na temat typografii:
Podręcznik niemieckich specjalistów, w którym omówione są podstawowe zagadnienia, przed którymi staje każdy zajmujący się projektowaniem.
Teoria i wiedza na temat budowania układów typograficznych.
Wnioski płynące z analizy roli typografii w projektowaniu stron internetowych są jednoznaczne – to nie tylko kwestia estetyki, ale przede wszystkim skuteczności komunikacji. Sunrise System wie, że wybór odpowiedniego kroju pisma, jego czytelność, kontrasty i dopasowanie do różnych wersji strony (szczególnie mobilnej) to elementy, które mogą zdecydować o sukcesie witryny. W dzisiejszym środowisku online, gdzie konkurencja jest ogromna, użytkownicy mają wysokie oczekiwania co do przejrzystości i estetyki prezentowanych treści.
Pamiętajmy także o znaczeniu typografii dla brandingu. To nie tylko kwestia estetycznego doboru czcionki, ale także budowania spójnej identyfikacji wizualnej marki. Typografia może podkreślać charakter marki, wpływać na jej osobowość i wizerunek. Dlatego przy projektowaniu strony warto zwrócić uwagę nie tylko na trendy w typografii, ale przede wszystkim na to, jakie wartości i emocje chcemy przekazać naszym odbiorcom.
