(Last Updated On: 11 stycznia 2018)

Dziś o czymś co dotyczy każdego z nas. O fontach i czcionkach. Potocznie każdy mówi o czcionce. Czcionka to ładny, ciężki, metalowy słupek. Zdecydowanie trudno byłoby umieścić go na stronie :) Kiedy mówimy o literach na monitorze, to zdecydowanie zachęcam do używania słowa font. Tak wygląda czcionka:

type

Font to cyfrowa forma pisma.

Czcionka to metalowy odlew, tradycyjny nośnik pisma drukarskiego.

Jeszcze nie zdarzyło mi się robić strony internetowej, na której nie byłoby tekstu. Ośmielę się napisać – tekst to obowiązkowy element każdej strony www. I tak jak wszystko na stronie – możemy oceniać go wielowymiarowo. Na co najmniej dwóch płaszczyznach:

Płaszczyzna estetyczna

  • czy ten font jest wyraźny?
  • czy zachęca do czytania długich wpisów?
  • czy tło i font “nie gryzą się”?
  • czy są wyraźnie różnice między akapitem i nagłówkiem? Dzięki temu użytkownik łatwo przeskanuje tekst (każdy z nas to robi).
  • czy font na mojej stronie jest zgodny z identyfikacją wizualną mojej firmy?

Bardziej doświadczone oko zwróci uwagę na ligatury, przestrzenie między pojedynczymi literami, pogrubienia, oś cieniowania, znaki diakrytyczne etc. Typografia wciąga…

Płaszczyzna informacyjna

  • czy ten tekst jest ciekawy dla mojej grupy docelowej?
  • czy ten tekst jest (za) długi / (za) krótki?
  • czy widać, który fragment tekstu jest linkiem? Czy może nie widać linków?

Jakiś czas temu pracowałam nad stroną. Moja klientka (pozdrawiam Cię Joanno! :D) bardzo zwracała uwagę na fonty. Bardzo się ucieszyłam. Zgadzam się z nią, że stopień czytelności, który fundujemy naszym czytelnikom jest ważny. Wręcz napiszę, to rzutuje na nasz biznes.

Jeżeli Twoim celem jest by ludzie czytali Twój blog, to musisz zadbać o to, by dało się te Twoje teksty czytać. To samo dotyczy newsletterów. Kiedy widzę istne coco jambo i stragan fontów, moja uwaga zostaje rozproszona. Skupiam się na bogactwie różnorodności, zamiast na samym tekście. A mówiąc wprost – wychodzę, nie czytam. Moja porada: im prościej tym lepiej.

Czy zdarzało Ci się nie kupić książki, bo tekst był w niej za mały? Za kolorowy? Za dziwny? Mnie tak. Tak samo może być na Twoim blogasku, zakładkach, newsletterze.

Ozdobniki typu fonty pisanki (imitujące pismo ręczne) są ok, ale do krótkich, reklamowych napisów. Jeżeli zafundujemy odwiedzającym czytanie długich akapitów pisanką – zmęczymy go. Podobnie wiele kolorów fontów w prostym newsletterze czy wpisie blogowym niepotrzebnie odwróci uwagę czytelnika od tekstu a skupi na kolorowej tęczy barw.

A teraz po kolei.

Fonty są płatne i bezpłatne

Z fontami jest jak z szablonami. Jest w czym wybierać zarówno w darmowych, jak i w płatnych.

Bezpłatne, legalne

  • Skarbnicą darmowych, legalnych fontów jest Google Fonts. Pamiętaj, że Ciebie interesują fonty z filtrem Latin-Extended. To fonty z polskimi znakami diakrytycznymi (ą, ę, ś, ć etc). Nie każdy font został zaprojektowany z polskimi znakami diakrytycznymi. To wszystko zależy od projektanta.
  • Font Squirrel to zagraniczny portal z dużą bazą darmowych, legalnych fontów. Z tym, że tutaj musisz pobrać pliki fontu i samodzielnie wgrać je na stronę. Jeżeli tego nie umiesz, możesz to zlecić. I tutaj również zwracaj uwagę na dostępność znaków diakrytycznych.
  • Skarbnicą fontów jest też portal Grafmag, który co jakiś czas robi zestawienie darmowych fontów z polskimi znakami.

Jak widzisz, jest w czym wybierać. Jeżeli teraz stoisz przed wyborem nowego szablonu zwróć uwagę na fonty i ich kastomizację. Sprawdź czy możesz je zmienić bez umiejętności kodowania. Na przykład za pomocą Google Fonts. Dzięki takie możliwości, na Google Fonts przetestujesz, a potem łatwo włączysz go na swojej stronie. Większość szablonów zawiera tę funkcję. No ale nie wszystkie.

Jeżeli nie możesz zmienić fontu w szablonie, na zasadzie wyklikania, no to powiem tak – super! To jest banalnie proste i to jest super powód do rozpoczęcia przygody z CSSem ;)

Jeżeli na samą myśl o kodowania…wzdrygasz się (ciężko mi w to uwierzyć, ale przyjmuję to do wiadomości), skorzystaj z wtyczek. Znalazłam dla Ciebie 2 wtyczki, które dodadzą do Twojego WordPressa Google Fonts:

Myślę, że pewnie sporo z Was podejrzliwie spojrzy na swoje strony i pomyśli: ok, super. To czy ja mam czytelne teksty? Jaki ja mam font? Jaki on ma rozmiar?!?! Jak ja to mam sprawdzić?!?!

Przygotowałam 3-minutowy film, w którym pokazuję:

  • Jak sprawdzić wielkość fontu?
  • Jak sprawdzić wielkość odstępu między wierszami?
  • Jak sprawdzić kolor fontu?
  • Jak sprawdzić font, na czyjejś stronie?
  • Jak szybko sprawdzić czy font do nagłówków i font do akapitów pasują do siebie.

Używam w tym celu prostych dodatków w przeglądarce Chrome (WhatFont) oraz Google Fonts.

Nie ma złotej listy zasad “Jak sprawić by tekst na stronie był super czytelny”, ale przygotowałam moją osobistą listę porad:

  • Ustaw, prosty font bezszeryfowy (sans-serif) do długich tekstów np. Open Sans, Lato
  • Zdecydowanie najlepiej, długie teksty, czyta się czarno na białym (duży, nieoczojebny kontrast, to dobre rozwiązanie). Czarny tekst, białe tło. Ewentualnie na lekko szarym tle.
  • Sugeruję by odstępy między pojedynczymi wierszami tekstu (line-height) były minimum 1.5x większe niż wielkość fontu. Jeżeli Twój font akapitów ma rozmiar 16 px, to ustaw line-height minimum na 24px. Dzięki temu uzyskamy lekkość. To ogólna porada, najlepiej dostosować tę wysokość indywidualnie.

Jeden, dwa fonty na stronie (i w newsletterze) to max

Byłoby idealnie gdybyśmy nie przesadzali z fontami na stronie. Ustalenie:

  • Jednego fontu do nagłówków
  • Drugiego do długich tekstów i
  • Ewentualnie trzeciego do jakichś cytatów czy reklam.

Dzięki temu mamy ład i porządek. Strona wygląda profesjonalnie, jest estetyczna. To samo ograniczenie dotyczy kolorów.

Niestety z WordPressem jest to trudniejsze niż byśmy chcieli. Nowe wtyczki dodają nam nowe elementy z tekstem, te są często różnej wielkości. Jeżeli masz żyłkę typografa i pomału dostrzegasz te małe szczegóły, to będziecie Cię uwierało. I chcą, nie chcąc, zaczniesz grzebać w CSSie, bo żadna wtyczka nie da Ci tutaj pełnej kontroli. Plik CSS odpowiada za wygląd strony internetowej.

Polskie znaki, czyli znaki diakrytyczne

Widziałaś kiedyś na stronie pogrubione polskie litery? To znaczy, ze font nie ma polskich znaków diakrytycznych i pobiera inny (domyślny) font przeglądarki do pokazania polskich liter np. Arial. Jak rozwiązać ten problem?

  • Zmień font na taki, który ma polskie znaki diakrytyczne. Może po prostu wybrałaś zły font. Możesz przeglądać fonty w Google Fonts, po wcześniejszym zaznaczeniu filtru Latin Extended.
  • Jeżeli szablon korzysta z Google Fonts, upewnij się (sprawdź to w dokumentacji motywu), że masz zaznaczone rozszerzenie fontów Latin Extended (&subset=latin,latin-ext). Bo tylko wtedy szablon będzie pobierał z biblioteki Google dodatkowe polskie znaki diakrytyczne. Jeżeli nadal jest problem i masz płatny szablon, napisz do supportu.
  • Jeżeli szablon korzysta z Google Fonts, pobierz wtyczkę od Marcina Pietrzaka.

Fonty to małe, pracochłonne dzieła sztuki.

Uwielbiam oglądać fonty. Zachęcam Cię gorąco do oglądania dobrze skrojonych fontów. Dzięki temu wyrabiamy sobie zmysł i jesteśmy bardziej wrażliwi na to, co jest dobrze zaprojektowane (a co nie).

Ciekawostka. Wiesz ile kosztuje najdroższy font?

Z mojego researchu w Google wynika, że $5000 . Holy Moly!

Zapisz