Bezpłatna konsultacja
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:
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.
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.
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ą.
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.
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.
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.
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ł.
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
Fonts Adobe
Dla dłuższych treści, akapitów:
Dla nagłówków h1-h3 np:
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:
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
Agencja digital Hauerpower sp z o.o.
31-408 Kraków, Al. 29 Listopada 85
NIP 945-225-31-35
Copyrights 2010-2024
