CodeKitHub
Eesti
Koodi tööriistad

Google Fonts Pairing Finder

Viimati uuendatud:

Kahe omavahel tegelikult sobiva kirjatüübi valimine on keerulisem, kui tundub — kui need on liiga sarnased, tundub lehekülg lame, kui liiga erinevad, tundub see kaootiline. See tööriist säästab sind katsetamisest ja eksimisest, pakkudes 28 kureeritud pealkirja- ja põhiteksti-kombinatsiooni, mis kõik on esitatud otseülevaates, et näeksid tegelikku kontrasti enne otsuse langetamist. Filtreeri meeleolu järgi ja kopeeri seejärel Google Fonts manustamislink ning CSS font-family reeglid otse oma projekti.

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

Mis see tööriist on?

Kirjatüüpide paaritamine tähendab kahe (mõnikord kolme) kirjatüübi valimist, mida kasutatakse leheküljel koos — tavaliselt üht pealkirjade ja teist põhiteksti jaoks —, et leheküljel oleks visuaalne hierarhia ilma, et see tunduks sobimatu või ühetooniline.

Iga allolev kombinatsioon näitab otse renderdatud näidist: pealkirja kirjatüüp ülal, põhiteksti kirjatüüp all, kasutades tegelikke Google Fonts faile, nii et see, mida sa näed, on täpselt see, mida sa oma saidil saad.

Iga kombinatsiooniga kaasneb kasutusvalmis Google Fonts `<link>` manustamissilt ning sobiv CSS-koodijupp `font-family` deklaratsioonidega pealkirjadele ja põhitekstile — kopeeri mõlemad ja oledki valmis.

Miks seda kasutada?

  • 28 käsitsi valitud kombinatsiooni, mitte automaatselt genereeritud loend — igaüks neist on valitud seetõttu, et need kaks kirjatüüpi tõeliselt täiendavad üksteist.
  • Otseülevaade: iga kombinatsioon renderdatakse Google Fontsist laaditud tegelike kirjatüüpidega, mitte staatilise pildi või kirjatüübi nime järgi aimatuna.
  • Filtreeri meeleolu järgi — Moodne, Elegantne, Julge, Minimalistlik, Klassikaline — et kitsendada valikut oma projektile sobiva tunnetuseni.
  • Ühe klõpsuga kopeerimine nii `<link>` manustamissildi kui ka CSS `font-family` reeglite jaoks.
  • Tasuta, töötab sinu brauseris, ei nõua kontot ega sisselogimist.

Kuidas kasutada

  1. Soovi korral klõpsa meeleolufiltril (Moodne, Elegantne, Julge, Minimalistlik, Klassikaline), et loendit kitsendada, või jäta valituks "Kõik", et sirvida kõiki kombinatsioone.
  2. Vaata läbi otseülevaate kaardid — ülemine rida näitab pealkirja kirjatüüpi, alumine rida põhiteksti kirjatüüpi.
  3. Ava meeldiv kombinatsioon ja klõpsa, et avada manustamiskoodi jaotis.
  4. Kopeeri `<link>` silt oma HTML-i `<head>` sektsiooni ja CSS-koodijupp oma stiililehele, et rakendada kirjatüübid pealkirjadele ja põhitekstile.

Näide

Sisend

Elegantne blogi

Tulemus

Playfair Display (pealkirjad) + Source Sans Pro (põhitekst)

Filtreerimine "Elegantne" järgi toob esile kõrge kontrastiga serif-pealkirjad koos puhta, hõlpsasti loetava sans-serif põhitekstiga — levinud kombinatsioon toimetatud sisu ja blogide jaoks.

Hea kirjatüübipaaritamise põhimõtted

  • Kontrast on parem kui sarnasus: kaks peaaegu identsena näivat kirjatüüpi (näiteks kaks sarnast geomeetrilist sans-serif-kirja) mõjuvad tavaliselt pigem eksimuse kui teadliku valikuna. Paarita serif-kiri sans-serif-kirjaga või raske kuvakiri kergema tekstikirjaga, et erinevus mõjuks tahtlikuna.
  • Sobita x-kõrgus ja proportsioonid: kirjatüübid, mille väiketähed asuvad sarnasel visuaalsel kõrgusel, kalduvad tunduma, nagu kuuluksid nad samale leheküljele, isegi kui nende stiilid erinevad — sobimatu x-kõrgus on üks levinumaid põhjuseid, miks kombinatsioon tundub "valesti".
  • Piirdu kahe perekonnaga (mõnikord kolmega): üks pealkirjadele, üks põhitekstile ja maksimaalselt kolmas rõhuasetuseks, näiteks nuppudele või siltidele. Rohkem sellest ja lehekülg hakkab tunduma läbimõtlemata.
  • Arvesta meeleoluga, mitte ainult kujuga: ümar, sõbralik sans-kiri koos ametliku serif-kirjaga saadab vastuolulisi signaale, isegi kui tähekujud tehniliselt sobivad kokku — vali kirjatüübid, mis ühtivad nii toonilt kui ka struktuurilt.
  • Testi tegelikes suurustes: kombinatsioon, mis näeb suures ülevaates suurepärane välja, võib põhitekstisuuruses kontrasti kaotada, või kuvakiri võib väikestes suurustes muutuda loetamatuks — kontrolli alati mõlemaid äärmusi.

Kombinatsiooni valimine kasutusjuhu järgi

Sihtlehed ja turunduslehed saavad tavaliselt kasu filtritest "Julge" või "Moodne" — tugev, kõrge kontrastiga pealkirjakiri köidab tähelepanu lehekülje ülaosas, koos puhta, neutraalse põhitekstikirjaga, mis hoiab pika teksti kergesti sirvitavana.

Blogid ja toimetatud sisu on sageli kõige loetavamad kombinatsioonidega "Elegantne" või "Klassikaline" — peen serif-pealkiri viitab läbimõeldud, viimistletud häälele, samal ajal kui mugav serif- või sans-serif-põhitekst hoiab pikad artiklid loetavana ka pikema lugemise vältel.

E-kaubandus- ja tootesaidid eelistavad tavaliselt "Minimalistlikke" kombinatsioone — tagasihoidlikud, neutraalsed kirjatüübid hoiavad tähelepanu tootefotol ja hindadel, mitte tüpograafial endal, mis on oluline, kui ühel leheküljel kuvatakse kümneid tootekaarte.

Portfooliod ja loomingulised saidid pakuvad kõige rohkem ruumi katsetamiseks — rohkema iseloomuga "Julge" või "Elegantne" kombinatsioonid võivad hästi toimida, kuna publik on seal osaliselt selleks, et hinnata visuaalset maitset.

Märkused jõudluse ja litsentsimise kohta

Manustamissilt `<link>` laadib kirjatüübid Google'i CDN-ist, mis on kiire ning vahemällu salvestatud paljudel saitidel, mida sinu külastajad on tõenäoliselt juba varem külastanud — kuid see lisab välise päringu. Saitide puhul, kus iga millisekund loeb, eemaldab kirjatüübifailide allalaadimine ja iseseisev majutamine (koos käsitsi seadistatud `font-display: swap` valikuga) selle välise sõltuvuse mõningase lisatöö hinnaga.

Kõik Google Fontsi kirjatüübid on avatud lähtekoodiga ja tasuta äriliseks kasutuseks ilma autorile viitamise nõudeta, ehkki kirjatüübi disaineri mainimine on viisakas žest seal, kus see on lihtsalt teostatav.

Korduma kippuvad küsimused

Mis muudab kaks kirjatüüpi "hästi sobivaks"?

Head kombinatsioonid tasakaalustavad kontrasti ja harmooniat. Kontrast — näiteks serif-kirja paaritamine sans-serif-kirjaga või jämeda kuvakirja paaritamine tavalise põhitekstikirjaga — loob visuaalse hierarhia, mistõttu pealkirjad ja põhitekst tunduvad selgelt eristuvat. Harmoonia — sarnane x-kõrgus, võrreldav joonepaksus ning ühine formaalsuse või mängulisuse tunnetus — hoiab need kaks kirjatüüpi omavahel kokku sobimas. Siinsed kombinatsioonid on kureeritud mõlemat silmas pidades.

Kas pealkirjad ja põhitekst peavad alati kasutama erinevaid kirjatüüpe?

Ei, ühe kirjaperekonna kasutamine mõlemas (nagu selle tööriista "Rubik + Rubik" kombinatsioon) toimib samuti hästi, kui kirjatüübil on piisavalt kaaluvariante, et eristada pealkirju põhitekstist. See on kehtiv, minimalistlik valik — mitte viga.

Kuidas ma kombinatsiooni oma saidil tegelikult rakendan?

Kopeeri `<link>` manustamissilt oma lehe `<head>` sektsiooni, et laadida kirjatüübid Google'i CDN-ist, seejärel kopeeri CSS-koodijupp oma stiililehele — see määrab `font-family` pealkirjadele (h1, h2, h3) ja põhitekstile (body, p). Kohanda CSS-valijaid, kui sinu markup on teistsugune.

Kas Google Fontsi laadimine aeglustab mu saiti?

Iga täiendav kirjatüübifail lisab võrgupäringu ja teatava renderdusblokeeringu riski. Piirdu ühe kaaluga pealkirjade jaoks ning ühe või kahega põhiteksti jaoks, kasuta `display=swap` (juba manustamiskoodis olemas), et tekst kuvatakse taandekirjatüübiga, kuni veebikirjatüüp laadib, ning kaalu tootmissaitide puhul, kus kiireim võimalik laadimine on oluline, kirjatüübifailide iselaadimist.

Kas neid kirjatüüpe tohib äriliselt tasuta kasutada?

Jah. Iga Google Fontsi kirjatüüp, sealhulgas kõik siin näidatud kombinatsioonid, on litsentseeritud SIL Open Font License'i või Apache litsentsi alusel — mõlemad lubavad tasuta ärilist kasutust, muutmist ja edasilevitamist ilma litsentsitasudeta.

Seotud tööriistad

Open Graph metasiltide generaator

Loo Open Graph ja Twitter Card metasildid koos jagamiskaardi otseeelvaatega.

Värvivalija

Vali suvaline värv visuaalselt või proovi seda üleslaaditud pildilt, koos HEX, RGB ja HSL väljundi ja kopeerimisnuppudega.

CSS minifitseerija

Vähenda CSS-i tootmise jaoks või kauneta see loetavuse jaoks — üleslaadimist pole, näidatakse suuruse kokkuhoidu.