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 laptopa i smartfona. 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

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

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 znaki „ą,ę,ć,ź” 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.

Źródła

• https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html