CodeKitHubŠta je ovaj alat?
Kombinovanje fontova podrazumeva izbor dva (ponekad tri) fonta koji se koriste zajedno na stranici — obično jedan za naslove, a jedan za tekst — kako bi stranica imala vizuelnu hijerarhiju, a da pritom ne deluje neusklađeno ili monotono.
Svaka kombinacija ispod prikazuje primer prikazan uživo: font za naslov gore, font za tekst ispod, uz korišćenje stvarnih Google Fonts fajlova, tako da je ono što vidite tačno ono što ćete dobiti na svom sajtu.
Uz svaku kombinaciju ide spreman `<link>` tag za ugrađivanje iz Google Fonts i odgovarajući CSS isečak sa `font-family` deklaracijama za naslove i tekst — kopirajte oba i gotovi ste.
Zašto ga koristiti?
- 28 ručno odabranih kombinacija, a ne automatski generisana lista — svaka je izabrana zato što se ta dva fonta zaista dobro dopunjuju.
- Prikaz uživo: svaka kombinacija se prikazuje sa stvarnim fontovima učitanim sa Google Fonts, a ne kao statična slika ili pretpostavka na osnovu imena fonta.
- Filtriranje po stilu — Moderan, Elegantan, Izražajan, Minimalistički, Klasičan — da biste brzo pronašli utisak koji vam je potreban za projekat.
- Kopiranje jednim klikom i za `<link>` tag za ugrađivanje i za CSS `font-family` pravila.
- Besplatno, radi direktno u vašem pretraživaču, bez naloga ili prijave.
Kako se koristi
- Po želji kliknite na filter stila (Moderan, Elegantan, Izražajan, Minimalistički, Klasičan) da suzite listu, ili ostavite izabrano „Sve” da pregledate ceo izbor.
- Pregledajte kartice sa prikazom uživo — gornji red prikazuje font za naslov, a donji font za tekst.
- Otvorite kombinaciju koja vam se dopada i kliknite da proširite sekciju sa kodom za ugrađivanje.
- Kopirajte `<link>` tag u `<head>` svog HTML-a, a CSS isečak u svoj stylesheet kako biste primenili fontove na naslove i tekst.
Primer
Unos
Elegantan blogRezultat
Playfair Display (naslovi) + Source Sans Pro (tekst)Filtriranje po „Elegantan” izdvaja kontrastne serifne naslove uparene sa čistim, veoma čitljivim bezserifnim tekstom — česta kombinacija za uredničke i blog layoute.
Principi dobrog kombinovanja fontova
- Kontrast umesto sličnosti: dva fonta koja izgledaju gotovo identično (na primer dva slična geometrijska bezserifna fonta) obično deluju kao greška, a ne kao namerni izbor. Uparite serifni font sa bezserifnim, ili teži display font sa lakšim tekstualnim, tako da razlika deluje namerno.
- Uskladite x-visinu i proporcije: fontovi čija mala slova imaju sličnu vizuelnu visinu obično deluju kao da pripadaju istoj stranici, čak i kada im se stilovi razlikuju — neusklađena x-visina jedan je od najčešćih razloga zašto kombinacija deluje „neusklađeno”.
- Ograničite se na dve porodice fontova (ponekad tri): jednu za naslove, jednu za tekst, i najviše treću za akcente poput dugmadi ili oznaka. Više od toga i stranica počinje da deluje neplanirano.
- Uzmite u obzir raspoloženje, ne samo oblik: zaobljeni, prijateljski bezserifni font uparen sa formalnim serifnim šalje kontradiktorne signale, čak i ako oblici slova tehnički funkcionišu zajedno — birajte fontove koji se slažu i po tonu i po strukturi.
- Testirajte u stvarnim veličinama: kombinacija koja izgleda odlično u velikom prikazu može izgubiti kontrast u veličini tekstualnog sadržaja, ili display font može postati nečitljiv u malim veličinama — uvek proverite obe krajnosti.
Biranje kombinacije prema nameni
Landing stranicama i marketinškim sajtovima obično najviše odgovaraju filteri „Izražajan” ili „Moderan” — snažan, kontrastan font za naslov privlači pažnju odmah na vrhu stranice, upareno sa čistim, neutralnim tekstualnim fontom koji olakšava skeniranje dužeg teksta.
Blogovi i urednički sadržaj najbolje se čitaju sa kombinacijama „Elegantan” ili „Klasičan” — profinjen serifni naslov ukazuje na promišljen, uređen ton, dok udoban serifni ili bezserifni tekst čini duge tekstove čitljivim tokom dužeg čitanja.
E-commerce i sajtovi sa proizvodima obično preferiraju kombinacije „Minimalistički” — suzdržani, neutralni fontovi zadržavaju fokus na fotografijama proizvoda i cenama, a ne na samoj tipografiji, što je važno kada se na jednoj stranici pojavljuju desetine kartica proizvoda.
Portfolija i kreativni sajtovi imaju najviše prostora za eksperimentisanje — kombinacije „Izražajan” ili „Elegantan” sa više karaktera mogu dobro funkcionisati jer je publika tu delom i da bi procenila vizuelni ukus.
Napomene o performansama i licenciranju
`<link>` tag za ugrađivanje učitava fontove sa Google-ovog CDN-a, koji je brz i keširan na mnogim sajtovima koje su vaši posetioci verovatno već posetili — ali ipak dodaje spoljni zahtev. Za sajtove kod kojih je bitna svaka milisekunda, preuzimanje fajlova fontova i njihovo samostalno hostovanje (uz ručno podešen `font-display: swap`) uklanja tu spoljnu zavisnost, uz nešto veći trud oko podešavanja.
Svi fontovi na Google Fonts su otvorenog koda i besplatni za komercijalnu upotrebu bez potrebe za navođenjem autora, iako je pomenuti dizajnera fonta lep gest kada je to jednostavno izvodljivo.
Često postavljana pitanja
Šta čini da se dva fonta „dobro slažu”?
Dobre kombinacije uravnotežuju kontrast i harmoniju. Kontrast — uparivanje serifnog i bezserifnog fonta, ili izražajnog display fonta sa jednostavnim tekstualnim fontom — stvara vizuelnu hijerarhiju tako da se naslovi i tekst jasno razlikuju. Harmonija — slična x-visina, uporediva debljina poteza i sličan osećaj formalnosti ili razigranosti — sprečava da se ta dva fonta sudaraju. Kombinacije ovde su pažljivo odabrane vodeći računa o oba faktora.
Da li naslovi i tekst uvek treba da koriste različite fontove?
Ne, korišćenje jedne porodice fonta za oboje (poput kombinacije „Rubik + Rubik” u ovom alatu) takođe dobro funkcioniše, sve dok font ima dovoljno varijacija debljine da razdvoji naslove od teksta. To je validan, minimalistički izbor — ne greška.
Kako zapravo primenim kombinaciju na svoj sajt?
Kopirajte `<link>` tag za ugrađivanje u `<head>` svoje stranice kako bi se fontovi učitali sa Google-ovog CDN-a, a zatim kopirajte CSS isečak u svoj stylesheet — on postavlja `font-family` za naslove (h1, h2, h3) i za tekst (body, p). Prilagodite CSS selektore ako se vaš markup razlikuje.
Da li će učitavanje Google Fonts fontova usporiti moj sajt?
Svaki dodatni fajl fonta dodaje mrežni zahtev i određeni rizik od blokiranja prikaza. Ograničite se na jednu debljinu za naslove i jednu ili dve za tekst, koristite `display=swap` (već uključeno u kodu za ugrađivanje) kako bi se tekst prikazao rezervnim fontom dok se veb font učitava, a za produkcijske sajtove kojima je potrebno najbrže moguće učitavanje razmislite o samostalnom hostovanju fajlova fontova.
Da li su ovi fontovi besplatni za komercijalnu upotrebu?
Da. Svaki font na Google Fonts, uključujući sve kombinacije prikazane ovde, licenciran je pod SIL Open Font License ili Apache License — obe licence dozvoljavaju besplatnu komercijalnu upotrebu, izmenu i redistribuciju bez autorskih naknada.