CodeKitHub
Hrvatski
Alati za kod

Pretraživač kombinacija Google fontova

Zadnje ažurirano:

Odabrati dva fonta koja stvarno dobro funkcioniraju zajedno teže je nego što izgleda — ako su previše slični, stranica djeluje ravno, a ako su previše različiti, djeluje kaotično. Ovaj alat preskače metodu pokušaja i pogreške i nudi 28 odabranih kombinacija fonta za naslove i tekst, svaka prikazana uživo kako biste vidjeli stvarni kontrast prije nego što se odlučite. Filtrirajte po stilu, a zatim kopirajte Google Fonts embed link i CSS pravila za font-family izravno u svoj projekt.

The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Montserrat + Merriweather
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Poppins + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Oswald + Lato
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Raleway + Lora
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bebas Neue + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Merriweather + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Abril Fatface + Poppins
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cormorant Garamond + Nunito Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Archivo Black + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Libre Baskerville + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Josefin Sans + PT Serif
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Fjalla One + Noto Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Work Sans + Georgia
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Space Grotesk + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
DM Serif Display + DM Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Anton + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Crimson Text + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Quicksand + Nunito
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Rubik + Rubik
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bitter + Raleway
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Yeseva One + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Barlow Condensed + Barlow
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cinzel + EB Garamond
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Righteous + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Prata + Jost
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Staatliches + Karla
Embed code / CSS code

Što je ovaj alat?

Kombiniranje fontova znači odabir dvaju (ponekad triju) pisama koja se koriste zajedno na stranici — obično jedno za naslove, a drugo za tekst — kako bi stranica imala vizualnu hijerarhiju, a da pritom ne izgleda neusklađeno ili monotono.

Svaka kombinacija u nastavku prikazuje uzorak renderiran uživo: font za naslov gore, font za tekst ispod, korištenjem stvarnih Google Fonts datoteka, tako da ono što vidite bude i ono što ćete dobiti na svojoj stranici.

Uz svaku kombinaciju dolazi gotova Google Fonts `<link>` embed oznaka i odgovarajući CSS isječak s `font-family` deklaracijama za naslove i tekst — kopirate oboje i gotovo je.

Zašto ga koristiti?

  • 28 ručno odabranih kombinacija, ne automatski generirana lista — svaka je odabrana jer se dva pisma stvarno dobro nadopunjuju.
  • Prikaz uživo: svaka se kombinacija prikazuje sa stvarnim fontovima učitanima s Google Fontsa, ne kao statična slika ili pretpostavka na temelju naziva.
  • Filtriranje po stilu — Moderno, Elegantno, Izražajno, Minimalistički, Klasično — kako biste suzili izbor na osjećaj koji vaš projekt treba.
  • Kopiranje jednim klikom i za `<link>` embed oznaku i za CSS `font-family` pravila.
  • Besplatno, radi u vašem pregledniku, bez potrebe za računom ili prijavom.

Kako ga koristiti

  1. Po želji kliknite filter po stilu (Moderno, Elegantno, Izražajno, Minimalistički, Klasično) kako biste suzili listu, ili ostavite odabrano "Sve" za pregled svih kombinacija.
  2. Pregledajte kartice s prikazom uživo — gornji redak prikazuje font za naslov, a donji font za tekst.
  3. Otvorite kombinaciju koja vam se sviđa i kliknite za proširivanje odjeljka s embed kodom.
  4. Kopirajte `<link>` oznaku u `<head>` svog HTML-a, a CSS isječak u svoju stylesheet datoteku kako biste primijenili fontove na naslove i tekst.

Primjer

Ulaz

Elegantan blog

Izlaz

Playfair Display (naslovi) + Source Sans Pro (tekst)

Filtriranje po opciji "Elegantno" izdvaja naslove s izraženim serifnim kontrastom u kombinaciji s čistim, vrlo čitljivim sans-serif fontom za tekst — čest izbor za uredničke i blog stranice.

Načela dobrog kombiniranja fontova

  • Kontrast umjesto sličnosti: dva fonta koja izgledaju gotovo identično (na primjer, dva slična geometrijska sans-serif fonta) obično djeluju kao pogreška, a ne kao namjeran izbor. Spojite serifni font sa sans-serif fontom, ili teži display font s lakšim fontom za tekst, kako bi razlika djelovala namjerno.
  • Uskladite x-visinu i proporcije: fontovi čija mala slova sjede na sličnoj vizualnoj visini obično djeluju kao da pripadaju istoj stranici, čak i kad im se stilovi razlikuju — neusklađena x-visina jedan je od najčešćih razloga zašto kombinacija djeluje "neuklopljeno".
  • Ograničite se na dvije obitelji fontova (ponekad tri): jednu za naslove, jednu za tekst, i najviše treću za naglaske poput gumba ili oznaka. Više od toga i stranica počinje djelovati neplanirano.
  • Razmislite o dojmu, ne samo o obliku: zaobljen, prijateljski sans font spojen s formalnim serifnim fontom šalje pomiješane signale čak i ako oblici slova tehnički funkcioniraju zajedno — birajte fontove koji se slažu i po tonu, ne samo po strukturi.
  • Testirajte u stvarnim veličinama: kombinacija koja izvrsno izgleda u velikom prikazu može izgubiti kontrast u veličini teksta, ili display font može postati nečitljiv u malim veličinama — uvijek provjerite obje krajnosti.

Odabir kombinacije prema namjeni

Landing stranice i marketinške stranice obično imaju koristi od filtera "Izražajno" ili "Moderno" — snažan, visoko kontrastan font za naslov privlači pažnju iznad pregiba stranice, u kombinaciji s čistim, neutralnim fontom za tekst koji dulje sadržaje čini lako čitljivima.

Blogovi i uređivački sadržaji najbolje se čitaju uz kombinacije "Elegantno" ili "Klasično" — profinjen serifni naslov signalizira promišljen, uređen ton, dok udoban serifni ili sans-serif font za tekst omogućuje čitanje dugih članaka bez zamora.

E-trgovina i stranice proizvoda obično daju prednost "Minimalističkim" kombinacijama — suzdržani, neutralni fontovi zadržavaju fokus na fotografijama proizvoda i cijenama, a ne na samoj tipografiji, što je važno kad se na jednoj stranici pojavljuju desetci kartica proizvoda.

Portfoliji i kreativne stranice imaju najviše prostora za eksperimentiranje — kombinacije "Izražajno" ili "Elegantno" s više karaktera mogu dobro funkcionirati jer je publika djelomično tu i da procijeni vizualni ukus.

Napomene o performansama i licenciranju

Embed `<link>` oznaka učitava fontove s Googleovog CDN-a, koji je brz i predmemoriran na mnogim stranicama koje su vaši posjetitelji vjerojatno već posjetili — no ipak dodaje vanjski zahtjev. Za stranice kojima je svaka milisekunda važna, preuzimanje datoteka fonta i njihovo samostalno hostiranje (uz ručno postavljen `font-display: swap`) uklanja tu vanjsku ovisnost, uz određeni dodatni trud pri postavljanju.

Svi fontovi na Google Fontsu otvorenog su koda i besplatni za komercijalnu upotrebu bez obveze navođenja autora, iako je spominjanje dizajnera pisma lijep gest kad god je to jednostavno izvedivo.

Često postavljana pitanja

Po čemu se prepoznaje da se dva fonta "dobro slažu"?

Dobre kombinacije balansiraju kontrast i sklad. Kontrast — spajanje serifnog i sans-serif fonta, ili izražajnog display fonta s jednostavnim fontom za tekst — stvara vizualnu hijerarhiju zbog koje se naslovi i tekst jasno razlikuju. Sklad — slična x-visina, usporediva debljina poteza i zajednički dojam formalnosti ili opuštenosti — sprječava da se dva fonta sudare. Kombinacije ovdje odabrane su vodeći računa o oboje.

Trebaju li naslovi i tekst uvijek koristiti različite fontove?

Ne, korištenje jedne obitelji fonta za oboje (poput kombinacije "Rubik + Rubik" u ovom alatu) također dobro funkcionira, sve dok font ima dovoljno varijacija debljine da se naslovi razlikuju od teksta. To je valjan, minimalistički izbor, a ne pogreška.

Kako zapravo primijeniti kombinaciju na svoju stranicu?

Kopirajte `<link>` embed oznaku u `<head>` svoje stranice kako biste učitali fontove s Googleovog CDN-a, a zatim kopirajte CSS isječak u svoju stylesheet datoteku — on postavlja `font-family` za naslove (h1, h2, h3) i za tekst (body, p). Prilagodite CSS selektore ako se vaš markup razlikuje.

Hoće li učitavanje Google fontova usporiti moju stranicu?

Svaka dodatna datoteka fonta znači dodatni mrežni zahtjev i određeni rizik od blokiranja renderiranja. Ograničite se na jednu debljinu fonta za naslove i jednu ili dvije za tekst, koristite `display=swap` (već uključen u embed kodu) kako bi se tekst prikazao pričuvnim fontom dok se webfont učitava, te razmislite o samostalnom hostiranju datoteka fonta za produkcijske stranice kojima je potrebno najbrže moguće učitavanje.

Mogu li se ovi fontovi besplatno koristiti u komercijalne svrhe?

Da. Svaki font na Google Fontsu, uključujući sve kombinacije prikazane ovdje, licenciran je pod SIL Open Font License ili Apache License — obje licence dopuštaju besplatnu komercijalnu upotrebu, izmjenu i redistribuciju bez naknada.

Povezani alati

Generator Open Graph meta oznaka

Kreirajte Open Graph i Twitter Card meta oznake uz pregled dijeljenja uživo.

Birač boje

Odaberite bilo koju boju vizualno ili je uzorkujte s učitane slike, uz HEX, RGB i HSL izlaz i gumbe za kopiranje.

CSS Minifikator

Smanjite CSS za produkciju ili ga uljepšajte radi čitljivosti — bez uploada, prikazuje se ušteda veličine.