Font, czcionka na stronę internetową.

Czyli jak nie zepsuć projektu strony złym doborem fontu. Przedstawiamy klika prostych zasad, powiemy dlaczego 16px to za dużo.

no 0 : Maksymalnie dwa różne fonty na stronie.

Nie mieszamy, a wręcz przeciwnie ograniczamy różnorodność dla potrzeb czytelności przedstawianego tekstu. Istnieje szereg innych środków dzięki którym tekst oraz cała strona może tylko zyskać o których piszemy poniżej.

 

no 1: Odpowiednia wielkość fontu.

Doskonały sposób by już przy pierwszym ‘skanowaniu’ strony przez internatę zakomunikować najważniejsze informacje. Sekret tkwi w różnorodności i opracowaniu jednej hirerarchi nagłówków dla strony. Przyjęło się stosować dla treści minimum to 12px, optymalnie to ok. 13-14px, choć znajdą się zwolennicy teori 16px. Większe rozmiary zarezerwowane są dla nagłówków ( np. h1, h2), mniejsze to tekst w bocznej kolumnie czy stopce.

 

no. 2: Kontrast tekstu.

Zbyt mały kontrast czyli zbyt jasny tekst spowoduje że nie każdy internauta będzie miał ochotę na męczenie oczu celem zdobycia informacji z naszej strony.

Zbyt duży kontrast spowoduje że projekt (grafika) zostanie ‘schowany’ za treścią – font będzie zbyt mocno dominował nad całością.

 

no. 3 : Odstępy, interlinia, światło, przestrzeń. Użytkownik skanuje Twój tekst, on go nie czyta.

To kilka najważniejszych cech naszym zdaniem dzięki którym ta sama treść na stronie internetowej może wyglądać zupełnie inaczej.

  • Odpowiednio dobrana interlinia (odstęp między wierszami tekstu) może zdziałać cuda – krótsze bloki tekstu przy jej zwięszeniu zyskują na atrakcyjności. Standardowo ok. 120% rozmiaru czcionki.
  • Nie piszemy jednym ciągiem długich bloków treści, stosujemy ozdobniki w postaci nagłówków, odstępów czasem kreski lub delikatnego tła pod niektórymi akapitami. W efekcie całość wygląda dużo lepiej, przystępniej, a użytkownik zwraca uwagę na to, na co chcemy.
  • Lubimy gdy dłuższe teksty podzielone są na bloki, sekcje – to daje więcej możliwości zastosowania światła oraz czyni tekst ciekawszym w odbiorze, odpowiednio stylujemy też nagłówki co pomaga w wychwyceniu głównych informacji na stronie podczas jego ‘skanowania’.
  • Wyróżniamy najważniejsze informacje : ramka, tło, pogrubienie, lista, lekka zmiana koloru.

 

no. 4 Czytelnie na stronie internetowej – daj się przeczytać.

To zdecydowanie temat na osobny wpis (i taki też powstanie) jednak w pierwszej kolejności głównym zadaniem budowanego serwisu jest dostarczenie w sposób łatwy w odbiorze informacji w nim zawartych. Treść ma być przede wszystkim dobrze czytelna przy dłuższych opisach czy na podstronach tekstowych oraz nie męczyć oczu ( nie kombinujemy, idziemy w nowoczesną klasykę ). Nikt nie chce aby przez zły krój pisma artykuł pisany przez kilka popołudni czy sobotni wieczór był męczący dla oczu potencjalnych Klientów.

 

no. 5 Justowanie tekstu – tak ale tylko w wąskich kolumnach.

Dlaczego ?

Przeglądarki nie radzą sobie jeszcze z dzieleniem wyrazów – nie potrafią przenieść do nowej linii, stąd powstawać mogą dośc duże przerwy między wyrazami, które obniżają czytelność. Jeżeli mamy długie wyrazy w linii mamy – zjawisko bardziej prawdopodobne.

 

no. 6 Wyróżnij odnośniki w tekście.

Mimo że metoda stara ale skuteczna do dziś, co najważniejsze użytkownicy są do niej przyzwyczajeni. Dla odnośników stosujemy podkreślenie – łatwo znaleźć w tekscie link do materiału który chcemy aby nasz czytelnik poznał.

 

5 komentarzy
  • Odpowiedz sylwestrus

    Czerwiec 14, 2014, 6:58 pm

    Bardzo ciekawe rady, chodź brak konkretów w rozmiarach kolumn i samej czcionki, powoduje uczucie ogólnikowości.
    Pozdrawiam

  • Odpowiedz wilk

    Sierpień 2, 2014, 1:52 pm

    zapraszam na moją stronę: grafikapolska.wix.com/grafikapolska

  • Odpowiedz Paweł Mansfeld

    Sierpień 15, 2017, 9:28 pm

    Strasznie mnie wkurza nowy trend gdzie na blogach stosuje się 18px – nie wiem skąd to się wzięło czyżby po to aby treść zajmowała więcej przestrzeni aby w wyniku tego wyglądała ona “poważniej”. Chyba wyrobię u siebie odruch korzystania z zoomu 90% na takich stronach :). Fajnie że napisałeś o zasadzie max 16px.

    BTW, u ciebie ten Open Sans 15px z linią 23px wygląda rewelacyjnie. Ja w Open Sans zawsze dawałem ciężar 300 co powodowało, że był mało widoczny i często… zmieniałem font na inny w wyniku życzeń klientów. Teraz widzę że umiejętnie dostrojony Open Sans wygląda naprawdę fantastycznie. Kiedyś na swojej stronie używałem PT Sans teraz jest ProximaNova.

    Tutaj wybrałem parę perełek z Google Fonts, które nadają się zarówno do stosowania w treści głównej jak i w tytułach: https://mansfeld.pl/webdesign/wspaniale-fonty-strone-www/

Write a comment

fifteen + 13 =