Typograficzne porady dla web designerów – 7 wskazówek

Na samym wstępie tego tekstu chciałbym zaznaczyć, iż – pomimo znajomości różnic między pojęciami font a czcionka – w tym wpisie stosował będę oba wyrazy zamiennie, na zasadzie synonimów. Mimo wszystko sporo osób nadal mówi o „czcionkach” i to właśnie tego pojęcia używa, mając na myśli tekst widoczny w sieci.

Przechodząc do meritum – rola fontów na stronach internetowych jest niebagatelna. Za pomocą odpowiedniego ich stylowania można nadawać kontekst poszczególnym częściom witryny, a także oddziaływać na nasz nastrój. W grę wchodzi tutaj nie tylko typ czcionki, ale także rozmiar, kolor, umiejscowienie itp. Mamy zatem całą masę czynników, które wpływają na odbiór fontów przez odwiedzających.

Przygotowałem tekst zawierający typograficzne porady dla web designerów. Znajdziesz w nim 7 wskazówek, które warto jest mieć na uwadze w trakcie projektowania nowej witryny czy też obmyślania roli, jaką obecnie odgrywają czcionki na Twojej stronie internetowej.

Zapraszam do lektury.

Typograficzne porady dla web designerów – 7 kwestii, o których warto pamiętać

1. Nie wszystkie fonty pasują do siebie.

Najczęściej jest tak, że na stronie internetowej stawia się na dwie czcionki. Jedną wykorzystuje się przede wszystkim do nagłówków, z kolei druga odpowiada za zwykły tekst.

Otóż nie powinno się ich dobierać byle jak, gdyż nie każde zestawienie dwóch fontów wygląda dobrze. Taki wybór należy odpowiednio przemyśleć.

Wśród zakładek w mojej przeglądarce jedno z najbardziej chlubnych miejsc zajmuje serwis Typ.io. Nie bez powodu.

Otóż za jego pośrednictwem można znaleźć sporo ciekawych inspiracji odnoszących się do zestawiania fontów ze sobą.

Przejrzyj prezentowane tam propozycje, a zobaczysz, w jaki (dobry) sposób robią to inni na własnych stronach internetowych. Warto czerpać inspirację z odpowiednich wzorców.

2. Pamiętaj o przestrzeni wokół tekstu.

Niemal każdy tekst zawierający typograficzne porady dla web designerów wspomina o tej kwestii.

Aby dana sekcja strony internetowej była czytelna dla odbiorców, tekst musi „oddychać”. Pod tym pojęciem kryje się nadanie mu odpowiednio dużej przestrzeni, aby był po prostu czytelny.

Pamiętaj, że w grę wchodzi tutaj nie tylko miejsce dookoła danego bloku tekstu, lecz także np. odstępy pomiędzy poszczególnymi liniami. One również muszą być we właściwy sposób dobrane, by tekst z jednej strony nie był „ściśnięty”, a z drugiej nie był za bardzo „rozstrzelony”.

Obie skrajności sprawiają, że przebrnięcie przez tekst jest po prostu utrudnione.

Gra jest warta świeczki, ponieważ Twoim zadaniem, jako właściciela strony internetowej, jest uczynienie serwisu możliwie najbardziej przyjaznego odbiorcom. Chcesz więc, aby zapoznawali się oni z treścią w najlepszy możliwy sposób.

3. Uważaj z doborem kolorów.

Najważniejsza kwestia pod tym względem dotyczy tego, aby tekst miał odpowiedni kontrast w stosunku do tła. Możliwie największy, choć „tylko” pod kątem użyteczności – w przypadku bardziej artystycznego podejścia można pozwolić sobie na większą nonszalancję.

Oczywiście najpopularniejsze zestawienie kolorów to czarny (lub po prostu ciemny) tekst na białym lub lekko szarym tle. Jest ono dla nas naturalne i nie powoduje zmęczenia naszych oczu.

Wszelkie inne kombinacje, związanie w szczególności z bardzo żywymi barwami, muszą być naprawdę dobrze przemyślane.

Wszystko dlatego, że – podobnie jak w przypadku zestawiania ze sobą różnych typów fontów – również nie każde kolory współgrają ze sobą. Zielony tekst na czerwonym tle po prostu nie będzie wyglądał dobrze. Tak samo, jak czcionka Comic Sans nie będzie wyglądała dobrze… z czymkolwiek innym. Sama również nie będzie wyglądała dobrze.

Z tego miejsca z czystym sumieniem mogę polecić Ci część przewodnika o Material Design pod nazwą Color Usage, autorstwa projektantów z Google’a. Znajdziesz tam mnóstwo konkretnych przykładów odnoszących się do właściwego mieszania ze sobą barw.

4. Przykładaj dużą wagę do hierarchii elementów tekstowych.

Nie odkryję Ameryki, twierdząc, że ważniejszy jest element, który jest:

• większy (w stosunku do mniejszego)
• pogrubiony (w zestawieniu z normalnym)
• wyrazisty kolorystycznie (na jednolitym tle)
• otoczony dużą ilością wolnej przestrzeni (w stosunku do tych, które mają bliskie sąsiedztwo innych elementów)

Wszystko to wydaje się oczywiste, lecz typograficzne porady dla web designerów nie mogą obyć się bez wspomnienia o tej jakże ważnej kwestii.

Hierarchia to słowo-klucz. Dzięki niej możemy jasno wskazywać, że dany element jest po prostu ważniejszy od innego.

Dlatego też nie bez powodu nagłówki w artykułach są dużo większe w stosunku do normalnej treści. Również przyciskom CTA nadaje się odpowiednie tło, by wyróżniały się spośród innych elementów.

Miej to na uwadze, zajmując się fontami na swojej stronie internetowej.

5. Istotny jest kontekst.

Wspomniałem wcześniej o czcionce Comic Sans, której w zasadzie nikt nie bierze na poważnie, gdyż stała się swoistym memem, lecz użyjmy jej dla (co prawda skrajnego, ale jednak) przykładu.

Otóż nikt o zdrowych zmysłach nie użyłby tego fontu ani innego „komiksowego” w sytuacji formalnej. Tam, gdzie wymagane jest poważne i profesjonalne podejście, nie ma miejsca na zbyt duży luz, gdyż cały czar pryska.

W drugą stronę działa to tak samo. Jeśli posiadasz serwis skierowany do młodych odbiorców (lub nawet w przypadku projektowania wyglądu książki przeznaczonej dzieciom), to czcionki pokroju Garamond nie będą odpowiednim wyborem.

Jak widzisz, sam dobór fontów może wytwarzać w nas, odbiorcach, określone wrażenie.

6. Stawiaj na minimalizm.

Wiele osób w trakcie projektowania wyglądu strony internetowej stosuje zbyt wiele elementów mających wpływ na ogólną prezencję typografii.

Podkreślenia, pochylenia, pogrubienia, różne rozmiary, kolory – wszystko to jest bogactwem, z którego powinno się korzystać z umiarem.

Zasada minimalizmu nakazuje redukować wszelkie „bajery” – jak sama nazwa wskazuje – do minimum. Owszem, pod kątem typowo artystycznym takie zabiegi bardzo często przynoszą fantastyczny efekt, lecz niejednokrotnie względy użytkowe zalecają z nich rezygnować.

W naszych tekstach powtarzamy to niczym mantrę – wygoda użytkowników przede wszystkim.

7. Powiedz „nie” justowaniu i nieumiejętnemu centrowaniu tekstu.

Coraz częściej spotykane w sieci typograficzne porady dla web designerów zawierają punkty dotyczące justowania tekstu. Wspomniałem o tym również w tekście na temat usprawniania wyglądu bloga.

Otóż wiele osób myli książki z siecią. Sądzą one, że justowanie będzie wyglądało równie dobrze w internecie. Niestety tak nie jest.

Responsywność sprawia, że szerokość miejsca przeznaczonego na tekst jest zmienna i zależy od szerokości ekranu (a dokładniej okna roboczego) urządzenia, na jakim dana strona internetowa jest przeglądana. Tekst justuje się wtedy dynamicznie, tworząc bardzo nieestetyczne tzw. rzeki, czyli różnych długości odstępy między wyrazami w danym wierszu.

Innymi słowy, chęć wprowadzenia justowania powoduje powstawanie typograficznego błędu.

Kolejna kwestia dotyczy nadmiernego centrowania tekstu. Otóż powinno się wyśrodkowywać tylko i wyłącznie nagłówki oraz bardzo krótkie bloki tekstu. Centrowanie dłuższych tekstów jest niepoprawne, ponieważ godzi w nasze przyzwyczajenia, czyli czytanie tekstu od lewej do prawej, gdzie każdy kolejny wiersz ma początek tuż pod początkiem wiersza poprzedzającego.

Tekst, w którym każda linijka zaczyna się w tym samym miejscu, jest dla nas najłatwiejszy do przebrnięcia. Oczy nie męczą się, a mózg „wie”, gdzie znajdzie dalszy ciąg treści.

Podsumowanie tekstu zawierającego typograficzne porady dla web designerów

Jak widać, sposób użycia fontów na stronach internetowych w wielu przypadkach może przesądzić o tym, czy dana osoba zostanie na danej witrynie, czy też ją opuści.

Teksty są absolutnie kluczowym elementem treści, zatem należy o nie dbać.

Mam nadzieję, że wymienione w tym wpisie wskazówki pomogą Ci w lepszym zrozumieniu istoty czcionek na stronach internetowych.