15 webfontów, które musisz znać

25 komentarzy

Typografia to jeden z najważniejszych aspektów projektowania i tworzenia stron internetowych. Jednak ileż można ograniczać się do wąskiego grona wzajemnej adoracji: Arial, Verdana, Times New Roman? Na szczęście webfonty i dyrektywa @font-face pozwoliły nam na niemal bezproblemowe użycie i wyświetlenie dowolnych fontów w każdej przeglądarce. Wraz z rozwojem webfontów powstało wiele serwisów, pozwalających na zdalne osadzanie webfontów, a zdecydowanie najpopularniejszym z nich jest Google Fonts. Poniżej mocno subiektywne zestawienie 15 webfontów, które każdy webdeveloper powinien znać i stosować w swoich pracach.

Open Sans

opensans

[button url=’/tutorial/googlewebfonts/index.html#demo-open-sans’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Open+Sans’ size=’large’ style=’red’]Pobierz[/button]

Roboto

roboto

[button url=’/tutorial/googlewebfonts/index.html#demo-roboto’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Roboto’ size=’large’ style=’red’]Pobierz[/button]

Lato

lato

[button url=’/tutorial/googlewebfonts/index.html#demo-lato’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Lato’ size=’large’ style=’red’]Pobierz[/button]

PT Sans

ptsans

[button url=’/tutorial/googlewebfonts/index.html#demo-pt-sans’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/PT+Sans’ size=’large’ style=’red’]Pobierz[/button]

Ubuntu

ubuntu

[button url=’/tutorial/googlewebfonts/index.html#demo-ubuntu’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Ubuntu’ size=’large’ style=’red’]Pobierz[/button]

Signika

signika

[button url=’/tutorial/googlewebfonts/index.html#demo-signika’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Signika’ size=’large’ style=’red’]Pobierz[/button]

Marmelad

marmelad

[button url=’/tutorial/googlewebfonts/index.html#demo-marmelad’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Marmelad’ size=’large’ style=’red’]Pobierz[/button]

Roboto Slab

robotoslab

[button url=’/tutorial/googlewebfonts/index.html#demo-roboto-slab’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Roboto+Slab’ size=’large’ style=’red’]Pobierz[/button]

Bitter

bitter

[button url=’/tutorial/googlewebfonts/index.html#demo-bitter’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Bitter’ size=’large’ style=’red’]Pobierz[/button]

Noticia Text

noticiatext

[button url=’/tutorial/googlewebfonts/index.html#demo-noticia-text’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Noticia+Text’ size=’large’ style=’red’]Pobierz[/button]

Merriweather

merriweather

[button url=’/tutorial/googlewebfonts/index.html#demo-merriweather’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Merriweather’ size=’large’ style=’red’]Pobierz[/button]

Sanchez

sanchez

[button url=’/tutorial/googlewebfonts/index.html#demo-sanchez’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Sanchez’ size=’large’ style=’red’]Pobierz[/button]

Libre Baskerville

librebaskerville

[button url=’/tutorial/googlewebfonts/index.html#demo-libre-baskerville’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Libre+Baskerville’ size=’large’ style=’red’]Pobierz[/button]

Playfair Display

playfairdisplay

[button url=’/tutorial/googlewebfonts/index.html#demo-playfair-display’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Playfair+Display’ size=’large’ style=’red’]Pobierz[/button]

Quattrocento

quattrocento

[button url=’/tutorial/googlewebfonts/index.html#demo-quattrocento’ size=’large’ style=’blue’]Demo[/button] [button url=’http://www.google.com/fonts/specimen/Quattrocento’ size=’large’ style=’red’]Pobierz[/button]

25 komentarzy

Inne wpisy

Send this to a friend
webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML, CSS, JS, PHP, SQL, CLOUD, LINUX