Dobrze przemyślana i dobrana typografia jest kluczem do uzyskania estetycznej i, co najważniejsze, łatwej do odczytania strony internetowej. Ale czy wiesz, jak sprawić, by tekst na stronie był czytelny i spójny z tożsamością Twojej marki? 

Nie martw się. Zebrałem 8 najważniejszych zasad typografii, które sprawią, że cały proces tworzenia idealnej typografii dla Twojej witryny będzie łatwy i skuteczny. Upewnij się, że przestrzegasz wszystkich zasad, a zostaniesz nagrodzony przejrzystym systemem typografii, który sprawi, że Twój projekt będzie wyglądał profesjonalnie i  zapewniał znakomite UX.

Najważniejszą rzeczą jest to, aby Twoja typografia odzwierciedlała prawdziwy charakter Twojej branży. Dlatego wybór odpowiedniej typografii strony internetowej nie może być kwestią przypadku. To, że font jest popularny i podoba Ci się, nie oznacza, że ​​będzie odpowiedni dla Twojej marki. 

Zwróć uwagę na to, co komunikuje font i czy pasuje do stylu Twojej marki. Jeśli prowadzisz sklep dziecięcy, nie będziesz używać prostych i eleganckich fontów biznesowych i odwrotnie. Zawsze dopasowuj fonty do komunikacji marki, aby były z nią spójne. 

Rozmiar fontu na stronie ma znaczenie! Jeśli wybierzesz font, który nie jest za mały ani za duży, znacznie ułatwisz czytanie swoim użytkownikom. Specjalną jednostką, której typografowie używają do opisywania fontów jest „pt” lub „point”. 

Preferowany zakres standardowych rozmiarów fontów dla stron internetowych jest pomiędzy 14-25pt. Większe fonty można zarezerwować dla nagłówków – 20 pkt i więcej, a dla zwykłego tekstu najlepszy zakres to 14-18pt. 

Niezależnie od rozmiaru fontu, który wybierzesz, upewnij się, że rozmiar fontu: 

a) czyni tekst czytelnym - font 12pt i mniejszy może znacznie utrudnić czytelność;

b) pasuje do kroju pisma - np. dla fontu systemowego Roboto, Google zaleca minimum 16pt. Z kolei San Francisco – font używany m.in. w urządzeniach Apple powinien mieć rozmiar co najmniej 18pt;

c) odzwierciedla przeznaczenie strony internetowej - jeśli strona nie jest zdominowana przez tekst, ale przez np. obraz, możesz użyć mniejszego fontu. Również w przypadku stron interaktywnych, które na każdym kroku zachęcają użytkownika do klikania, na takie rozwiązanie można sobie pozwolić. Jeśli natomiast masz do czynienia ze stroną, w której dominuje tekst (np. bloga, portal informacyjny), a głównym zadaniem użytkownika jest czytanie – lepiej wybrać nieco większy font.

Czy zdecydowałeś się na rozmiar fontu tekstu podstawowego, ale nie wiesz, jakie zachować proporcje nagłówków w stosunku do reszty treści? Istnieje kilka dobrych praktyk w tym zakresie:

a) Nagłówek H1 powinien odpowiadać 300% rozmiaru fontu użytego w tekście głównym. Na przykład, jeśli Twoja witryna używa fontu 18pt dla tekstu podstawowego, optymalny rozmiar nagłówków to 54pt.

b) Nagłówek H2 powinien zajmować 200% rozmiaru fontu tekstu podstawowego. W tym przypadku, przy podstawowym rozmiarze fontu 18pt, idealny nagłówek H2 to 36pt.

⚡ Wskazówka BOWWE:

W przypadku kolejnych nagłówków możesz stopniowo zmniejszać procent; np. dla nagłówka H4 można pomnożyć podstawowy rozmiar fontu przez 130-150%. 

Wybierając rozmiar fontu należy odpowiedzieć na pytanie, na jakich urządzeniach tekst będzie wyświetlany. Rozmiar fontu będzie wyglądał inaczej na monitorach laptopów niż na urządzeniach mobilnych. Jeśli wolisz skupić się na wyglądzie strony na urządzeniach mobilnych, pamiętaj o dwóch ważnych zasadach:

a) Na ekranach smartfonów duży font nie będzie ładnie wyglądać. 

b) Nagłówki nie powinny zajmować więcej niż dwie linijki.

Dlatego projektując stronę mobilną warto sprawdzić, jak wygląda tekst i upewnić się, czy font nie jest zbyt duży.

⚡ Wskazówka BOWWE:

Podczas tworzenia strony internetowej w kreatorze BOWWE, jest ona automatycznie responsywna. Oznacza to, że przede wszystkim nie musisz tworzyć osobnej strony internetowej dostosowanej do urządzeń mobilnych. Po drugie, edytując witrynę, możesz w kilka sekund przełączać się między podglądem na komputerze i urządzeniu mobilnym. Dzięki temu możesz bardzo łatwo kontrolować, jak wybrany przez Ciebie font zachowuje się na urządzeniach mobilnych. 

Projektując strony internetowe, najlepiej kierować się zasadą minimalizmu. Użycie więcej niż dwóch rodzajów fontów w jednym projekcie może zaburzyć jego estetykę. Najbezpieczniejszym rozwiązaniem jest wybór dwóch rodzajów fontów dla nagłówków i zwykłego tekstu. 

Trzeba jednak również pamiętać o kontraście. Jeśli użyjesz zbyt podobnych fontów, nie przyciągną one uwagi użytkowników. Staraj się nie wybierać dwóch fontów Sans Serif, ale zamiast tego wybierz kombinację Serif i Sans Serif, dzięki czemu Twoje treści będą wyglądać jeszcze bardziej atrakcyjnie.

Pamiętaj też, że nie wszystkie fonty mogą ze sobą współpracować. Istnieją pary fontów, które bardziej do siebie pasują, a niektóre są niedopasowane do siebie. Warto się z nimi zapoznać przed dokonaniem ostatecznego wyboru! 

⚡ Wskazówka BOWWE:

Jeśli chcesz mieć 100% pewność, że wybierasz najlepsze parowanie fontów, zawsze możesz czerpać inspirację ze stron takich jak fontpair.co, gdzie znajdziesz propozycje najlepszych par fontów. 

Równie ważnym aspektem typografii, jak wybór fontu, jest układ i struktura wszystkich treści na stronie. Nieważne, czy jest to krótki opis Twojej firmy, czy obszerny artykuł na blogu – struktura każdego rodzaju treści ma ogromny wpływ na postrzeganie Twojej witryny przez użytkowników. Jakie są zasady typografii dla lepszej czytelności?

Utrzymanie odpowiedniej wysokości interlinii oraz odstępu między linijkami tekstu jest niezbędne. Zbyt mała odległość sprawi, że wiersze tekstu będą się praktycznie nakładać. Z drugiej strony, przez zbyt wysoką interlinię tekt nie będzie estetycznie wyglądać i może być trudno czytelny. Najlepiej jest znaleźć złoty środek.  

Od dawna wiadomo, że o wiele lepiej czyta się krótkie fragmenty tekstu. Zbyt długie wiersze lub akapity mogą męczyć oczy i zaburzać rytm czytania. Długość linii powinna wynosić około 50-75 znaków, aby nie wyczerpywać użytkownika. To samo dotyczy akapitów – ułatwiają czytanie dłuższych tekstów. 

W typografii wyrównanie to położenie tekstu względem marginesu, krawędzi strony lub innego punktu odniesienia. 

⚡ Wskazówka BOWWE:

Chociaż wygodne wydaje się wyrównanie wszystkich krawędzi tekstu, nie zalecamy stosowania tego rozwiązania. Wyjustowany tekst na stronach internetowych po prostu nie wyglądają dobrze i wbrew pozorom obniża czytelność. Przy wyrównaniu do lewej krawędzi możesz przesuwać słowa, które nie mieszczą się do następnym wiersza, zachowując te same odstępy. Jest to bardziej naturalne dla oka i zapewnia prawidłowy rytm czytania. 

Kolor fontów to element typografii ściśle związany z identyfikacją wizualną Twojej marki w Internecie. Jednak, podobnie jak w przypadku łączenia fontów, należy zachować ostrożność przy doborze ich kolorów. Oto najważniejsze standardy dotyczące koloru fontów:

Już wiesz, że w typografii lepiej kierować się minimalizmem. To samo tyczy się kolorów. Użycie więcej niż trzech kolorów w tekście może spowodować chaos na stronie i sprawić, że będzie wyglądać infantylnie.  

Tekst powinien mieć odpowiedni kontrast z tłem. Oczywiście najbezpieczniejszą kombinacją jest czarny kolor fontu na białym lub jasnoszarym tle. Jest to najbardziej naturalne połączenie kolorów i nie męczy oczu użytkownika podczas czytania. 

Pamiętaj, że niektóre kolory, takie jak czerwony i zielony, nie pasują do siebie. Łamanie schematów kolorystycznych w przypadku fontów zwykle nie działa. 

⚡ Wskazówka BOWWE:

Aby szybciej i wydajniej wybrać kolor fontu, możesz użyć narzędzia Color Tool od material.io. Dzięki temu będziesz mógł sprawdzić, czy wybrany kolor fontu będzie dobrze pasował np. do koloru tła na Twojej stronie. 

Dzięki hierarchii ważności w tekście możesz podkreślić, że jedno słowo jest ważniejsze od drugiego. Dlatego należy wyróżnić najważniejsze słowa na Twojej stronie. Możesz je powiększyć, pokolorować, użyć pogrubienia lub kursywy.

⚡ Wskazówka BOWWE:

Podkreślanie bardziej istotnych słów lub fragmentów tekstu jest bardzo ważne w przypadku materiałów blogowych. Taki zabieg czyni je bardziej czytelnymi i łatwiejszymi do zapamiętania. Warto również zastosować ich pogrubienie dla słów kluczowych niezbędnych do wysokiego pozycjonowania strony w wynikach wyszukiwania.

Skalowanie fontów to proces zwiększania lub zmniejszania rozmiaru tekstu na stronie internetowej. 

Warto utworzyć skalę fontów z kilku powodów. Jednym z nich jest upewnienie się, że cały tekst na Twojej stronie ma ten sam rozmiar. Jest to ważne dla użyteczności, głównie jeśli używasz tekstu do przekazywania ważnych informacji odwiedzającym. Może również sprawić, że Twoja strona będzie wyglądać bardziej jednolicie i profesjonalnie.

Innym powodem używania skali fontów jest ułatwienie czytania tekstu. Może się okazać, że niektóre fonty są za małe lub za duże, gdy oglądasz je w domyślnym rozmiarze. Skalując tekst, możesz wygodniej go czytać.

Podczas tworzenia skali fontów należy pamiętać o kilku rzeczach.

a) Upewnij się, że cały tekst na Twojej stronie ma ten sam rozmiar. Obejmuje to zarówno tekst podstawowy, jak i wszelkie nagłówki lub inne elementy tekstowe.

b) Wybierz rozmiar fontów, który jest wygodny i łatwy do odczytania. Być może będziesz musiał poeksperymentować z różnymi rozmiarami fontów, aby znaleźć ten, który jest dla Ciebie odpowiedni. Niektóre fonty mogą wyglądać dobrze w dużym rozmiarze, ale stają się trudne do odczytania, gdy są pomniejszone.

⚡ Wskazówka BOWWE:

Istnieje wiele bezpłatnych narzędzi online, za pomocą których można łatwo utworzyć skalę fontów. Jednym z nich jest type-scale.com.

Znajdź najlepsze projekty stron internetowych z przykładami typografii, która do Ciebie przemiawia. Na stronach takich jak Dribbble można znaleźć mnóstwo inspiracji. Możesz także korzystać z platform takich jak Pinterest ​​które pozwalają tworzyć tak zwane Tablice , na których możesz zbierać wszystko, co Cię inspiruje i dzielić się tym ze znajomymi lub współpracownikami. 

Warto też zrobić research wśród stron internetowych podobnych do Twojej lub po prostu Twojej konkurencji. Dowiesz się, jak inni wdrażają najlepsze zasady typografii i jak Ty też możesz to robić!

Pamiętaj, że typografia jest kluczem do sukcesu każdego projektu strony internetowej. Stosując zasady typografii masz pewność, że tekst będzie nie tylko czytelny, ale przede wszystkim wprowadzi w odpowiedni nastrój i wiernie odda styl Twojej marki. 

Postępując zgodnie z najlepszymi praktykami dobrej typografii przedstawionymi w tym artykule, szybko poprawisz wygląd Twojej strony, a co najważniejsze, zwiększysz wygodę użytkownika!

Przeczytaj również: