Jak zaprojektować najlepsze teksty na stronę - 7 złotych reguł UX designera

Chciałbyś poprawić UX na swojej stronie, ale nie masz czasu na naukę skomplikowanych zasad projektowania tekstu? Z BOWWE nie musisz stawać się ekspertem w tej dziedzinie. Wystarczy, że zastosujesz na swojej stronie kilka prostych tricków! Wyjaśniamy najważniejsze zasady typografii internetowej, których znajomość na zawsze odmieni estetykę contentu na Twojej stronie.

Mimo, że typografia ma dziś ogromne znaczenie w projektowaniu stron i aplikacji internetowych, nadal pozostaje jednym z najczęściej zaniedbywanych elementów podczas projektowania stron internetowych czy prowadzenia bloga. Często zapominamy, że czytelność tekstu jest równie ważna dla użytkownika, jak sama treść. Elementy typografii takie jak rozmiar, szerokość czy kolor czcionki mają ogromny wpływ na User Experience, czyli wrażenia użytkownika w sieci.

Jak sprawić więc, aby tekst na stronie był czytelny i zgodny z identyfikacją wizualną Twojej marki? Reguły typograficzne stosowane podczas projektowania stron internetowych wbrew pozorom nie są bardzo skomplikowane, a ich znajomość może okazać się niezastąpiona. Zebraliśmy 7 najważniejszych reguł, dzięki którym stworzysz idealny system typografii swojej strony i znacząco poprawisz jej User Experience.

1. Wybierz odpowiednią czcionkę

Najważniejszą rzeczą jest to, aby typografia oddawała prawdziwy charakter Twojej branży. Dlatego wybór właściwego fontu do projektu strony nie może być kwestią przypadku. To, że dany font jest popularny i po prostu Ci się podoba, nie oznacza, że będzie on odpowiedni dla Twojej branży. Zwróć uwagę na to, co komunikuje krój pisma (czyli  jego cechy graficzne, tj. styl, proporcja, kształt).

Kiedy projektujesz, wybierz taki font, który będzie przemawiał do twojej grupy odbiorców. Z czym kojarzy ci się eleganckie pismo ręczne  (ang. handwiritng), a z czym wyrazisty, masywny font? Czy użyłbyś ich do przekazania tych samych treści? Jeżeli prowadzisz sklep dziecięcy, nie zastosujesz fontów prostych i eleganckich o charakterze biznesowym i na odwrót. Jeżeli chcesz dowiedzieć się, na co zwracać uwagę podczas wyboru najlepszej czcionki na stronę, zajrzyj do naszego artykułu o fontach.

Gdzie szukać darmowych czcionek?

Jeśli nie masz czasu na opracowanie unikatowego fontu, możesz zdecydować się na sprawdzone, najpopularniejsze czcionki. Możesz skorzystać z płatnych czcionek oferowanych, chociażby przez Adobe lub ze stockowych stron z darmowymi fontami, np. z obszernej bazy Google Fonts.

Jak instalować czcionki?

Po pobraniu pliku z czcionką trzeba ją zainstalować. Możesz to zrobić na dwa sposoby:
  • instalacja na komputerze - jest to prostsza opcja. Jedyne co musisz zrobić, to rozpakować plik z czcionką. Następnie należy skopiować wszystkie rozpakowane pliki do katalogu „fonts”, który znajdziesz w folderze „Windows” na swoim komputerze. Później możesz już otworzyć czcionkę w każdym prostym programie graficznym typu GIMP.
  • instalacja bezpośrednio na stronie internetowej - jest to bardziej skomplikowany sposób. Jeżeli nie posiadasz umiejętności kodowania, będziesz musiał poprosić o pomoc programistę lub web designera.

2. Wybierz rozmiar czcionki

Rozmiar czcionki na stronie ma znaczenie! Jeśli dobierzesz czcionkę, która nie jest zbyt mała ani zbyt duża, znacznie ułatwisz swoim użytkownikom czytanie. Specjalna jednostka stosowana przez typografów do opisu fontów to pt lub pkt, czyli punkty. Preferowany zakres wielkości fontów do wykorzystania na stronach internetowych waha się między 14–25pt. Większe fonty możemy zarezerwować dla nagłówków (20pt i wyżej), a dla zwykłego tekstu najlepiej sprawdzi się zakres 14-18pt. Bez względu na to, na jaki rozmiar czcionki się zdecydujesz, upewnij się, że wielkość fontu:
  • Sprawia, że tekst jest czytelny - czcionka o wielkości 12pt i poniżej może już znacząco utrudnić czytelność;
  • Pasuje do kroju czcionki - przykładowo dla swojej systemowej czcionki Roboto Google zaleca minimum 16 pt. Z kolei San Fransisco - czczionka stosowana m.in.: w urządzeniach firmy Apple, powinna mieć przynajmniej 18 pt. wielkości; 
  • Odzwierciedla przeznaczenie strony - jeżeli na stronie nie dominuje tekst, a design, można zastosować mniejszą czcionkę. Również w przypadku stron interaktywnych, które na każdym kroku zachęcają użytkownika do klikania, można pozwolić sobie na taki zabieg. Jeżeli zaś mamy do czynienia ze stroną, na której przeważa tekst, a głównym zadaniem użytkownika jest właśnie czytanie (np. sfera blogowa, portal z informacjami) - lepiej zdecydować się na nieco większy font.

Jak dobrać wielkość nagłówka?

Zdecydowałeś się na rozmiar czcionki tekstu podstawowego, ale nie wiesz jak zachować odpowiednie proporcje wielkości nagłówków w stosunku do reszty treści? Istnieje na to kilka sprawdzonych metod:
  • Nagłówek H1 powinien stanowić 300% rozmiaru czcionki użytej w tekście głównym.

Dla przykładu, jeśli na swojej stronie do tekstu podstawowego zastosowałeś czcionkę o rozmiarze 18pt, optymalnym rozmiarem dla nagłówków będzie 54pt.

  • Nagłówek H2 powinien stanowić 200% rozmiaru czcionki tekstu podstawowego. 

W tym przypadku, przy rozmiarze podstawowej czcionki wynoszącym 18pkt, idealny nagłówek H2 wyniesie 36pt.

Nasza rada: Przy kolejnych nagłówkach można stopniowo zmniejszać wartość procentową, np. przy nagłówku H4 możesz pomnożyć rozmiar podstawowej czcionki o 130-150%.

Fonty w wersji mobilnej 

Wybierając rozmiar czcionki, musisz przede wszystkim odpowiedzieć sobie na pytanie, na jakich urządzeniach docelowo będzie wyświetlany tekst. Inaczej będzie prezentować się ten sam rozmiar fontu na monitorach laptopów, niż na urządzeniach mobilnych. Jeżeli wolisz skupić się na wyglądzie strony w sferze mobilnej, zapamiętaj te dwie ważne zasady:

  • na ekranach smartfonów duża czcionka nie będzie prezentować się ładnie 
  • nagłówki nie powinny zajmować więcej niż dwie linie

Dlatego przy projekcie strony mobilnej warto sprawdzić, jak prezentuje się tekst i  upewnić się, czy czcionka nie jest za duża. 

3. Stosuj zasadę: Mniej znaczy więcej

Podczas projektowania stron internetowych najlepiej kierować się zasadą minimalizmu. Użycie w jednym projekcie więcej niż dwóch rodzajów czcionek może już zaburzyć estetykę projektu. Najbezpieczniejszym rozwiązaniem jest wybór dwóch rodzajów czcionek: do nagłówków oraz tekstu zwykłego. Pamiętaj też, że nie wszystkie czcionki łączą się ze sobą. Istnieją pary fontów, które lubią się bardziej i takie, które absolutnie ze sobą nie współgrają. Warto się z nimi zapoznać, zanim dokonasz ostatecznego wyboru! Polecamy skorzystać z wyszukiwarki najlepszych kombinacji fontów od Canvy.

4. Opracuj strukturę treści

Równie ważnym aspektem typografii co dobór czcionki jest rozplanowanie struktury wszystkich treści na stronie. Nieważne czy jest to krótki opis Twojej działalności, czy może obszerny artykuł w sekcji blogowej - struktura każdego rodzaju treści ma ogromny wpływ na odbiór Twojej strony przez użytkowników. Najważniejsze elementy, o które należy zadbać, aby zachować spójność struktury tekstu, to:

Odległość między wersami 

Ważne jest zachowanie odpowiedniej wysokości linii (ang. line-height), czyli przestrzeni między wersami. Zbyt mała odległość sprawi, że linie tekstu będą praktycznie na siebie nachodzić. Z kolei zbyt duża spowoduje, że tekst będzie „rozstrzelony”. Najlepiej więc znaleźć złoty środek. 

Długość wersów i akapitów

Nie od dziś wiadomo, że krótkie fragmenty tekstu zdecydowanie lepiej się czyta. Zbyt długie wersy, czy akapity mogą być męczące dla oczu i zaburzać rytm czytania. Aby nie znużyć użytkownika, długość wiersza powinna oscylować wokół 50-75 znaków. To samo dotyczy akapitów, o których nie należy zapominać.  Dzięki akapitom dłuższe teksty staną się bardziej przystępne w odbiorze.

Wyrównania

Za pomocą właściwości text-allign możesz ustawić sposób wyrównania tekstu i  przyciągnąć tekst to prawej lub lewej strony. Możesz też go wyjustować do obu krawędzi lub wyśrodkować
Nasza rada: Chociaż wyrównanie wszystkich krawędzi tekstu wydaje się wygodnym rozwiązaniem, nie polecamy całkowitego wyjustowania treści na stronie. Wyjustowane teksty w Internecie po prostu nie wyglądają dobrze i wbrew pozorom zakłócają czytelność. Przy wyrównaniu do lewej krawędzi (tzw. skład chorągiewkowy) masz możliwość przeniesienia słów, które się nie mieszczą do kolejnego wersu, wciąż zachowując jednakowe odstępy międzywyrazowe. Ten sposób jest bardziej naturalny dla oka i nadaje odpowiedni rytm czytania.

5. Dopasuj kolory

Kolor czcionki to element typografii, który jest ściśle powiązany z identyfikacją wizualną Twojej marki w Internecie. Jednak tak jak z łączeniem fontów, przy doborze ich kolorów również należy zachować ostrożność. Oto najważniejsze standardy dotyczące koloru czcionek:

Wybierz maksymalnie 3 kolory

Wiesz już, że w typografii lepiej kierować się minimalizmem. To samo dotyczy kolorów. Użycie więcej niż trzech barw w tekście może już wprowadzić na stronie chaos i sprawić, że będzie ona wyglądać infantylnie. 

Zadbaj o kontrast 

Tekst powinien posiadać odpowiedni kontrast w stosunku do tła. Oczywiście najbezpieczniejsze zestawienie to czarny kolor czcionki na białym lub jasnoszarym tle. Jest to najbardziej naturalne połączenie kolorów, które nie męczy oczu podczas czytania.

Łącz tylko pasujące kolory

Pamiętaj, że istnieją kolory, które po prostu ze sobą nie współgrają, np. czerwony z zielonym. Łamanie schematów kolorystycznych w przypadku czcionek z reguły się nie sprawdza.  

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!

6. Wyróżnij się

Dzięki hierarchii ważności w tekście możesz podkreślić, że dane słowo jest po prostu ważniejsze od innego. Najistotniejsze słowa na Twojej stronie powinny być więc wyróżnione. Mogą być WIĘKSZE, pogrubione, napisane kursywą, zaznaczone innym kolorem lub odseparowane przez wolną przestrzeń.

Elementy tekstu, które warto wyróżnić na stronie internetowej:

  • Możesz wyróżnić przyciski CTA (ang. Call To Action), czyli tzw. wezwania do działania. Nadając im inne tło, będą odznaczać się na tle pozostałego tekstu. 
  • Jeśli chcesz żyć w zgodzie z SEO, dobrym pomysłem będzie pogrubienie słów kluczowych definiujących Twoją branżę. Pogrubione słowa-klucze od razu rzucą się w oczy odwiedzającym stronę. Dzięki temu Twoją strona będzie zapamiętana nie tylko przez wyszukiwarki, ale też użytkowników. 
  • Możesz też wyróżnić font! Jeżeli zdecydowałeś się skorzystać z popularnego kroju czcionki, a wciąż chciałbyś się wyróżnić, możesz nadać mu unikatowe cechy. Ozdób go używając pogrubienia (ang. bold) lub dodając szeryfy.

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

Eksperymentuj z wielkością czcionki, skalą i różnymi webfonami! Możesz skorzystać z darmowych stron. Dzięki temu możesz łatwo opracować własny system fontów na stronę, nawet jeśli nie jesteś web designerem. Wypróbuj Type Scale - stronę, która oferuje podgląd i wybór odpowiedniej skali czcionek dla Twojego projektu lub material.io - gdzie również masz możliwość w sposób interaktywny opracować system fontów na swoją stronę. Możesz tutaj zbudować typograficzną wizualizację projektu strony bez umiejętności kodowania.
Znajdź najlepsze projekty witryn, a na nich przykłady ciekawej typografii. Na stronach takich jak Dribbble możesz odszukać mnóstwo inspiracji graficznych. Dzięki temu dowiesz się, co jest na topie w świecie designu: geometryczne fonty, czy może prosta czcionka. Wśród obecnie panujących trendów z pewnością warto wymienić flat design. Dosłownie tłumacząc, jest to „projektowanie płaskie”. To trend w projektowaniu opierający się na prostym designie, w którym typografia odgrywa ważną rolę. Dobór odpowiednio minimalistycznej czcionki jest tutaj kluczowy.

Nie ignoruj typografii na swojej stronie

W tym artykule przybliżyliśmy najważniejsze aspekty, na jakie powinniśmy zwrócić uwagę, chcąc poprawić typografię na swojej witrynie. Teraz wiesz już, że zły dobór czcionek, niewłaściwa szerokość tekstu lub za małe odstępy mogą zaburzyć odbiór tekstu na stronie, a tym samym zniechęcić użytkowników do jej odwiedzania! Pamiętaj, że typografia to klucz do sukcesu projektu każdej strony internetowej. Stosując się do jej elementarnych zasad, masz pewność, że tekst będzie nie tylko czytelny, ale przede wszystkim stworzy odpowiedni nastrój i wiernie odda stylistykę Twojej strony.

Gotowy do zbudowania własnej strony internetowej?

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

Zacznij teraz
banner image

Stwórz własną profesjonalną stronę internetową

Zacznij teraz
1