Najlepsze fonty na stronę WWW

Odkąd Google udostępniło technologię Google Fonts czyli zbiór fontów, który można użyć do upiększania prezentacji stron internetowych web designerzy, którzy trzymają rękę na pulsie prześcigają się w stosowaniu różnorodnych krojów tekstu. Ten fakt nie powinien dziwić nikogo bowiem to jak wyglądają poszczególne znaki w tekście na stronie WWW ma znaczący wpływ na ogólną estetykę jej projektu.

Postanowiłem wybrać te najciekawsze, które poza ciekawym designem oferują przede wszystkim wysoki poziom czytelności na ekranie monitora, laptopa czy telefonu. I pamiętaj! Profesjonalista mówi font a nie czcionka 😉

Open Sans

Autor: Steve Matteson
Link: https://fonts.google.com/specimen/Open+Sans

Droid Sans

Autor: Steve Matteson
Link: https://fonts.google.com/specimen/Droid+Sans

Lato

Autor: Łukasz Dziedzic
Link: https://fonts.google.com/specimen/Lato

Montserrat

Autor: Julieta Ulanovsky
Link: https://fonts.google.com/specimen/Montserrat

Raleway

Autor: Multiple Designers
Link: https://fonts.google.com/specimen/Raleway

Roboto

Autor: Christian Robertson
Link: https://fonts.google.com/specimen/Roboto

Arvo

Autor: Anton Koovit
Link: https://fonts.google.com/specimen/Arvo

PT Sans

Autor: ParaType
Link: https://fonts.google.com/specimen/PT+Sans

Poppins

Autor: Indian Type Foundry
Link: https://fonts.google.com/specimen/Poppins

Aktualizacja na rok 2018

Karla

Autor: Jonny Pinhorn
Link: https://fonts.google.com/specimen/Karla?selection.family=Karla

Playfair Display

Autor: Claus Eggers Sørensen
Link: https://fonts.google.com/specimen/Playfair+Display

Archivo

Autor: Omnibus-Type
Link: https://fonts.google.com/specimen/Archivo?selection.family=Archivo

Ubuntu

Autor: Dalton Maag
Link: https://fonts.google.com/specimen/Ubuntu

PT Serif

Autor: ParaType
Link: https://fonts.google.com/specimen/PT+Serif

Oswald

Autor: Vernon Adams
Link: https://fonts.google.com/specimen/Oswald

Aktualizacja na rok 2019

Oxygen

Autor: Vernon Adams
Link: https://fonts.google.com/specimen/Oxygen

Exo 2

Autor: Natanael Gama
Link: https://fonts.google.com/specimen/Exo+2?selection.family=Exo+2

Titillium Web

Autor: Multiple Designers
Link: https://fonts.google.com/specimen/Titillium+Web

IBM Plex Mono

Autor: Mike Abbink
Link: https://fonts.google.com/specimen/IBM+Plex+Mono

Cairo

Autor: Multiple Designers
Link: https://fonts.google.com/specimen/Cairo

Aktualizacja na rok 2020

Source Sans Pro

Autor: Paul D. Hunt
Link: https://fonts.google.com/specimen/Source+Sans+Pro

Roboto Mono

Autor: Christian Robertson
Link: https://fonts.google.com/specimen/Roboto+Mono

Noto Sans

Autor: Google
Link: https://fonts.google.com/specimen/Noto+Sans

Merriweather

Autor: Sorkin Type
Link: https://fonts.google.com/specimen/Merriweather

Work Sans

Autor: Wei Huang
Link: https://fonts.google.com/specimen/Work+Sans

Teko

Autor: Indian Type Foundry
Link: https://fonts.google.com/specimen/Teko

Aktualizacja na rok 2021

Inter

Autor: Rasmus Andersson
Link: https://fonts.google.com/specimen/Inter

Manrope

Autor: Mikhail Sharanda
Link: https://fonts.google.com/specimen/Manrope

Aktualizacja na rok 2022

Albert Sans

Autor: Andreas Rasmussen
Link: https://fonts.google.com/specimen/Albert+Sans

Space Grotesk

Autor: Florian Karsten
Link: https://fonts.google.com/specimen/Space+Grotesk

Instalacja

Jeżeli będziesz używać łacińskich znaków diakrytycznych, pamiętaj aby wybierając font za pomocą tego przycisku:

kliknąć na dole w:

I dodać rozszerzenie Latin Extended.

Dzięki temu np. polskie litery diakrytyzowane „ą,ę,ć,ź” będą się wyświetlać na twojej stronie prawidłowo.

Nie nadużywaj ilości stylów i ciężarów (które widać na ilustracji powyżej). Strona będzie się dłużej ładowała, a jak wiadomo, tego nikt nie chce 😉 Jeżeli będziesz kodować szablon sprawdź porady w artykule: optymalizacja fontów dla stron internetowych.

Podsumowanie

Możliwości wyboru są wręcz nieograniczone. To co zaprezentowałem to jedynie kilkanaście najpopularniejszych fontów a są ich dosłownie setki.

Pamiętajmy, że fonty zamieszczone w Google Fonts są darmowe i można ich używać do woli. Oczywiście nie musimy używać  katalogu od Google, równie dobrze można stosować własne fonty o ile zamieścimy je na serwerze w formacie woff2 i dodamy link w arkuszu stylów.

Mam jeszcze parę rad/uwag dla designerów. Font wyglądający dobrze na wydrukach niekoniecznie sprawdzi się na wyświetlaczu. Pamiętaj aby nie stosować na jednej stronie więcej niż dwóch krojów ani dodatkowych stylów, o których pisałem powyżej. Przemawia za tym estetyka oraz obciążenie łącza. Przeglądarka ściąga sobie fonty dopiero potem następuje renderowanie strony internetowej. Na pierwszym miejscu stawiaj zawsze czytelność i wygodę użytkowników.