8 złotych zasad typografii do zastosowania już dziś! 

Karol Andruszków

Po drodze jedzie samochód w kształcie strzałki, przy drodze stoją znaki stworzone ze znaków  typograficznych

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.

8 zasad typografii, o których zawsze musisz pamiętać 

1. Wybierz odpowiedni font 

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. 

Różne rodzaje fontów na białym tle

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. 

Jeśli chcesz dowiedzieć się, na co zwrócić uwagę przy wyborze najlepszego fontu dla swojej witryny, sprawdź nasz artykuł o fontach internetowych. 

2. Wybierz rozmiar fontu

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. 

Różne wielkości fontów na zielonym tle

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.

Jak wybrać rozmiar nagłówka?

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%. 

Fonty w wersji mobilnej 

Dwa telefony komórkowe ze stronami internetowymi

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. 

3. Kieruj się zasadą: mniej znaczy więcej

Dwa przykłady czcionek na białym tle

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.

Gotów by stworzyć własną stronę?

Skorzystaj z najwygodniejszego kreatora stron, któremu zaufały już tysiące użytkowników i twórz strony, które zapewnią Ci klientów!

Zaczynamy!

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. 

4. Opracuj strukturę treści

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?

Wysokość interlinii

Strona internetowa z podziałem tekstowym

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.  

Akapity i długość linii

Napisy na białym tle z akapitami

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. 

Wyrównanie

Trzy okręgi z czarnym tekstem

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. 

5. Dopasuj kolory

Cztery prostokąty różnokolorowe z tekstem

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:

Uważaj na zbyt dużą liczbę koloró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.  

Użyj kontrastu

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. 

Wybierz pasujące kolory

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. 

6. Wyróżnij się

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.

7. Stwórz własną skalę fontów

Grafika - Skala fontów

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.

8. Przeprowadź research i szukaj inspiracji

Grafika - Research i inspiracja

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ć!

Najlepsze zasady typografii - podsumowanie

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ż: 

Karol Andruszków
CEO BOWWE
Uśmiechnięty mężczyzna

Karol jest przedsiębiorcą i założycielem 3 startupów, w ramach których doradzał kilkuset firmom. Odpowiadał również za projekty największych instytucji finansowych w Europie, warte powyżej 50 milionów euro. Ma dwa tytuły magisterskie, jeden z informatyki, a drugi z zarządzania, które uzyskał podczas studiów w Polsce i w Portugalii. Swoje doświadczenie zdobywał w Dolinie Krzemowej oraz podczas prowadzenia firm w wielu krajach m.in. w Polsce, Portugalii, Stanach Zjednoczonych, Wielkiej Brytanii. Od ponad dziesięciu lat pomaga startupom, instytucją finansowym, małym i średnim firmom usprawniać ich funkcjonowanie poprzez cyfryzację. 

Gotowy do zbudowania własnej strony internetowej?

Nie martw się, pomożemy Ci! Możemy też to zrobić za Ciebie!

Zacznij teraz
banner image
1
Promocja ważna jeszcze:

Godziny

Minuty

Sekundy

Niepowtarzalna oferta tylko przez 48 godzin!

TYLKO TERAZ: 3 lata za mniej niż 1 rok!

Oferta dla nowych kont na najlepszy kreator wg użytkowników AppSumo

TYLKO TERAZ PRZEZ 48H: oferta na 3 lata za mniej niż 1 rok!
price background
oszczędź aż
2 953 zł
sprawdź teraz
bowwe robot