Frontend 

15 webfontów, które musisz znać

Mariusz Kuta komentarzy 25 , ,

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

Demo Pobierz

Roboto

roboto

Demo Pobierz

Lato

lato

Demo Pobierz

PT Sans

ptsans

Demo Pobierz

Ubuntu

ubuntu

Demo Pobierz

Signika

signika

Demo Pobierz

Marmelad

marmelad

Demo Pobierz

Roboto Slab

robotoslab

Demo Pobierz

Bitter

bitter

Demo Pobierz

Noticia Text

noticiatext

Demo Pobierz

Merriweather

merriweather

Demo Pobierz

Sanchez

sanchez

Demo Pobierz

Libre Baskerville

librebaskerville

Demo Pobierz

Playfair Display

playfairdisplay

Demo Pobierz

Quattrocento

quattrocento

Demo Pobierz

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • Mały

    Kilka z tych fontów nie ma polskich znaków!

  • To teraz sio do GF i sprawdzać, które nie mają polskich glifów.

  • Jacek Nadolny

    Tylko jeden z tej listy fontów – „Lato” nie ma polskich znaków diakrytycznych.

    • Pudło, bo akurat Lato ma…

      • Jacek Nadolny

        No właśnie coś mi nie gra. Na GF Lato opisany jest tylko jako „Latin character”, a powinien być chyba jako Latin Extended.

    • Dawid Partyka

      żeby było zabawniej, „Lato” to polski font

      • Ale on MA polskie znaki… nic zabawnego tutaj nie widzę.

        • Dawid Partyka

          bo to miała być odpowiedź do Twojego komentarza, mój błąd.

          Wiem, że ma polskie znaki bo znajduje się na mojej liście fontów do weba.

        • Mkwadrat

          Żeby było znowu zabawniej – polskich fontów nie ma ale tylko w Firefox co widać nawet na ich oficjalnej stronie http://www.latofonts.com/lato-free-fonts/#download

          Walczyłem z tym fontem przez miesiąc i nic nie wskórałem pod FF
          😀

  • Jeszcze jedna uwaga, mam tylko nadzieję, że na WM to ostatni tego typu post-placeholder 😉

    • nrm

      yy, że co?

      • Lubię WM, naprawdę. Może nie zawsze styl, może nie wszystkie wpisy, ale całokształt. Ale nie lubię takich wstawek. Dla mnie to jest taka typowa zapchajdziura, jest post, jest ok. I bardzo ubolewam nad faktem, że takie coś pojawiło się na WM.

        Wiesz @supernrm:disqus mam w czytniku z dobre 1.4k różnych blogów, magazynów, webzinów. Kiedy pojawia się tytuł zawierający: „Top 10”, „you must know”, „best 20” mój wewnątrz mózgowy filtr wali wyjątkami. A pojawia się to praktycznie na każdym tego typu serwisie.

        Ale to tylko moje skromne zdanie 😉

        • nrm

          Dla Ciebie tak, dla kogoś innego inaczej. Wszystkim nie dogodzisz, a złoty środek musi być zachowany.

          • Dlatego też napisałem, że to tylko moje, skromne, nic nieznaczące zdanie 🙂

          • nrm

            Spoko, rozumiem, ale __ZAWSZE__ będzie taka sytuacja, że coś dla kogoś będzie mało interesujące bo nie będzie się nakładało na jego zainteresowania albo poziom będzie zbyt wysoki/zbyt niski. To wszystko jest subiektywne. Dla nas jest coś oczywiste, dla innych to nagle odkrycie, że tak można. W tym konkretnym przypadku też były głosy pozytywne i zdziwienie, że tak się robi 😉
            —
            Ja w RSSach po prostu wybieram co chce czytać i jak coś jest zupełnie nie w moim klimacie to nawet nie wychodzę poza czytnik RSS 😉
            —
            Nie martw się: WM to NIE będą tylko teksty w stylu „Top 10 xyz” nie mniej takie teksty TEŻ będą, muszą być 😉

          • O, @nrm i doszliśmy do sedna. Ponieważ ja uważam, że takich tekstów wcale być nie musi. Z mojego punktu widzenia, ale podejrzewam, że nie tylko, są one całkowicie zbędne, a stanowią tylko „wypchanie” wnętrza serwisu.

            Ja absolutnie nie mam na myśli niskiego/wysokiego poziomu tekstów. Mnie właśnie chodzi tylko i wyłącznie o teksty typu „top zxc”, „zxc, które musisz znać” 😉

            Tutaj też nie chodzi o to czy coś jest interesujące czy nie, bo to nie jest serwis dla Andrzeja Ośmiałowskiego, w którym piszecie tylko dla mnie 🙂 Ja to jak najbardziej rozumiem. Tak samo jak to, że tych fontów, czy w ogóle @font-face ktoś mógł nie znać. Chodzi mi tylko i wyłącznie o samą formę, w jakiej ten tekst został zaserwowany, bo mam wrażenie, że Ci to umknęło. Tylko tyle, ale i aż tyle 🙂

          • Brk_

            Dla mnie ten post był bardzo przydatny, kilku z tych czcionek wcześniej nie znałem

  • Guest

    Czemu w demo nie ma polskich znaków?
    Należałoby to zmienić.

  • Daiquiri

    Jedna uwaga: dla mnie prezentacja fontów jest tragiczna :). Warto byłoby nad tym popracować.

  • Tytuł wpisy powinien brzmieć „15 webfontów od Google, które musisz znać”. Próbowaliście przeglądać inne tego typu usługi? Co z np. Edge Web Fonts od Adobe?

  • Mały

  • Dodałbym jeszcze Montserrat, fajny font pasujący do Flat UI, niestety bez polskich znaków

  • Tpk_Games

    Dodałbym do tego jeszcze Oxygen – https://www.google.com/fonts/specimen/Oxygen
    Prosta i schludnie wyglądająca czcionka.

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!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL