Nowoczesne fonty bezszeryfowe z polskimi znakami od Google.

Jeżeli potrzebujesz darmowej, wysokiej jakości, nowoczesnej typografii, Google Fonts to najprawdopodobniej najlepsze miejsce, od którego warto zacząć swoje poszukiwania. Strona oferuje fonty typu Open Source, co oznacza, że możesz je wykorzystać na użytek własny i komercyjny zupełnie za darmo. Jednak „przekopywanie się” przez stosy fontów, które oferują, może być nieco przytłaczające. W tym momencie jest ponad 1300 ich rodzin na stronie. Może to więc u niektórych powodować lekki ból głowy :). Są jednak wśród nich sprawdzone pozycje, które od lat cieszą się dużą popularnością i rosnącą z tygodnia na tydzień liczbą pobrań.

Oprócz elementów technicznych, takich jak, wysoka jakość wykonania, oraz bardzo dobra czytelność, przedstawione fonty google posiadają również inne cechy, świadczące na ich korzyść, jak chociażby ich nazwa. Czyż słowo „Roboto” nie kojarzy się nam z czymś technicznym, konkretnym, profesjonalnym? A „Montserrat”, z eleganckim, gustownym i delikatnym? I w rzeczy samej – takie też są te fonty. Wszystko więc wydaje się tutaj być spójne. Nie bez przyczyny zatem tak często po nie sięgamy, kiedy szukamy nowoczesnej, bezpłatnej typografii.

Poniżej przygotowałam propozycje fontów bezszeryfowych z Google Fonts, które od lat cieszą się dużym „wzięciem” na ich stronie. Wszystkie z nich posiadają polskie znaki (Latin Extended). W większości są to również rodziny z dużą ilością stylów, dzięki czemu możesz je wykorzystać na wiele sposobów.

Roboto

Roboto posiada mechaniczny, geometryczny krój, który nadaje mu zdecydowanego, profesjonalnego charakteru. Razem z wersją italic zawiera 12 stylów. Dzięki jego zwężonej konstrukcji paragrafy mogą „przyjąć” więcej tekstu i zaoszczędzić trochę więcej miejsca w projekcie. Roboto, może rewelacyjnie wyglądać zarówno w tytule, jak i w tekście głównym na stronie.

Inter

Inter to kolejna propozycja nowoczesnego fonta, dostępnego w 9 grubościach, od ExtraLight do Black. Posiada bardzo dobrą czytelność, którą zawdzięcza wysokiemu x-high. Czyni go to również idealnym wyborem zarówno dla tekstu głównego, jak i tytułu w projekcie.

Open Sans

Open Sans to przykład humanistycznego fonta bezszeryfowego. Jego neutralny krój w połączeniu w bardzo dobrą czytelnością i wysoką jakością, sprawiają, że jest on często wykorzystywany w wielu różnych projektach.

Pobierz darmowe PRZYCISKI NA STRONĘ

Montserrat

Nieco szerszy Montserrat posiada delikatny, minimalistyczny krój, dzięki czemu font doskonale pasuje do współczesnych projektów. Razem z z odpowiednikami italic zawiera 18 stylów, od bardzo cienkich (thin) do ekstremalnie pogrubionych (black). Dostępne są również dwa pokrewne rodzaje Montserrat: Alternates and Subrayada.

Poppins

Poppins to przykład nowoczesnego fonta o geometrycznej konstrukcji, który wpasuje się w każdy projekt, w którym stawiamy na prostotę, świeżość i nowoczesność. Razem z wersją italic zawiera 18 stylów.

Raleway

Dla mnie osobiście, co najbardziej jest charakterystyczne w Raleway, to litera „W”. Kiedy tylko gdzieś ją zauważę, od razu wiem, że to Raleway :). Ponadto font ma schludny, elegancki, „lekki” wygląd, który doskonale wpasowuje się we współczesne projekty.

Lato

Lato, lato…kto nie zna „lato”?:) Profesjonalny, spójny wygląd fonta przyniósł mu dużą popularność i wiele pobrań na Google fonts. Często wykorzystywany w tytułach i tekście głównym na stronie. Razem z wersją italic zawiera 10 stylów.

Ubuntu

Jeżeli szukasz oryginalnego fonta na tytuł, Ubuntu może być doskonałym wyborem. Wliczając wersje italic, razem zawiera 8 stylów. Może być on również odpowiednikiem dla popularnej, płatnej typografii FF Dax – sprawdź Darmowe odpowiedniki dla najpopularniejszej, płatnej typografii.

Dosis

Dosis posiada charakterystyczne zaokrąglone krawędzie, co czyni go dobrym wyborem dla projektów, w których chcesz osiągnąć ciepły, przyjazny odbiór. W skład jego rodziny wchodzi 7 grubości, od extraLight do extraBold.

Nunito

Podobnie jak Dosis, Nunito posiada charakterystyczne zaokrąglenia, nadające mu przyjaznego, współczesnego wyglądu. Font zawiera 7 grubości plus ich odpowiedniki w wersji italic.

Source Sans Pro

Source Sans Pro to kolejny nowoczesny font typu sans serif, o bardzo czytelnym kroju. Do pobrania dostępnych jest 6 jego grubości plus ich wersje italic.

Prompt

Prompt to prosty, geometryczny, dość szeroki font, z dużą ilością wolnej przestrzeni (negative space) wokół znaków. Zawiera 9 grubości, które mają swoje warianty również w wersji italic.

Work Sans

Szerszy Work Sans to kolejna propozycja czytelnego, neutralnego fonta, która nada Twojemu projektowi schludnego, profesjonalnego charakteru. Jego spora rodzina zawiera 9 grubości plus ich odpowiedniki w wersji italic.

Space Grotesk

Space Grotesk to oryginalny, trochę nietypowy font, o kwadratowym kroju. Jeżeli zależy Ci na uzyskaniu technicznego, a nawet nieco futurystycznego wyglądu, Space Grotesk może być trafnym wyborem. Do darmowego pobrania dostępne są 4 podstawowe grubości (light, regular, medium, bold).

Oswald

Listę – fonty z polskimi znakami do pobrania od Google zamykają dwa mocno zwężone kroje. Pierwszym z nich, jest Oswald, który może rewelacyjne wyglądać w tytułach lub w dużych blokach tekstu na stronie. Do pobrania jest 6 jego grubości.

Antonio

Drugim z nich jest Antonio i jest to właściwie moje ostatnie odkrycie. Jest on nieco węższy i wyższy od Oswald i może genialnie wyglądać jako tytuł w projekcie. Jak sam autor Vernon Adams twierdzi, Antonio jest rozszerzeniem jego innego fonta – Antona. Antonio jednak posiada więcej stylów (7- od Extra Light do Bold).

Jak filtrować Google Fonts pod kątem polskich znaków?

Zaraz pod polem wyszukiwania fontów (Search Fonts), znajdziesz rozwijane menu z wyborem języka (Language). Tam znajdziesz rozszerzenie Latin Extended, które zawiera polskie ogonki. Po jego wybraniu pokażą Ci się wszystkie fonty, które zawierają polskie znaki.

Jak używać Google Fonts w bardziej efektywny sposób?

Nie stosuj zbyt wielu różnych rodzin fontów w jednym projekcie – Może to zaburzyć spójność layoutu, ale również zwolnić wczytywanie się strony. Najczęściej wykorzystuje się 2 rodziny fontów, gdzie jeden umieszcza się w tytule, a drugi w tekście głównym na stronie.

Nie używaj zbyt wielu grubości fonta z tej samej rodziny – Będzie to miało podobny efekt jak powyżej. Prawdopodobnie zaburzy spójność projektu, a także zwolni czas ładowania się strony. Najczęściej wykorzystuje się 3 grubości: light – 300, regular – 400 i bold – 700.

Zwróć uwagę, czy font ma wsparcie wielojęzyczne – Jeżeli planujesz skierować stronę do odbiorów mówiącym w innym języku niż polski, upewnij się, że wybrany font posiada znaki szczególne danego języka i tekst będzie się wyświetlać w sposób poprawny.

W jaki sposób dodać fonty do Photoshopa na Windows?

Po pobraniu fontów z wybranej strony (np. Fontfabric, Fontspring), odszukaj je na swoim komputerze w folderze Pobrane. Jeżeli jest to paczka zip najpierw ją rozpakuj.

Po rozpakowaniu paczki, znajdź pliki z rozszerzeniem: OTF/TTF. Ogólnie każdy plik OTF/TTF jest odpowiednikiem danej grubości fonta. Zaznacz wszystkie style, które chcesz dodać do PSD, kliknij prawym przyciskiem myszy na wybrane grubości, a następnie Instaluj.

W tym momencie, dodane fonty powinny być już widoczne na liście zainstalowanych czcionek w Photoshopie.

W jaki sposób dodać fonty do HTML/CSS?

Kliknij na wybraną rodzinę fontów i wybierz grubości, które chcesz dodać na stronę, klikając w  przycisk Select this style. Po prawej stronie znajdziesz wybrane przez siebie grubości.

Kliknij na zakładkę Embed. Znajdziesz tam link, który potrzebujesz dodać do kodu strony HTML, a także CSS rules.

Wklej <link> tag skopiowany ze strony Google pomiędzy tagami <head></head> w kodzie strony HTML.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Test Website</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;1,600&display=swap" rel="stylesheet">
  <meta name="keywords" content="Travel planning, travel bundles, travel escapes">
  <meta name="description" content="Your clarity. One trip away. We create soul restoring journeys that inspire you to be you.">
 
  <link rel="stylesheet" href="styles.css">
</head>

Dodaj również CSS rules, do elementu, gdzie chcesz wyświetlić dany font.

body{
  font-family: 'Nunito', sans-serif;
}

W tym momencie, fonty powinny być już widoczne na stronie.

To już jest koniec…

Mam nadzieję, że przedstawiona lista fontów Google, zawęzi zakres twoich poszukiwań i pomoże Ci w wyborze odpowiedniej typografii. Jeżeli szukasz darmowych fontów na użytek komercyjny ze źródeł innych niż google, sprawdź również post – Darmowe fonty z polskimi znakami do użytku komercyjnego. Znajdzisz się tam propozycje minimalistycznych krojów bezszeryfowych ze stron takich jak Behance, DaFont, czy Font Squirrel.

Polecam Ci również:

Zamienniki fontów z polskimi znakami dla najpopularniejszej, płatnej typografii – Jeżeli szukasz tańszego rozwiązania dla wysokiej jakości, płatnej typografii, zobacz ten wpis. Znajduje się tam lista fontów z polskimi znakami od Google, które mogą być doskonałymi zamiennikami dla ich płatnych odpowiedników.

Przykłady rewelacyjnych kombinacji fontów od google + praktyczne narzędzia do łączenia typografii – Znajdziesz tam kilka wskazówek jak łączyć fonty, wraz z przykładami kombinacji fontów od google, a także praktyczne narzędzia do parowania typografii.

Ciekawe strony internetowe – motyw przewodni MINIMALIZM  – Jeżeli lubisz minimalistyczne projekty www, sprawdź ten post i zobacz jakie są obecnie trendy w tego typu stronach.