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

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. Czytaj więcej o tym jak instalować fonty na stronie WWW.

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