10 Awesome Google Font Combinations Trending in 2021

Lista modnych czcionek ręcznie wybranych z Google Fonts, które dobrze ze sobą parują i jak zainstalować je na swojej stronie internetowej.

• Article by Jason Beever
• Updated: January 2, 2020
• Tags: typografia, projektowanie stron internetowych

Typografia stron internetowych była kiedyś bardziej tajemniczą praktyką projektową niż dzisiaj. Skomplikowany proces ozdabiania strony internetowej niestandardowymi czcionkami wymagał kiedyś konwertowania i osadzania plików czcionek na serwerze użytkownika, a wybór dostępnych czcionek był ograniczony do własnej kolekcji użytkownika lub wiedzy na temat typografii poza standardowymi czcionkami systemowymi. W rezultacie, większość stron internetowych wyglądała prawie identycznie w ich formatowaniu zawartości, która opierała się na wielu nadużywanych i prozaicznych bezpiecznych czcionkach.

To wszystko zmieniło się w 2010 roku wraz z wydaniem Google Fonts, projektu open-source, który pozwala na znacznie łatwiejsze wdrożenie niestandardowych czcionek na stronach internetowych. Instalowanie tych czcionek na własnej stronie internetowej jest na szczęście procesem szybkim i łatwym, ale należy pamiętać, że nie każda kombinacja czcionek w bibliotece Google jest receptą na sukces typograficzny. Z właściwymi parami czcionek i rozważaniami na temat użycia, jednak, twoja marka online może emanować profesjonalizmem, pięknem i przyjaznością dla czytelnika bez potrzeby drogich niestandardowych czcionek. W tym artykule, pokażę Ci jak to wszystko osiągnąć.

Lista 10 modnych kombinacji czcionek Google

Zabierzmy się do tego! W żadnej konkretnej kolejności, oto 10 najlepszych kombinacji Google Font obecnie trendy:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Oto prosta kombinacja, która działa cuda dla niemal każdego możliwego zastosowania. Open Sans jest jednym z – jeśli nie najbardziej uniwersalnych fontów w całej kolekcji Google Fonts. Jest niezwykle łatwa do odczytania w dużych blokach tekstu, a jednocześnie wystarczająco efektowna do nagłówków.

Prosta. Wyrafinowany. Znany. Nie możesz się pomylić!

Użycie w prawdziwym świecie

Nie mogę przewidzieć żadnego scenariusza, w którym Open Sans byłby złym wyborem. O ile nie szukasz specjalnie czcionki szeryfowej, myślę, że ta będzie służyć większości firm, blogów, stron docelowych lub aplikacji internetowych doskonale.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald jest świetną czcionką do nagłówków bez względu na wagę czcionki lub użycie kapsli. Jego skondensowana natura pomaga mu przyciągnąć uwagę, ale również sprawia, że jest przyjemnie unikalnym tekstem jako czcionka głównego korpusu.

EB Garamond jest elegancką aktualizacją klasycznej czcionki Garamond. Natychmiast rozpoznawalna i ponadczasowa w wyglądzie, czcionka ta emanuje charakterystycznym profesjonalizmem w Twojej typografii.

Real-World Use

Ta para działa dobrze dla profesjonalistów zajmujących się klientelą z wyższej półki, takich jak adwokaci, agencje nieruchomości, a nawet ekskluzywne butiki. Wszechstronność Oswalda i klasyczny wygląd EB Garamond tworzą świetny tekst opisu produktu, w którym ważne jest podkreślenie wysokiej jakości przedmiotu.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat jest ulubionym pismem wśród projektantów ze względu na swoją wszechstronność i prostotę, a Merriweather wspaniale współgra z jego kontrastowym stylem i łatwą czytelnością. Nie krępuj się zamieniać ich jako nagłówki lub tekst akapitowy – oba świetnie sprawdzają się w obu przypadkach!

Real-World Use

Ta szczególna kombinacja stanowi miłą równowagę między nowoczesnym i klasycznym wzornictwem. Jako takie, jego różnorodność zastosowań może wspierać wiele rodzajów biznesu. Osobiście czuję, że te czcionki dobrze by się spisały dla każdego rodzaju źródła wiadomości online lub agencji wydawniczej.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Rodzina czcionek Roboto jest osobistym faworytem i jest również jedną z tych, których używamy tutaj w How To Get Online. Niezwykle wszechstronna z szerokim zakresem wag czcionek, praktycznie nie ma ograniczeń co do tego, do czego ta czcionka może być użyta. Nowoczesny i geometryczny, ale w jakiś sposób pozostający przyjazny i niezawodny, Roboto jest cudem formy i funkcji.

Real-World Use

Jest to kolejna para, dla której ciężko byłoby znaleźć złe zastosowanie. Podczas gdy Roboto pasuje do wszystkiego, myślę, że jest szczególnie dobre dla start-upów technologicznych, nowoczesnych małych firm lub każdego rodzaju marki z myślą o przyszłości.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

To znowu nasz przyjaciel Roboto! Tym razem jednak przyglądamy się odmianie szeryfowej, Roboto Slab. Jest to czcionka, która jest tak samo uniwersalna jak jej kuzynka, ale nieco bardziej klasyczna w stylu. W połączeniu z charakterystyczną i odważną Raleway, mamy niesamowite połączenie czystej i wyrafinowanej typografii.

Real-World Use

Raleway jest jedną z tych czcionek, które krzyczą wyrafinowaniem. Kiedy jest używana jako nagłówek, myślę, że pięknie sprawdza się w przypadku luksusowych przedmiotów, takich jak biżuteria, odzież designerska lub podobnie ekskluzywne produkty e-commerce. Roboto Slab dobrze wspiera ją prostym i przystępnym tekstem opisowym.

Obydwie te czcionki działają również zamiennie. Wypróbuj różne warianty wagowe dla obu czcionek w nagłówkach i tekście głównym i zobacz, która para najlepiej oddaje Twoją markę.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Według projektanta Playfair Display został zainspirowany formami pisma z XVIII wieku podczas przejścia od piór z dudkami do piór ze stalowymi końcówkami. Nie jest więc niespodzianką, że ta czcionka emanuje urokiem starego świata, ale z nowoczesną nutą.

Source Sans Pro popycha rzeczy trochę dalej w przyszłość, tworząc intrygującą kombinację, która jest ozdobna, ale wciąż jest utylitarna.

Real-World Use

Playfair Display dodaje osobisty akcent do czegoś takiego jak tagline lub opis produktu. Jeśli będziesz miał okazję użyć ampersandu lub symboli walutowych, natychmiast zobaczysz, dlaczego jest to idealny wybór dla produktu lub usługi skupionej wokół luksusu i pozorów. Source Sans Pro utrzymuje tekst w nowoczesnej i czystej prezentacji.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One może nie jest najbardziej uniwersalną czcionką, ale jedną z rzeczy, którą robi wyjątkowo dobrze, jest tworzenie nagłówków, które wymagają uwagi. Małe czy duże, małe czy wielkie, te litery są hipnotyzujące bez względu na to, co się z nimi zrobi.

Noto Sans ma być prawdziwie uniwersalną czcionką, która, bez względu na język, może być wyświetlana bez błędów formatowania dla użytkowników na całym świecie. Odpowiednio, estetyka czcionki jest równie wszechstronna jak jej użyteczność.

Real-World Use

Blogi lub strony docelowe byłyby świetne dla tej pary – lub naprawdę wszystko z długimi ciałami tekstu, które wymagają zauważalnych podtytułów do rozbicia treści. Uniwersalne możliwości adaptacyjne Noto Sans sprawiają, że jest to również dobry wybór, gdy priorytetem jest dotarcie do międzynarodowej publiczności.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya ma pewien urok, który wydaje mi się bardzo „ziemisty” i przyjazny. Nie ma żadnego udawania w jej osobowości; to, co widzisz, jest tym, co dostajesz.

Lato mogłaby dać Open Sans prowadzenie za swoje pieniądze jako mistrz uniwersalnych czcionek w bibliotece Google.

Razem tworzą kombinację, która jest zabawna, łatwa do czytania i pragmatyczna.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Kolejne nowoczesne ujęcie stylistyki Starego Świata, PT Sans i jego bracia, PT Sans Narrow, tworzą natychmiastowe i niezaprzeczalne oświadczenie, gdy są sparowane razem.

Użycie w prawdziwym świecie

Każda z tych czcionek działa równie dobrze jako nagłówek lub tekst główny; konkretna para, którą wybierzesz, będzie zależeć od charakteru Twoich słów – chociaż ja mam tendencję do preferowania PT Sans Narrow w krótszych seriach.

Zmierzona jako „bardzo ważne narzędzie dla nowoczesnej komunikacji cyfrowej”, wydaje się najbardziej odpowiednia – chociaż z pewnością nie ograniczona – do użycia tych czcionek dla startupów technologicznych, aplikacji oprogramowania lub innych firm cyfrowych.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okay, ten jest zdecydowanie bardziej po lekkiej stronie. Oczywiście ta kombinacja nie będzie działać dla każdego, ale kapryśna natura zarówno Amatic SC, jak i Josefin Sans tworzą coś, co na pewno będzie się wyróżniać – tak długo, jak zachowasz ostrożność!

Użycie w prawdziwym świecie

Jeśli jesteś artystą, aktorem, muzykiem lub konferansjerem o wesołym usposobieniu, ta czcionka może być niezbędna do uchwycenia Twojej unikalnej osobowości. W zależności od nadrzędnego tonu i tematyki, ta kombinacja mogłaby się sprawdzić również w przypadku niszowego bloga.

Słowo porady: Nie używaj Amatic SC jako swojego głównego tekstu ciała. You will drive your readers insane.

Bonus: 5 of Our Favorite Premium Fonts

Wiemy, że ten artykuł jest o najlepszych, trendowych czcionkach Google, ale chcieliśmy również wspomnieć o kilku naszych ulubionych czcionkach premium jako bonus. Czcionki premium, oczywiście, nie są darmowe – ale dają twojej stronie bardziej unikalny i niestandardowy projekt. Te czcionki nie są popularne lub trendy i są rzeczywiście przeciwieństwem tych, które wymieniliśmy powyżej. Jednak są one świetne dla tych, którzy chcą niestandardowego i spersonalizowanego projektu dla swojej marki i idą dobrze, gdy są używane do logo lub nawet kreatywnych nagłówków:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Why Should You Use Google Fonts?

Witamy w tym, co wielu projektantów stron internetowych uważa za swojego najlepszego przyjaciela. Mówiąc z doświadczenia, mogę ci powiedzieć, że rzadko osadzam niestandardowe pliki czcionek na stronach internetowych już. Google Fonts jest teraz prawie wyłącznie pierwszym i ostatnim miejscem do którego się zwracam w sprawie typografii strony internetowej. Oto dlaczego:

• Jest całkowicie darmowy. Nie ma znaczenia ile czcionek wybierzesz lub na ilu stronach ich użyjesz. Nigdy nie zapłacisz ani grosza.
• W marcu 2018 roku w bibliotece znajduje się ponad 850 czcionek. Szanse, że znajdziesz odpowiedni styl pasujący do Twojej marki.
• To jest szybkie. Ponieważ czcionki są hostowane na serwerach Google, pliki są inteligentnie skompresowane i zaprojektowane tak, aby szybko się ładowały.
• To łatwe. Proste kopiuj-wklej do pliku HTML i gotowe.
• Jest zorganizowany. Wszystkie czcionki są skategoryzowane i możliwe do wyszukiwania w jednej bazie danych. Koniec z przeszukiwaniem niechlujnych podfolderów na twoim komputerze, aby znaleźć tę idealną czcionkę.
• Czy wspomniałem, że jest za darmo? Jest za darmo!

Jak zainstalować Google Fonts

Bez bólu głowy wymaganego tutaj. Po prostu idź do Google Fonts i znajdź czcionkę(i), których potrzebujesz.

Jak wybierasz czcionki są one kumulatywnie dodawane do kolekcji na dole strony. Kiedy skończysz z twoim wyszukiwaniem, kliknij na tę dolną zakładkę i okno z instrukcjami osadzania wyskoczy.

Dodawanie stylów

Od tego miejsca możesz wybrać włączenie dodatkowych stylów takich jak kursywa, pogrubienie, pogrubienie-italic i tak dalej. Po prostu kliknij na zakładkę CUSTOMIZE i wybierz style, które uważasz, że będą potrzebne.

Na przykład, oto jak wybrałbym zarówno zwykły jak i pogrubiony tekst dla czcionki Khula.

Wprowadzanie standardu lub @Import?

Zauważysz, że masz dwie opcje osadzania czcionek na swojej stronie: używając standardowego <link href> do użycia w pliku HTML twojej strony, lub @import url do dołączenia w pliku CSS twojej strony. Więc którego z nich powinieneś użyć?

Generalnie najlepszą opcją jest skopiowanie i wklejenie linii <link href> do twojego pliku HTML. Twoje czcionki będą zazwyczaj ładować się szybciej w ten sposób zamiast czekać na załadowanie pliku CSS, a ta metoda ma również nieco lepsze wsparcie dla (bardzo) starych przeglądarek.

Gdzie umieścić kod

Będziesz kopiować i wklejać linię kodu, którą daje ci Google do sekcji <head> twojego pliku HTML. Tak więc używając czcionki Khula, którą wybrałem powyżej, będzie to wyglądało tak:

Używanie czcionki w swoim arkuszu stylów

Teraz po prostu wywołujesz czcionkę jak zwykle w swoim kodzie CSS. Dla celów demonstracyjnych, twój główny nagłówek i tekst akapitu może wyglądać tak:

Advice On Pairing Your Fonts

Decyzja o tym, które czcionki zgrupować razem, może być czasami trudną do osiągnięcia równowagą artystyczną. Z jednej strony, twój wybór czcionki będzie najbardziej skuteczny, gdy jest wystarczająco dużo kontrastu w stylach; każda czcionka na twojej stronie musi wyróżniać się od innych i zdobyć uzasadnienie dla jej użycia. Z drugiej strony, nie chcesz, aby twoje czcionki zbytnio odbiegały od siebie stylistycznie, co mogłoby dać wrażenie, że zostały wybrane losowo.

Serif i Sans-Serif

Próbowana i prawdziwa metoda to sparowanie czcionki szeryfowej z bezszeryfową. Ich style mają tendencję do dobrego kontrastowania razem, oferując łatwe rozróżnienie między nagłówkami i akapitami.

Eksperymentowanie jest kluczowe

Gdy wybieram czcionki dla nowej witryny, lubię pobierać wszystkie możliwe opcje Google Font na mój komputer i bawić się z nimi w edytorze tekstu. Bawienie się różnymi rozmiarami i wagami oraz porównywanie kombinacji obok siebie jest skutecznym sposobem na określenie najlepszej możliwej pary. Poświęcając czas na eksperymenty, możesz nawet odkryć, że użycie cienkiej odmiany danej czcionki czyni tekst nagłówka lepszym, niż gdybyś używał zupełnie osobnej czcionki. (Najprostsze rozwiązanie jest często najlepsze.)

Konkluzja

Czcionki Google to potężny zasób dla majsterkowiczów, którzy nie chcą płacić za drogie niestandardowe czcionki na swojej stronie. Ale z wielką mocą przychodzi wielka odpowiedzialność: typografia wymaga starannego przemyślenia, aby była zrobiona dobrze, i nie każda czcionka jest zwycięzcą. Mamy nadzieję, że ten przewodnik pomoże Ci kierować się we właściwym kierunku, inspirując Cię do znalezienia tej idealnej pary czcionek, aby uchwycić osobowość Twojej marki.