Wstęp:
Projektowanie strony internetowej to wyzwanie, któremu trzeba sprostać, łącząc funkcjonalność z estetyką. Jednym z kluczowych elementów tego procesu jest odpowiednie zastosowanie typografii. Wartościowe treści, choćby najlepiej napisane, nie zrobią wrażenia bez właściwej formy. Dlatego zastanówmy się, dlaczego typografia ma tak istotne znaczenie w kontekście witryny internetowej i jakie aspekty warto wziąć pod uwagę, aby osiągnąć optymalny efekt wizualny i komunikacyjny.
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 (co wspomoże odbiór użytkowników, ważny w kontekście SEO, o którym więcej na https://www.sunrisesystem.pl/pozycjonowanie-stron/lokalne/)
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.
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.
Skąd czerpać wiedzę o typografii
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.
W drodze do stworzenia doskonałej strony internetowej nie możemy zaniedbywać roli, jaką odgrywa typografia. To nie tylko kwestia wyboru ładnych liter – to głównie strategia komunikacyjna, która wpływa na sposób, w jaki odbiorcy przyswajają treści. Odpowiednio dobrana czcionka, właściwy kontrast czy zrównoważony odstęp pomiędzy literami to detale, które składają się na ogólny obraz witryny. Dlatego inwestycja w zrozumienie zasad typografii przekłada się nie tylko na atrakcyjny wygląd strony, ale także na jej skuteczność w przekazywaniu informacji.
W Sunrise System pamiętamy, że typografia to nieustanny rozwój i dostosowywanie się do zmieniających się trendów i oczekiwań użytkowników. W miarę jak technologia idzie do przodu, również typografia internetowa ewoluuje. Z tego powodu warto być na bieżąco z nowinkami, ale jednocześnie trzymać się solidnych podstaw. Przemyślane zastosowanie typografii nie tylko sprawi, że strona będzie estetyczna, ale również zapewni użytkownikom przyjemne doświadczenie podczas przeglądania treści.
