Blog

dobre czcionki na stronę internetową

Content is king’ jak mawia wielu webmasterów, ale nie zapominajmy o tym, że treść pełni funkcję poprzez swój wygląd. Wygląd, który można modyfikować na wiele sposobów, aby strona internetowa działała lepiej. Możesz zmieniać krój pisma, rozmiar, kolor, czy układ tekstu. Dziedzina, która się tym zajmuje to typografia. W tym artykule pokażę, jakie kroki podjąć, aby tekst na Twojej stronie www wyglądał naprawdę dobrze.

 

Font

Na początku należy zrozumieć, czym jest font. Font według słownika PWN to «rodzaj pisma dla komputera lub drukarki». Wiele osób błędnie na font lub inaczej krój pisma mówi "czcionka". Chociaż potocznie to pojęcie jest zrozumiałe, to jednak jest błędne i lepiej używać font lub krój pisma. Dlatego tez w tym artykule nie znajdziesz określenia "czcionka". 

Google Fonts oferuje setki fontów dostępnych za darmo do wykorzystania na stronach www. Przy tak dużej ilości ciężko jest się zdecydować, który będzie tym najlepszym. Wybierając font, pamiętaj o tych ważnych aspektach:

 

Czytelność kroju pisma

Tekst na stronie internetowej powinien być przede wszystkim czytelny. Fonty takie, jak Pacifico, czy Pinyon Scirpt chociaż wyglądają bardzo ładnie, są koszmarnie trudne do odczytania. Wybierz font prosty, który nie odwraca uwagi od tekstu i jest zrozumiały już na pierwszy rzut oka. Oczywiście nie zapomnij o tym, żeby krój pisma był estetyczny i ładnie prezentował się na stronie.różne czcionki na stronie www

Ten sam tekst w 3 różnych fontach.

 

Każdy font ma swój charakter

Wiele krojów pisma wygląda na pierwszy rzut oka atrakcyjnie i wywołuje myśl „Mam! To jest ten jedyny”. Jednak nie każda ładny font będzie pasować do strony, którą tworzysz. Mimo że wizualnie będzie wyglądać ok, to pamiętaj, że font ma swój charakter i wpływa na to, jak Twoja strona będzie odbierana. Ten sam tekst napisany dwoma różnymi krojami pisma, może nieść ze sobą zupełnie inną treść. 

Wybierając krój pisma, pamiętaj o dwóch ważnych aspektach, czyli kto jest czytelnikiem i co tekst ma sobą przekazać.

  • Jeżeli robisz stronę internetową, która ma budzić zaufanie, jak np. strona kancelarii prawnej to wypróbuj fonty wyglądające dostojnie, jak Neuton, czy Domine.
  • Dla strony o nowych technologiach wybierz font prosty o futurystycznym wyglądzie np. Open Sans lub Roboto.
  • Strona dla nastolatków, np. z odzieżą, spróbuj wykorzystać Karla albo Merriweather.
  • Jeżeli chcesz na swojej stronie podać fragment kodu programu, użyj do tego np. Fira Mono.
  • Strona błędu 404 – użyj kroju pisma, który kojarzy się z błędem, jak np. Cousine, który jest bardzo podobna do Courier New ze słynnego windowsowego ‘blue screen of death’.

Ciekawe i często używane fonty znajdziesz na stronie typewolf.com, ale pamiętaj, że wybór jest o wiele większy. Aby zobaczyć, jak fragment tekstu prezentuje się w danym foncie możesz skorzystać z wordmark.it.

I pamiętaj, jeżeli nie tworzysz strony przedszkola, albo sklepu z zabawkami to zapomnij o Comic Sans. Nawet jeżeli tworzysz którąś z powyższych stron, to zastanów się dwa razy, czy to najlepszy wybór! Dlaczego nie jest to dobry wybór, możesz dowiedzieć się na comicsanscriminal.com.

dobór czcionek na stronę internetowej

Ogonki, czyli polskie znaki

Nie każdy font nadaje się do wykorzystania na stronie w języku polskim. Niektóre po prostu nie mają w sobie liter z ogonkami, kropkami i kreskami, tak często używanych w naszym ojczystym języku.

Żeby mieć pewność, że font, który wybierasz ma polskie znaki podczas wyszukiwania w Google Fonts wybierz filtr, który wyświetli Ci tylko fonty z Latin Extended.filtr czcionek w Google Fonts

Dodając font do strony, pamiętaj, aby wybrać opcję Latin Extended.

czcionka latin extended

Jak dodać font z Google Font do stron internetowych tworzonych w WebWave dowiesz się w tutorialu.

 

Fonty lubią chodzić w parach

Kiedy wybierzesz już font, możesz chcieć urozmaicić stronę internetową poprzez dobranie do niego pary. Wtedy jednego fontu używaj np. w menu i stopce, a drugi wykorzystaj do prezentacji tekstu. Możesz wykorzystać narzędzie typegenius.com, które do wybranego kroju tekstu zaproponuje parę. Ciekawych połączeń fontów możesz szukać na tych stronach:

 

Upewnij się, że dodatkowy font, który wybierzesz ma w sobie polskie znaki!

Jak wygląda wybrane przez Ciebie połączenie możesz sprawdzić za pomocą narzędzia webfontblender.

Pamiętaj, że liczy się przede wszystkim Twoje zdanie i jeżeli zaproponowane połączenie Ci się nie podoba, to z niego nie korzystaj. Możesz zrobić swoje, takie, jakie uznasz za stosowne. Możesz też ograniczyć się do jednego fontu na stronie.

dobre fonty na stronie internetowej - webwavecms

Nie samym fontem tekst żyje

Oprócz wyboru odpowiedniego fontu możesz jeszcze pomajstrować przy innych wizualnych elementach tekstu.

 

Rozmiar ma znaczenie

Ważnym atrybutem tekstu jest jego rozmiar. Żeby strona internetowa była, jak najbardziej czytelna warto ustawić odpowiednie rozmiary dla nagłówków oraz zwykłego tekstu. Trochę inne rozmiary wyglądają dobrze na komputerach, a inne na urządzeniach mobilnych. Niektórzy wolą bardzo duże nagłówki, inni trochę mniejsze. Poniżej przedstawiam parę propozycji rozmiarów, które wyglądają dobrze i są bardzo czytelne:

 

  Desktop Desktop/Mobile
H1 48 px 42 px 32 px 32 px
H2 36 px 26 px 26 px 24 px
H3 28 px 20 px 22 px 18 px
zwykły tekst 16 px 16 px 16 px 16 px

 

strona internetowa z dobrym rozmiarem czcionekustawienia wielkości czcionki na stronie www

Struktura nagłówków na stronie www desktopowej i mobilnej

 

Jeżeli jesteś zwolennikiem mniejszych fontów, to możesz zacząć od mniejszej liczy px dla zwykłego tekstu i kolejne nagłówki dobrać zachowując proporcje. Od pewnego czasu utarło się jednak, że 20px to optymalny rozmiar dla tekstu na stronach internetowych i ten zdecydowanie polecam.

Staraj się też, aby linie tekstu miały odpowiednią długość. Wiersz tekstu wygodny do czytania ma, około 60-75 znaków na komputerze (tak wiem, nie przestrzegamy własnych wskazówek), a 35-40 na smartfonieJeżeli linia tekstu będzie dłuższa, to czytający będzie miał problem ze skupieniem wzroku na tekście. Jeżeli linia będzie krótsza, to czytający zbyt często będzie musiał skakać wzrokiem z początku na koniec wiersza, co w rezultacie zmęczy jego oczy.

Dołącz do 100 tysięcy ludzi, którzy tworzą strony www za darmo i bez kodowania

Zbuduj własną stronę www. Zacznij od pustego projektu lub wybierz
jeden z kilkudziesięciu darmowych szablonów. 


STWÓRZ SWOJĄ STRONĘ ZA DARMO 

Kolor tekstu

Kolor tekstu to należy dopasować do koloru tła. Na jasnych stronach zalecam czerń, ale nie zawsze. Czasem czerń potrafi wyglądać na stronie bardzo ciężko, zwłaszcza kiedy kolorystyka strony jest bardzo jasna. Można wtedy zamienić czerń na szarość, która wygląda o wiele lżej i nie kontrastuje tak bardzo z jasnym tłem. Na ciemnym tle użyj jasnego tekstu. Najlepiej białej albo bardzo jasnej szarości.

kolor czcionki cztery warianty

Przykładowe kolory tekstów w zależności od tła.

 

Kolor tekstu można wykorzystać, żeby przykuć uwagę do ważnej treści, np. nagłówka. Możesz użyć jasnego koloru na ciemnym tle dla nagłówka, tak jak zrobione jest to w tym artykule, aby wyróżniał się on i zwracał na siebie uwagę. Pamiętaj jednak, aby kolory zawsze wybrać z palety kolorów, które wykorzystałeś na stronie. Za dużo kolorów czyni stronę pstrokatą i nieprzyjemną dla oka. 

kolor tekstu na stronie internetowej

Czytelna struktura tekstu

Dobrze zredagowany tekst, ma strukturę składającą się z nagłówków H1, H2, H3 oraz treści w normalnym formacie. Taka struktura tekstu porządkuje go i ułatwia nawigację, przez co staje się on bardziej przyjazny dla użytkownika. Pamiętaj też, że tekst sformatowany w ten sposób jest lepiej rozumiany przez wyszukiwarki.

Zawarcie kluczowych fraz w nagłówkach ma pozytywny wpływ na SEO. Nie przesadź z tym. Pamiętaj, że tekst jest przede wszystkim dla czytelnika i dla niego musi być zrozumiały. Nawet jeżeli wylądujesz na pierwszej stronie wyników wyszukiwania Google, ale Twoja strona będzie odrzucana przez internautów, to nie odniesiesz z tego żadnych korzyści.

Dobrym zwyczajem, jest wyróżnienie kluczowych słów lub fragmentów tekstu, np. za pomocą pogrubienia. Użytkownik wie wtedy, co jest ważne i szybko przeglądając Twój artykuł, może łatwo wychwycić najważniejsze fragmenty i stwierdzić, czy warto go czytać w całości.

 

Układ tekstu

Tekst potrzebuje przestrzeni. Strona internetowa zapchana tekstem jest mało przyjazna dla oka i zniechęca do przeglądania. Zachowaj odstęp między treścią, a innymi elementami strony. Dodaj przestrzeń pomiędzy paragrafami i oddal nagłówki od paragrafów wstawiając tam pustą linię. Tak sformatowany tekst o wiele przyjemniej się czyta i łatwiej się w nim odnaleźć.

układ tekstu na stronie internetowej

Wyrównanie tekstu

Wyrównanie tekstu ma bardzo duży wpływ na jego czytelność i na wygląd całej strony.

Prawie zawsze najlepszym rozwiązaniem jest wyrównanie tekstu do lewej strony, zdecydowanie rzadziej wyjustowanie tekstu i jeżeli masz wątpliwości, to znaczy, że tekst powinien być wyrównany do lewej.

Wyrównanie do prawej zalecam zostawić dla speców od designu, bo nie jest łatwo za jego pomocą uzyskać ładne efekty.

Czasem można pozwolić sobie na wyśrodkowanie części tekstu, szczególnie dobrze sprawdza się to przy:

  • Nagłówku H1

  • Cytatach

  • Podpisach pod zdjęciami

  • Zdjęciach wplecionych w tekst

 

Najpierw rzeczy najważniejsze

Użytkownicy w internecie czytają według wzorca F. Oznacza to, że często nie przeczytają Twoje tekstu w całości. Ich uwaga skupi się na dwóch pierwszych paragrafach, dlatego tam zawrzyj najważniejsze dla czytelnika informacje. Poniżej przedstawione są heatmapy, które pokazują, gdzie skupia się wzrok czytelników podczas przeglądania strony.

wzorzec f czytania tekstu

Heatmap'y dla wzorca F

 

Wzorzec F pozwala wyciągnąć następujące wnioski:

  • Zaczynaj każdy paragraf i nagłówek od słowa, które niesie ze sobą ważne informacje. To właśnie pierwsze słowo użytkownicy przeczytają najczęściej.

  • Statystycznie pierwsze słowo z paragrafu będzie przeczytane około 5 razy częściej niż trzecie słowo w wierszu.

  • Kluczowe dla Twojej strony internetowej informacje zawrzyj w dwóch pierwszych paragrafach, gdyż często będą one jedynymi, które przeczytają osoby odwiedzające Twoją stronę www.

 

Podsumowanie, czyli co powinieneś wynieść z tej lektury:

Wybierz font czytelny, który pasuje do charakteru strony.

  • Jeżeli na stronie korzystasz z więcej niż jednego kroju pisma, to upewnij się, że dobrze razem wyglądają.

  • Upewnij się, że wybrane fonty mają wbudowane polskie znaki i zaciągnij odpowiednią wersję na stronę.

  • Nie korzystaj z Comic Sans, serio.

  • Ustaw odpowiednie rozmiary fontów dla nagłówków i zwykłego tekstu.

  • Używaj głównie czerni, bieli i szarości, jako kolorów tekstu.

  • Nadaj tekstowi czytelną strukturę za pomocą nagłówków.

  • Nie zapychaj strony tekstem, daj mu przestrzeń.

  • Wyrównuj tekst głównie do lewej.

  • Najważniejsze informacje zawieraj na początkach paragrafów i na początku całego tekstu.

 

Wiesz, jak powinien wyglądać tekst na stronie internetowej? Zrób swoją stronę www już dziś! 

Chcesz dowiedzieć się więcej o wyglądzie tekstu na stronie internetowej? Koniecznie przeczytaj te teksty: 

I na deser. :)

pies nie pochwala używania Comic Sans

Autor: Andrzej Szelemetko

 

Nie używaj Comic Sans, czyli 10 kroków do lepszego wyglądu tekstu na stronie

10 czerwca 2015

Darmowe szkolenie z tworzenia stron internetowych bez kodowania

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie i w prosty sposób zrobić stronę internetową.

 

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie