Najlepsze pary czcionek Google do stron internetowych (6 połączeń, które działają)

Dobra para czcionek to czcionka nagłówka i czcionka tekstu, które różnią się na tyle, by działać jak zespół, a mają ten sam nastrój. Bezpieczny start to szeryfowy nagłówek z czystym tekstem bezszeryfowym, na przykład Playfair Display + Source Sans 3. Poniżej jest sześć par z Google Fonts, po jednej na nastrój, i darmowy sposób, żeby wypróbować je na własnej stronie, zanim dotkniesz kodu.

Co sprawia, że dwie czcionki tworzą dobrą parę

Pomyśl o zespole muzycznym. Wokalistka to twoja czcionka nagłówka, a muzycy za nią to czcionka tekstu, ta od akapitów. Jeśli wszyscy krzyczą naraz, nikt nie słyszy słów. Dobra para ma jeden głos, który się wyróżnia, i jeden, który go wspiera. Trzy proste zasady zaprowadzą cię daleko:

• Kontrast, nie zgrzyt. Wybierz dwie wyraźnie różne czcionki, na przykład szeryfową (litery z małymi stopkami na końcach, jak w drukowanej książce) obok bezszeryfowej (liter bez stopek). Dwie prawie takie same czcionki wyglądają po prostu jak błąd.
• Jeden nastrój. Zabawna, zaokrąglona czcionka obok sztywnej, oficjalnej wysyła sprzeczne sygnały. Wybieraj czcionki, które czułyby się dobrze w jednym pokoju.
• Dwie czcionki, nie więcej. Jedna do nagłówków, jedna do tekstu. Urozmaicenie dodaj rozmiarem i grubością (jak cienkie lub grube są litery), a nie trzecią czcionką.

Klasyczny: Playfair Display + Source Sans 3

Playfair Display to szeryfowa czcionka o ostrych, kontrastowych liniach, która trochę przypomina pierwszą stronę gazety. Source Sans 3 to spokojna, łatwa do czytania bezszeryfowa czcionka, która nie pcha się na pierwszy plan. Dobry wybór do blogów, magazynów, portfolio i wszystkiego, co ma budzić zaufanie.

Elegancki: Cormorant Garamond + Montserrat

Cormorant Garamond to lekka, wdzięczna czcionka szeryfowa o długich, delikatnych liniach. Montserrat to szeroka, geometryczna czcionka bezszeryfowa, która daje jej nowoczesny grunt pod nogami. Pomyśl o modzie, urodzie, ślubach i restauracjach. Jedna wskazówka: Cormorant staje się cienka, gdy jest mała, więc zachowaj ją na duże nagłówki.

Nowoczesny: DM Serif Display + DM Sans

DM Serif Display to krępa czcionka szeryfowa stworzona do wielkich tytułów. DM Sans to czysta, przyjazna czcionka bezszeryfowa o podobnie miękkim charakterze, więc obie dobrze się łączą. Dobry wybór dla startupów, agencji i stron docelowych, które mają wyglądać świeżo, ale nie chłodno.

Mocny: Oswald + Open Sans

Oswald jest wysoka i wąska, więc w jednym wierszu mieści się dużo słów i nadal krzyczą. Open Sans jest szeroka, otwarta i bardzo czytelna, co ją równoważy. Przydatna przy wiadomościach, sporcie, wydarzeniach i wszędzie tam, gdzie nagłówek musi przyciągnąć wzrok.

Techniczny: Space Grotesk + Inter

Space Grotesk ma lekko dziwaczny, geometryczny wygląd, który mówi „my budujemy rzeczy”. Inter zaprojektowano z myślą o ekranach i jest czytelna także w małym rozmiarze, więc niesie akapity. Naturalny wybór dla oprogramowania, paneli i narzędzi dla programistów.

Przyjazny: Quicksand + Nunito

Quicksand i Nunito mają miękko zaokrąglone końce, więc wyglądają, jakby do siebie należały. Efekt jest ciepły i przystępny. Dobry wybór do edukacji, dzieci, aplikacji, jedzenia i stron społeczności.

Jak wypróbować parę na własnej stronie

Czytanie o parze to nie to samo, co zobaczenie jej na własnych stronach, z własnymi słowami. FontMee to darmowe rozszerzenie Chrome, czyli mały dodatek, który daje przeglądarce jedną nową funkcję, i pozwala wypróbować czcionki na prawdziwej stronie, tylko na twoim ekranie. Ma nawet gotowe pary: 32 ręcznie wybrane zestawy nagłówka i tekstu, w tym wszystkie sześć z góry. Film pokazuje panel w akcji.

1. Zainstaluj FontMee. Dodaj je ze Sklepu Chrome. Jest darmowe i nie wymaga konta. Kliknij ikonę puzzla w Chrome i przypnij rozszerzenie, żeby zawsze było o jedno kliknięcie.
2. Otwórz swoją stronę i kliknij ikonę FontMee. Panel otwiera się obok strony. Możesz też nacisnąć Alt + Shift + F. Własnych stron Chrome (Nowa karta, Sklep, strony chrome://) nie da się zmienić.
3. Kliknij przycisk Pary czcionek. Zobaczysz listę par, każdą pokazaną w prawdziwych czcionkach z etykietą nastroju, takim jak Klasyczny, Mocny czy Techniczny.
4. Naciśnij Użyj tej pary. Czcionka nagłówka i czcionka tekstu zmieniają się na stronie od razu. Jeśli wcześniej wybrałeś już jakąś czcionkę, FontMee najpierw podpowie dla niej partnerów, pod Dla: i nazwą czcionki.
5. Porównaj i dostrój. Przełączaj między Oryginalna czcionka a Podgląd FontMee (albo naciśnij Alt + Shift + O) i użyj Dostrój do rozmiaru, grubości, wysokości wiersza i odstępów między literami. Wypróbuj dwie, trzy pary, bo ta, która wygrywa na karcie przykładowej, nie zawsze wygrywa na twojej stronie. Zachowaj na stronie trzyma twój wybór przy każdej wizycie, a Resetuj wszystko przywraca stronę do stanu sprzed zmian.

Cztery rzeczy do sprawdzenia przed decyzją

• Użyj własnych słów. Para, która świetnie wygląda przy krótkim haśle, może wyglądać inaczej przy prawdziwych nazwach produktów albo długim akapicie.
• Obejrzyj mały tekst, także na telefonie. Tekst akapitów czyta się o wiele częściej niż nagłówki, więc musi być wygodny w małym rozmiarze.
• Sprawdź litery, których potrzebujesz. Polskie znaki jak ł, ś i ż oraz cyrylica czy litery wietnamskie nie są w każdej czcionce. FontMee ma filtr Pismo, który pokazuje tylko czcionki z potrzebnymi ci literami.
• Sprawdź licencję. Google Fonts są open source i darmowe do użytku komercyjnego, ale inne czcionki mogą nie być.

To twoja własna strona? Wtedy wypróbowanie pary to tylko połowa roboty. Gdy któraś ci się spodoba, naciśnij Kopiuj CSS i wklej reguły do arkusza stylów swojej strony, czyli pliku, który decyduje o wyglądzie witryny (w WordPressie jest pod Wygląd, Dostosuj, Dodatkowy CSS). FontMee pokazuje też licencję każdej czcionki i potrafi pobrać ZIP z czcionkami do własnego hostingu, dzięki czemu przeglądarki twoich odwiedzających ładują je z twojego serwera, a nie od Google. Strona potrzebuje też domu, w którym zamieszka, a kreator stron to najszybszy sposób, żeby go mieć bez kodu.

Pobierz rozszerzenie

FontMee jest darmowe, z ponad 1900 czcionkami, 32 gotowymi parami, kopiowaniem CSS i wgrywaniem własnych czcionek. Bez konta, bez subskrypcji. Dodaj je ze Sklepu Chrome albo najpierw przeczytaj stronę FontMee.

Warto wiedzieć, zanim zaczniesz

FAQ