Font, czcionka na stronę internetową.

typografia font na stronie www

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

Typografia na stronę internetową.

 

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.

 

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.

 

Kontrast tekstu na stronie

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ą.

 

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.

 

Czytelność fontu na stronie

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.

 

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.

 

Link w treści – wyróżnij odnośniki

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ł.

 

Mateusz - planuje i kreuje. Odpowiedzialny za cały zespół Hauerpower oraz główny kontakt z klientem. Specjalizuje się w SEO oraz UX.

All author posts
5 komentarzy
  • Odpowiedz sylwestrus

    14 czerwca, 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

    2 sierpnia, 2014, 1:52 pm

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

  • Odpowiedz Paweł Mansfeld

    15 sierpnia, 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

1 × four =