15 webfontów, które musisz znać

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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

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