Jakiej czcionki użyć na stronie www?

Jakiej czcionki użyć na stronie www?

W jaki sposób twoi Klienci czytają stronę internetową?
31 maja 2012
Chcesz, żeby Google Bot odwiedzał Cię częściej? 5 rad o pozycjonowaniu.
30 lipca 2012

Ostatnia aktualizacja tekstu: 29.02.2020 rok (Tak, to był rok przestępny.)

Zawsze podczas tworzenia strony www prędzej czy później pojawi się pytanie: Jakiej czcionki mam użyć?

Czy rodzaj czcionki użytej na stronie internetowej ma znaczenie?

Wybór czcionki na witrynę internetową ma KOLOSALNE znaczenie. Po pierwsze czcionka jest istotnym elementem estetyki strony i jej aspektu użytkowego (UX). Po drugie czcionka ma być tak dobrana, aby ułatwić odwiedzającym czytanie treści. Jeżeli internauta będzie się męczył podczas czytania tekstów zawartych w witrynie, szybko ją opuści.

Zasadniczo witryna w większości składa się z tekstu (i grafik), a tekst napisany jest określoną czcionką. Jeśli ta czcionka będzie źle dobra, zbytnio udziwniona, infantylna, za duża, za mała wpłynie to wyraźnie na odbiór wizualny strony. Podsumowując, jeżeli się nie przyłożysz i wybierzesz czcionkę niedbale i na chybił trafił, może to mieć negatywny wpływ na wygląd witryny, czytelność treści i wrażenia odwiedzających witrynę użytkowników.

Is sans serif still the king?

Do tej pory wytyczne związane z "typografią internetową" były dość oczywiste a ich podwaliną była jedna bardzo ważna zasada:

Pisz na stronie czcionkami sans serif, głupcze!


Czcionki sans serif inaczej nazywamy czcionkami bezszeryfowymi. Różnicę między czcionką szeryfową i bezszeryfową widać na poniższym przykładzie.


Czcionka bezszeryfowa (Arial)
Czcionka szeryfowa (Lora)


Jak widzicie czcionki sans serif nie posiadają ogonków i ozdobnych końcówek.

Skąd taka wytyczna? Z bardzo prozaicznego powodu:

Teksty pisane czcionkami sans serif były (i nadal są!) łatwiejsze do czytania dla Internauty.


Kiedyś ekrany naszych komputerów były zbyt kiepskie, by mogły odwzorować prawidłowo szeryfy. Monitory o słabych rozdzielczościach powodowały rozmycia kształtów liter (poszarpane na ekranie szeryfy utrudniały czytanie).

W roku 1996 roku dominowała na ekranach rozdzielczość 640 x480 a gęstość piksela na cal oscylowała na poziomie 60 PPI. Nic więc dziwnego, że czcionki szeryfowe na tego typu ekranach prezentowały się nad wyraz… niewyraźnie.

W 1996 Microsoft stworzył czcionkę, która była jedną z pierwszych powstałych właśnie z myślą o ekranach komputerów. Czcionka ta przyczyniła się do znacznej poprawy czytelności tekstów on line. A nazywała się? Verdana. Tak, tak… Dobrze ją znacie.


Nazywam się Verdana.


Verdana jest od tamtego czasu jedną z popularniejszych czcionek stosowanych w webdesignu.

Nawet nie zdajecie sobie sprawy, ile stron napisanych Verdaną do tej pory przeczytaliście!

Skończył się jednak czas dominacji czcionek sans serif. Wraz z rozwojem technologii zmienia się również podejście do czcionek umieszczanych na stronach www. Technologia idzie do przodu. Dziś, kiedy na rynku pojawiły się już ekrany o gęstości pikseli 220 PPI (Apple, MacBook Pro rozdzielczości 2880 × 1800 na wyświetlaczu 15-calowym) odwzorowania czcionek na ekranach komputerów są coraz lepsze. A na smartfonach? Zagęszczenie pixeli to całkowity kosmos! Na przykład 6,15-calowy ekran Full HD+ smartfonu Huawei P30 lite ma gęstość pikseli 415 ppi, a nieco większy, 6,4-calowy ekran Full HD+ Samsunga Galaxy A50 już 403 ppi.

Co prawda nadal zdecydowana większość dobrze zrobionych stron wykorzystuje tylko i wyłącznie czcionki bezszeryfowe, ale rozwój technologii i lepsza jakość monitorów już od dawna pozwala na stosowanie czcionek szeryfowych.

To jakiej mam użyć czcionki na swojej stronie?

Być może czcionki szeryfowe w końcu opanują Internet, ale jeszcze przez długi czas na stronach www będziemy używać czcionek typu sans serif. Z prostego powodu – większość z użytkowników komputerów nadal jeszcze posiada monitory o parametrach 96 ppi.

Czcionki sans serif królują na stronach www. Internauci są do nich przyzwyczajeni. Z przyjemnością przeczytają informację na Twojej stronie, o ile napiszesz je właściwą czcionką. Jaką? Bezpieczną.

Co to jest „bezpieczna czcionka internetowa”?

Mówiąc najprościej, termin ten jest używany do opisania czcionki, która jest powszechnie instalowana na wszystkich urządzeniach- smartfonach, tabletach komputerach. Oznacza to, że jeśli użyjesz jej na stronie, masz pewność, że witryna będzie się tak samo wyświetlać na większości urządzeń. Kolejną zaletą korzystania z czcionki bezpiecznej jest zwiększenie szybkości ładowania strony. Wpłynie to ostatecznie na SEO, ponieważ szybkość ładowania strony jest jednym z czynników branych pod uwagę przy ustalaniu pozycji stron w SERP.

Po prawej zestaw czcionek, z których zazwyczaj korzystam. Zdecydowana większość to czcionki Google Fonts. Część z nich doskonale sprawdzi się jako czcionki do nagłówków, inne są popularnymi czcionkami do treści.

Jak dobrać dobrą kombinację czcionek?

Na stronie internetowej rzadko kiedy występuje tylko jedna czcionka. Zazwyczaj korzysta się z dwóch czcionek np. do nagłówków i do reszty zawartości. Osobiście nienawidzę dobierać drugiej czcionki, to dla mnie droga przez mękę. Z prawdziwą ulgą przyjęłam wiadomość, że nie muszę tego już robić "na oko". Jak?

1. Po pierwsze, sama witryna Google Fonts sugeruje czcionki, które pasują do tej wybranej przez ciebie. Wystarczy, że zejdziesz nieco w dół strony i twoim oczom pokaże się blok.

2. Możesz też skorzystać ze strony https://fontpair.co/, na której pokazane są pary czcionek, które dobrze ze sobą się komponują i dobrze wyglądają. Takie pary na dobre i na złe.

Wybór czcionki na stronę internetową to nie tylko ważny krok w projektowaniu witryny, ale w pewnym sensie element kreowania własnego wizerunku. Warto poświęcić nieco czasu i wybrać czcionkę, która godnie nas będzie prezentowała w sieci.

Ostatnia aktualizacja tekstu: 29.02.2020 rok (Tak, to był rok przestępny.)

Katarzyna Biernacka
Katarzyna Biernacka
Content marketer, copywriter, właścicielka agencji iMedia Solutions specjalizującej się w content marketingu - prowadzeniu blogów firmowych, tworzeniu treści do e-sklepów & SEO copywritingu.

Comments are closed.