powrot do bloga

Font, czcionka na stronę internetową

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.

Jaki font (czcionka) 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ł.

Komentarze do wpisu naszej społeczności:

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

SYLWESTRUS

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/

PAWEŁ MANSFELD