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