CodeKitHub
Suomi
Koodityökalut

Google Fonts -parinhaku

Viimeksi päivitetty:

Kahden yhteensopivan fontin löytäminen on vaikeampaa kuin miltä se kuulostaa — liian samankaltaiset fontit tekevät sivusta tylsän, liian erilaiset taas sekavan. Tämä työkalu säästää sinut kokeilulta ja erehdykseltä tarjoamalla 28 valikoitua otsikko- ja leipätekstiparia, jotka näytetään suoraan selaimessa, jotta näet oikean kontrastin ennen valintaa. Suodata tunnelman mukaan ja kopioi Google Fontsin upotuslinkki sekä CSS:n font-family-säännöt suoraan projektiisi.

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

Mikä tämä työkalu on?

Fonttiparinnalla tarkoitetaan kahden (joskus kolmen) kirjasintyypin valitsemista käytettäväksi yhdessä sivulla — tyypillisesti yksi otsikoihin ja toinen leipätekstiin — jotta sivulla on visuaalista hierarkiaa ilman, että se näyttää sekavalta tai yksitoikkoiselta.

Jokainen alla oleva pari näyttää live-renderöidyn esimerkin: otsikkofontti ylhäällä, leipätekstifontti alla, käyttäen oikeita Google Fonts -tiedostoja, joten näet täsmälleen sen, mitä saat sivustollesi.

Jokaisen parin mukana tulee valmis Google Fontsin `<link>`-upotustagi sekä vastaava CSS-koodinpätkä, jossa on `font-family`-määritykset otsikoille ja leipätekstille — kopioi molemmat, ja homma on valmis.

Miksi käyttää sitä?

  • 28 käsin valittua paria — ei automaattisesti generoitua listaa. Jokainen on valittu, koska kirjasimet todella täydentävät toisiaan.
  • Live-esikatselu: jokainen pari renderöidään oikeilla Google Fontsista ladatuilla fonteilla, ei staattisella kuvalla tai fontin nimen arvauksella.
  • Suodata tunnelman mukaan — Moderni, Elegantti, Rohkea, Minimalistinen, Klassinen — löytääksesi projektiisi sopivan tyylin.
  • Yhden klikkauksen kopiointi sekä `<link>`-upotustagille että CSS:n `font-family`-säännöille.
  • Ilmainen, toimii selaimessasi, ei vaadi tiliä tai kirjautumista.

Käyttöohje

  1. Napsauta halutessasi tunnelmasuodatinta (Moderni, Elegantti, Rohkea, Minimalistinen, Klassinen) rajataksesi listaa, tai jätä "Kaikki" valituksi selataksesi koko valikoimaa.
  2. Selaa live-esikatselukortteja — ylärivi näyttää otsikkofontin, alempi rivi leipätekstifontin.
  3. Avaa haluamasi pari ja napsauta laajentaaksesi upotuskoodiosion.
  4. Kopioi `<link>`-tagi HTML:n `<head>`-osioon ja CSS-koodinpätkä tyylitiedostoosi käyttääksesi fontteja otsikoissa ja leipätekstissä.

Esimerkki

Syöte

Elegantti blogi

Tuloste

Playfair Display (otsikot) + Source Sans Pro (leipäteksti)

Suodattamalla "Elegantti" saat esiin korkeakontrastisia serif-otsikoita yhdistettynä selkeään, hyvin luettavaan groteski-leipätekstiin — yleinen yhdistelmä toimituksellisissa ja blogisivustoissa.

Hyvän fonttiparinnan periaatteet

  • Kontrasti samankaltaisuuden sijaan: kaksi lähes identtisen näköistä fonttia (esimerkiksi kaksi samankaltaista geometrista groteskia) näyttävät helposti virheeltä eivätkä tietoiselta valinnalta. Yhdistä serif groteskiin, tai raskas otsikkofontti kevyempään leipätekstifonttiin, jotta ero näyttää tarkoitukselliselta.
  • Sovita x-korkeus ja mittasuhteet: fontit, joiden pienaakkoset asettuvat samankaltaiselle visuaaliselle korkeudelle, tuntuvat kuuluvan samalle sivulle, vaikka niiden tyylit eroaisivatkin — epäsopivat x-korkeudet ovat yksi yleisimmistä syistä, miksi pari tuntuu "väärältä".
  • Rajoitu kahteen fonttiperheeseen (joskus kolmeen): yksi otsikoihin, yksi leipätekstiin ja korkeintaan kolmas korostuksiin, kuten painikkeisiin tai etiketteihin. Tätä enempää käytettynä sivu alkaa näyttää suunnittelemattomalta.
  • Ota huomioon tunnelma, ei pelkkä muoto: pyöreä, ystävällinen groteski yhdistettynä muodolliseen serifiin lähettää ristiriitaisia signaaleja, vaikka kirjainmuodot toimisivatkin teknisesti yhdessä — valitse fontit, jotka sopivat yhteen sekä sävyltään että rakenteeltaan.
  • Testaa oikeissa koissa: pari, joka näyttää hienolta suuressa esikatselussa, voi menettää kontrastinsa leipätekstin koossa, tai otsikkofontti voi muuttua lukukelvottomaksi pienessä koossa — tarkista aina molemmat ääripäät.

Parin valitseminen käyttötarkoituksen mukaan

Laskeutumissivut ja markkinointisivustot hyötyvät yleensä "Rohkea"- tai "Moderni"-suodattimista — vahva, korkeakontrastinen otsikkofontti kiinnittää huomion heti sivun yläosassa, yhdistettynä selkeään, neutraaliin leipätekstifonttiin, joka pitää pidemmätkin tekstit helposti silmäiltävinä.

Blogit ja toimituksellinen sisältö toimivat usein parhaiten "Elegantti"- tai "Klassinen"-parien kanssa — hienostunut serif-otsikko viestii harkittua, toimitettua ääntä, kun taas miellyttävä serif- tai groteskileipäteksti pitää pitkät artikkelit luettavina pidemmänkin lukemisen ajan.

Verkkokaupat ja tuotesivustot suosivat usein "Minimalistinen"-pareja — hillityt, neutraalit fontit pitävät huomion tuotekuvissa ja hinnoissa itse typografian sijaan, mikä on tärkeää, kun sivulla näkyy kymmeniä tuotekortteja.

Portfolioilla ja luovilla sivustoilla on eniten tilaa kokeilla — persoonallisemmat "Rohkea"- tai "Elegantti"-parit toimivat hyvin, sillä yleisö on osittain arvioimassa myös visuaalista makua.

Huomioita suorituskyvystä ja lisensoinnista

Upotus-`<link>`-tagi lataa fontit Googlen CDN:stä, joka on nopea ja välimuistissa monilla sivustoilla, joilla kävijäsi ovat todennäköisesti jo käyneet — mutta se lisää yhden ulkoisen pyynnön. Sivustoille, joilla jokainen millisekunti merkitsee, fonttitiedostojen lataaminen ja itse isännöiminen (asettamalla `font-display: swap` manuaalisesti) poistaa tämän ulkoisen riippuvuuden, mutta vaatii hieman enemmän työtä.

Kaikki Google Fontsin fontit ovat avoimen lähdekoodin fontteja ja ilmaisia kaupalliseen käyttöön ilman mainintapakkoa, vaikka fontin suunnittelijan mainitseminen on kohtelias ele silloin, kun se on helppo tehdä.

Usein kysytyt kysymykset

Mikä tekee kahdesta fontista hyvän parin?

Hyvä parinnus tasapainottaa kontrastia ja harmoniaa. Kontrasti — serif-fontin yhdistäminen groteskiin, tai rohkean otsikkofontin yhdistäminen vaatimattomaan leipätekstiin — luo visuaalisen hierarkian, jolloin otsikot ja leipäteksti erottuvat selvästi toisistaan. Harmonia — samankaltainen x-korkeus, verrattavissa oleva viivanpaksuus ja jaettu muodollisuuden tai leikkisyyden taso — estää fontteja riitelemästä keskenään. Tässä esitellyt parit on valikoitu molemmat tekijät huomioiden.

Pitääkö otsikoissa ja leipätekstissä aina käyttää eri fontteja?

Ei, saman fonttiperheen käyttäminen molemmissa (kuten tämän työkalun "Rubik + Rubik" -pari) toimii myös hyvin, kunhan fontissa on tarpeeksi painovariaatiota erottamaan otsikot leipätekstistä. Se on täysin pätevä, minimalistinen valinta — ei virhe.

Miten sovellan parin käytännössä sivustolleni?

Kopioi `<link>`-upotustagi sivusi `<head>`-osioon ladataksesi fontit Googlen CDN:stä, ja kopioi sitten CSS-koodinpätkä tyylitiedostoosi — se asettaa `font-family`-arvon otsikoille (h1, h2, h3) ja leipätekstille (body, p). Muokkaa CSS-valitsimia, jos merkintäsi poikkeaa tästä.

Hidastaako Google Fontsin lataaminen sivustoani?

Jokainen lisäfonttitiedosto tuo mukanaan verkkopyynnön ja jonkin verran renderöintiä hidastavaa riskiä. Pidä käytössä yksi otsikkopaino ja yksi tai kaksi leipätekstin painoa, käytä `display=swap`-määritystä (sisältyy jo upotuskoodiin), jotta teksti näkyy varafontilla webfontin latautuessa, ja harkitse fonttitiedostojen itse isännöimistä tuotantosivustoilla, joilla nopein mahdollinen latausaika on tärkeää.

Saako näitä fontteja käyttää kaupallisesti ilmaiseksi?

Kyllä. Jokainen Google Fontsin fontti, mukaan lukien kaikki tässä esitellyt parit, on lisensoitu SIL Open Font Licensen tai Apache-lisenssin alla — molemmat sallivat maksuttoman kaupallisen käytön, muokkaamisen ja jakelun ilman rojalteja.

Liittyvät työkalut

Open Graph -metatagien generaattori

Luo Open Graph- ja Twitter Card -metatagit reaaliaikaisella jakokortin esikatselulla.

Värivalitsin

Poimi mikä tahansa väri visuaalisesti tai ladatusta kuvasta, HEX-, RGB- ja HSL-tulosteella sekä kopiointipainikkeilla.

CSS-minifioija

Pienennä CSS tuotantoon tai kaunista se luettavuuden vuoksi — ei latausta, näyttää säästetyn koon.