Web Design Blog / Web:

Najlepsze fonty na stronę WWW

Data publikacji: 21 sierpnia 2016

Ostatnia aktualizacja: 15 października 2019

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

open sans

Autor: Steve Matteson

Link: https://fonts.google.com/specimen/Open+Sans

Droid Sans

droid sans

Autor: Steve Matteson

Link: https://fonts.google.com/specimen/Droid+Sans

Lato

lato

Autor: Łukasz Dziedzic

https://fonts.google.com/specimen/Lato

Montserrat

montserrat

Autor: Julieta Ulanovsky

Link: https://fonts.google.com/specimen/Montserrat

Raleway

najlepsze czcionki na stronę - raleway

Autor: Multiple Designers

Link: https://fonts.google.com/specimen/Raleway

Roboto

roboto

Autor: Christian Robertson

Link: https://fonts.google.com/specimen/Roboto

Arvo

arvo

Autor: Anton Koovit

Link: https://fonts.google.com/specimen/Arvo

PT Sans

PT Sans

Autor: ParaType

Link: https://fonts.google.com/specimen/PT+Sans

Poppins

fonty na stronę www

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 😉

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

Najlepsze fonty na stronę WWW Najlepsze fonty na stronę WWW 4.7 na 5 na podstawie 50 ocen Najlepsze fonty na stronę WWW


Komentarze

Brak komentarzy.

Dodaj swój komentarz