Najbolja sparivanja Google fontova za web stranice (6 kombinacija koje rade)

Dobro sparivanje fontova je font za naslove i font za tekst koji su dovoljno različiti da rade kao tim, a opet imaju isto raspoloženje. Siguran početak je serif za naslove uz čist sans-serif za tekst, na primjer Playfair Display + Source Sans 3. Ispod je šest sparivanja iz Google Fontsa, po jedno za svako raspoloženje, i besplatan način da ih isprobaš na svojoj stranici prije nego dirneš kod.

Što dva fonta čini dobrim parom

Zamisli bend. Pjevač je tvoj font za naslove, a glazbenici iza njega su font za tekst, onaj kojim su pisani odlomci. Ako svi viču u isti glas, nitko ne čuje riječi. Dobar par ima jedan glas koji se ističe i jedan koji ga podržava. Tri jednostavna pravila vode te većinom do cilja:

• Kontrast, ne sukob. Uzmi dva fonta koji se jasno razlikuju, poput serifa (slova s malim nožicama na krajevima, kao u tiskanoj knjizi) uz sans-serif (slova bez njih). Dva gotovo ista fonta samo izgledaju kao greška.
• Jedno raspoloženje. Razigran, zaobljen font uz ukočen, službeni šalje pomiješane signale. Biraj fontove koji bi se dobro osjećali u istoj sobi.
• Dva fonta, ne više. Jedan za naslove, jedan za tekst. Raznolikost dodaj veličinom i debljinom (koliko su slova tanka ili debela), a ne trećim fontom.

Klasičan: Playfair Display + Source Sans 3

Playfair Display je serif oštrih, kontrastnih poteza koji pomalo podsjeća na naslovnicu novina. Source Sans 3 je miran, lako čitljiv sans-serif koji se ne gura naprijed. Dobar izbor za blogove, magazine, portfolije i sve što želi djelovati pouzdano.

Elegantan: Cormorant Garamond + Montserrat

Cormorant Garamond je lagan, otmjen serif s dugim, nježnim linijama. Montserrat je širok, geometrijski sans-serif koji mu daje moderan oslonac. Misli na modu, ljepotu, vjenčanja i restorane. Jedan savjet: Cormorant postane tanak kad je malen, pa ga čuvaj za velike naslove.

Moderan: DM Serif Display + DM Sans

DM Serif Display je zdepast serif napravljen za velike naslove. DM Sans je čist, prijazan sans-serif sličnog mekog dojma, pa se dvojica lijepo stapaju. Dobar pogodak za startupe, agencije i landing stranice koje žele izgledati svježe, ali ne hladno.

Upečatljiv: Oswald + Open Sans

Oswald je visok i uzak, pa stane puno riječi u red i svejedno viče. Open Sans je širok, otvoren i vrlo lako čitljiv, što ga uravnotežuje. Koristan za vijesti, sport, događaje i svugdje gdje naslov mora privući pogled.

Tehnički: Space Grotesk + Inter

Space Grotesk ima pomalo čudnovat, geometrijski izgled koji kaže “mi gradimo stvari”. Inter je dizajniran za ekrane i ostaje čitljiv u malim veličinama, pa nosi odlomke. Prirodan izbor za softver, nadzorne ploče i alate za programere.

Prijateljski: Quicksand + Nunito

Quicksand i Nunito oba imaju blago zaobljene krajeve, pa djeluju kao da pripadaju jedno drugome. Rezultat je topao i pristupačan. Dobar izbor za obrazovanje, djecu, aplikacije, hranu i stranice zajednica.

Kako isprobati sparivanje na svojoj stranici

Čitati o paru nije isto što i vidjeti ga na svojim stranicama, sa svojim riječima. FontMee je besplatno Chromeovo proširenje, mali dodatak koji pregledniku daje jednu novu mogućnost, a omogućuje ti isprobati fontove na stvarnoj stranici, samo na tvom ekranu. Ima čak i sparivanja ugrađena: 32 ručno odabrana para za naslove i tekst, među njima svih šest gore. Video pokazuje panel na djelu.

1. Instaliraj FontMee. Dodaj ga iz Chrome web-trgovine. Besplatan je i ne treba račun. Klikni ikonu slagalice u Chromeu i prikvači ga, pa je uvijek na jedan klik.
2. Otvori svoju stranicu i klikni ikonu FontMeea. Panel se otvori pokraj stranice. Možeš pritisnuti i Alt + Shift + F. Chromeove vlastite stranice (Nova kartica, web-trgovina, stranice chrome://) ne mogu se mijenjati.
3. Klikni gumb Sparivanje fontova. Vidiš popis parova, svaki prikazan svojim pravim fontovima s oznakom raspoloženja, poput Klasičan, Upečatljiv ili Tehnički.
4. Pritisni Koristi ovaj par. Font za naslove i font za tekst odmah se promijene na stranici. Ako si već odabrao neki font, FontMee ti prvo predloži partnere za njega, pod Za i imenom fonta.
5. Usporedi i podesi. Prebacuj između Originalni font i FontMee pregled (ili pritisni Alt + Shift + O) i koristi Podesi za veličinu, debljinu, razmak redaka i slova. Isprobaj dva-tri para, jer onaj koji pobijedi na uzorku nije uvijek pobjednik na tvojoj stranici. Zadrži na stranici čuva tvoj izbor pri svakom posjetu, a Poništi sve vraća stranicu kakva je bila.

Četiri stvari za provjeriti prije odluke

• Koristi svoje riječi. Par koji izgleda sjajno na kratkom sloganu može izgledati drukčije na tvojim stvarnim nazivima proizvoda ili dugom odlomku.
• Pogledaj mali tekst, i to na mobitelu. Tekst odlomaka čita se mnogo više od naslova, pa mora biti ugodan i u maloj veličini.
• Provjeri slova koja ti trebaju. Naglasci poput č, ć, š, đ te ćirilica ili vijetnamska slova nisu u svakom fontu. FontMee ima filter Pismo koji prikazuje samo fontove sa slovima koja trebaš.
• Provjeri licencu. Google Fontsi su otvorenog koda i besplatni za komercijalnu uporabu, ali drugi fontovi možda nisu.

Je li to tvoja vlastita stranica? Onda je isprobavanje para tek pola posla. Kad ti se neki svidi, pritisni Kopiraj CSS i zalijepi pravila u stilski list svoje stranice, datoteku koja određuje kako stranica izgleda (u WordPressu je pod Izgled, Prilagodi, Dodatni CSS). FontMee navodi i licencu svakog fonta, a može preuzeti i ZIP s fontovima za vlastiti hosting, pa preglednici tvojih posjetitelja učitavaju fontove s tvog poslužitelja, a ne s Googlea. Stranici treba i dom u kojem živi, a graditelj stranica je najbrži način da ga dobiješ bez koda.

Preuzmi ekstenziju

FontMee je besplatan, s 1900+ fontova, 32 gotova sparivanja, kopiranjem CSS-a i učitavanjem vlastitih fontova. Bez računa, bez pretplate. Dodaj ga iz Chrome web-trgovine ili prvo pročitaj stranicu o FontMeeu.

Dobro je znati prije nego počneš

FAQ