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
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
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.
Odpowiedz lub skomentuj