Jak nie zepsuć projektu strony złym doborem fontu
Warto pamiętać że to właśnie czytelność ma duży wpływ na pozytywne doświadczenia użytkownika oraz jego chęć pozostania na stronie internetowej. O tym jak ważne jest odpowiednie zestawienie fontów na stronie nie trzeba już raczej nikogo przekonywać.
Poniżej przedstawiamy klika prostych zasad jak dobrać font na stronę internetową, powiemy o zestawieniach fontów oraz ich rozmiarach. Odpowiemy na pytanie dlaczego 16px na stronie to za dużo ?.
Spis treści:
- Jaki font na stronę internetową ? Poznaj zasady doboru
- Zasady doboru fontu na stronie internetowej
- Gdzie znaleźć darmowe fonty do projektu ?
- Jaka czcionka na stronie ? Jak znaleźć czcionkę ?
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, h3), mniejsze to tekst w bocznej kolumnie czy stopce.
Kontrast tekstu na stronie
Zbyt mały kontrast czyli zbyt jasny tekst w stosunku do tła spowoduje że nie każdy użytkownik będzie miał ochotę na męczenie oczu celem zdobycia informacji z naszej strony. Użyteczne strony internetowe powinny być tworzone z myślą o użytkowniku i jego komforcie.
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ł.
Gdzie znaleźć darmowe fonty ?
Pierwszym miejscem jest na pewno https://fonts.google.com, kolejnym to https://fonts.adobe.com oferujące nielimitowaną bazę fontów.
Zaletą obu miejsc jest bardzo proste skorzystanie z fontów.
Google Fonts
- wystarczy pobrać font na dysk i zainstalować, dzięki temu możemy używać strony w projektach
- wklejamy kod w nagłówku strony dzęki któremu możemy wykorzystywać go na stronie www
Fonts Adobe
- tutaj podobnie jak w przypadku Google, aby mieć możliwość projektowania wystarczy aktywować font w chmurze,
- aby móc korzystać na stronie, wklejamy odpowiedni kod z wybraną wagą fontu w nagłówek strony,
Jakie fonty na stronę internetową ?
Dla dłuższych treści, akapitów:
- Open Sans, Roboto, PT Sans
Dla nagłówków h1-h3 np:
- Lato,
- Montserrat,
- Roboto,
- Poppins,
- Playfair Display,
- PT Serif,
- Cairo,
- Raleway,
- Bree Serif,
Jaka czcionka została użyta na stronie internetowej ?
Czasami przeglądając strony internetowe ulegamy pokusie sprawdzenia z jakiego fontu skorzystał autor strony gdyż najzwyczajniej w świecie chętnie dodalibyśmy ją do bazy naszych fontów.
Jak sprawdzić font na stronie ?
Nazwę czcionki można szynko sprawdzić bez instalowania dodatkowych programów w przeglądarce Chrome:
- Najedź myszą na czcionkę którą chcesz sprawdzić na stronie,
- Kliknij prawy klawisz myszy,
- Wybierz z menu podręcznego pozycję Inspect (Zbadaj),
- W panelu po prawej przełącz zakładkę Computed (1),
- Przewiń dolne okno poszukiwaniu komendy font-family.
Wszukaj interesujący Cię font (prawy myszy i menu kontekstowe, pozycja 'zbadaj')
Konsola Chrome i zakładka compouted (1)
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
