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
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