# Google Fonts -fonttiparit: 25 toimivaa yhdistelmää

[Canonical HTML page](https://gradiently.design/fi/guide/google-fonts-pairings)

Kaikki parit ovat maksuttomia Google Fontsissa ja valittu toimimaan oikeissa otsikoissa ja leipätekstissä. Löydä haluamasi tunnelma ja yhdistelmän toimivat leikkaukset.

## The short version

- Hyvä Google Fonts -fonttipari antaa otsikolle ja leipätekstille eri tehtävät, yleensä yhdistämällä näyttävän otsikkofontin tai antiikvan yksinkertaiseen groteskiin.
- Samaan laajaan fonttiperheeseen kuuluvat parit, kuten DM Serif Display ja DM Sans tai IBM Plex Sans ja IBM Plex Mono, ovat turvallisin lähtökohta.
- Leipäteksti tarvitsee avoimet kirjainmuodot ja suuren x-korkeuden normaalileikkauksessa 400; otsikot voivat olla persoonallisempia.
- Google Fontsin avoimet lisenssit sallivat kaupallisen käytön myös logoissa, tuotteissa ja asiakastöissä.
- Lataa vain tarvitsemasi leikkaukset ja lisää display=swap, jotta sivut pysyvät nopeina.

Parhaat **Google Fonts -fonttiparit** yhdistävät luonteikkaan otsikkofontin rauhalliseen, luettavaan leipätekstifonttiin: Fraunces ja Inter, Playfair Display ja Source Sans 3, Space Grotesk ja Inter tai DM Serif Display ja DM Sans. Alla on 25 yhdistelmää tunnelman mukaan ryhmiteltyinä, toimivat leikkaukset ja käyttökohteet. Kaikki ovat maksuttomia, sallivat kaupallisen käytön ja latautuvat yhdellä koodirivillä. Valitse ensin tunnelmaryhmä ja sitten tehtävään sopiva pari.

## Näin luet fonttipareja

Jokaisessa parissa otsikkofontti tulee ensin, leipätekstifontti toisena. Otsikkoleikkaus sopii suuriin kokoihin; leipäteksti käyttää 400:aa ja korostuksissa 600:aa tai 700:aa. [Fonttien yhdistäminen](https://gradiently.design/fi/guide/font-pairing) kertoo, miksi kontrasti voittaa samankaltaisuuden, ja [antiikva vai groteski](https://gradiently.design/fi/guide/serif-vs-sans-serif) selittää fonttilajien ominaisuudet.

Toimituksellinen pystyjulkaisu, suuri näyttävä otsikko ja pienempi rauhallinen lisäteksti

Fonttipari antaa sivulle kaksi ääntä. Otsikko houkuttelee, leipäteksti selittää. Niiden ei tulisi kilpailla.

## Toimitukselliset parit: antiikvaotsikko ja groteski leipätekstissä

Klassinen rakenne. Antiikvaotsikko tuo lämpöä ja arvovaltaa, groteski pitää pitkän tekstin helppolukuisena näytöllä.

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 1 | Playfair Display 700 | Source Sans 3 400 | Lehdet, ravintolat, häät |
| 2 | Fraunces 600 | Inter 400 | Ruoka, käsityöbrändit, uutiskirjeet |
| 3 | DM Serif Display 400 | DM Sans 400 | Toimistot, portfoliot, laskeutumissivut |
| 4 | Instrument Serif 400 | Instrument Sans 400 | Moderni toimituksellinen ilme, studiot, muoti |
| 5 | Cormorant Garamond 600 | Work Sans 400 | Kauneus, sisustus, boutique-hotellit |
| 6 | Libre Baskerville 700 | Libre Franklin 400 | Kustannustoiminta, juridiikka, harkitut pitkät tekstit |

Frauncesissa on optisen koon akseli: suurissa koissa yksityiskohdat terävöityvät. Cormorant Garamond on näytöllä herkkä, joten rajaa se otsikoihin.

## Modernit groteskiparit tekniikkaan ja tuotteisiin

Ohjelmistoihin, kasvuyrityksiin ja kaikkeen ajankohtaiselta tuntuvaan. Otsikon luonne syntyy muodosta, leveydestä tai erikoisista yksityiskohdista; leipäteksti hoitaa arkityön.

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 7 | Space Grotesk 700 | Inter 400 | Kehittäjätyökalut, finanssiteknologia, hallintanäkymät |
| 8 | Syne 700 | Manrope 400 | Luovat studiot, tapahtumat, musiikki |
| 9 | Sora 600 | Figtree 400 | Sovellukset, SaaS-sivustot, käyttöönotto |
| 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristiset brändit, pelit, lanseeraukset |
| 11 | Archivo Black 400 | Archivo 400 | Vahvat tuotesivut, urheilu, vähittäiskauppa |

Unbounded ja Syne ovat leveitä ja äänekkäitä: pidä otsikot lyhyinä. Archivo sopii itsensä pariksi, koska black-leikkaus poikkeaa täysin normaalista.

## Groteskiotsikot ja antiikva leipätekstissä

Käänteinen rakenne sopii pitkään lukemiseen: selkeä groteskiotsikko osoittaa osiot, antiikvaleipäteksti tuntuu kirjalliselta ja hidastaa katsetta miellyttävästi.

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 12 | Poppins 600 | Lora 400 | Blogit, valmennus, henkilökohtaiset sivut |
| 13 | Montserrat 700 | Merriweather 400 | Oppaat, järjestöt, raportit |
| 14 | Bricolage Grotesque 700 | Newsreader 400 | Esseet, riippumaton media |
| 15 | Outfit 600 | Source Serif 4 400 | Dokumentaatio, kurssimateriaali |

## Ystävälliset ja pyöristetyt parit

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 16 | Fredoka 600 | Nunito 400 | Lasten brändit, lelut, perhekahvilat |
| 17 | Quicksand 700 | Mulish 400 | Hyvinvointi, lemmikit, lempeät palvelut |
| 18 | Rubik 600 | Karla 400 | Yhteisösovellukset, paikallispalvelut, hyväntekeväisyys |

Pyöristetyt fontit tuntuvat lähestyttäviltä mutta pehmeiltä. Quicksand näyttää kevyeltä alle 600:ssa; käytä vahvempia leikkauksia kaikkeen helposti luettavaan.

## Vahvat otsikkoparit julisteisiin ja someen

Kapeat ja raskaat otsikkofontit mahduttavat suuret sanat pieneen kuvaan, joten ne hallitsevat pikkukuvia ja julisteita. Ne tarvitsevat rauhallisen parin. [Pikkukuvan teksti](https://gradiently.design/fi/guide/typography-for-thumbnails) ja [otsikkofontit](https://gradiently.design/fi/guide/headline-fonts) kertovat lisää.

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 19 | Anton 400 | Roboto 400 | Pikkukuvat, urheilu, uutismaiset julkaisut |
| 20 | Bebas Neue 400 | Montserrat 400 | Kuntosalit, tapahtumat, vahvat menut |
| 21 | Oswald 600 | Lato 400 | Julisteet, kampanjat, alennusmyynnit |
| 22 | Abril Fatface 400 | Poppins 400 | Muotijulkaisut, juomat, yöelämä |

## Tekniset ja ylelliset parit

| # | Otsikko | Leipäteksti | Käyttökohde |
| --- | --- | --- | --- |
| 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Kehittäjädokumentaatio, data, tutkimus |
| 24 | Space Grotesk 500 | Space Mono 400 | Itsenäiset ohjelmistot, pienlehdet, portfoliot |
| 25 | Bodoni Moda 500 | Jost 400 | Korut, hajuvedet, laadukas vähittäiskauppa |

Parissa 24 tasalevyinen fontti on leipätekstinä: se toimii lyhyissä huomioissa ja nimikkeissä, ei esseissä. Bodoni Modan hiusviivat toimivat suurina, yli noin 32 px koossa.

## Virheet, jotka rikkovat fonttiparin

### Vältä

- Kahta samankaltaista groteskia, jotka näyttävät virheeltä
- Kahta huomiosta taistelevaa otsikkofonttia
- Hiusviiva-antiikvaa leipätekstinä näytöllä
- Molempien perheiden kaikkien leikkausten lataamista
- Kolmatta fonttia yhteen erityisotsikkoon

### Tee näin

- Selkeä rakenne-, vahvuus- tai leveyskontrasti
- Yksi äänekäs fontti ja yksi hiljainen
- Leipäteksti 400:lla ja suurella x-korkeudella
- Vain käyttämäsi kaksi tai neljä leikkausta
- Käytä sen sijaan omien kahden fonttisi vahvuutta tai kokoa

## Lisää Google Fonts -fonttipari sivullesi

1. **Valitse leikkaukset** Yleensä yksi otsikkoleikkaus ja kaksi leipätekstileikkausta. Jokainen lisäleikkaus on uusi ladattava tiedosto.
2. **Kopioi upotus** Valitse fonttiperheet Google Fontsissa ja kopioi saatu linkki tai muokkaa alla olevaa koodia.
3. **Aseta tehtävät CSS:ssä** Anna otsikolle ja leipätekstille omat fonttiperhemuuttujat, jotta myöhempi vaihto onnistuu yhdellä rivillä.
4. **Testaa oikealla tekstillä** Tarkista pitkä kappale, kaksirivinen otsikko ja pisin tuotenimesi ennen päätöstä.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>
```

Pari 2, Fraunces ja Inter, vain kolme leikkausta ladattuina. Vaihda perhenimet mihin tahansa yllä olevaan pariin.

Google Fonts on maksuton kaupalliseen käyttöön, mutta lue [fonttilisensointi](https://gradiently.design/fi/guide/font-licensing) ennen muokkausta tai fontin myyntiä tuotteen osana. Tee valinnasta koko brändin kattava [typografiajärjestelmä](https://gradiently.design/fi/guide/brand-typography-system), jossa tehtävät on nimetty.

Somejulkaisuihin ja esityksiin aseta pari kerran Gradientlyn Prohon kuuluvaan brändipakettiin. Se sisältää otsikko- ja leipätekstifontin, hyväksyy [ladatut fonttitiedostot](https://gradiently.design/fi/guide/custom-fonts-upload), ja Designer käyttää niitä suunnitelman sommittelussa.

## FAQ

### Mitkä ovat parhaat Google Fonts -fonttiparit?

Luotettavia lähtökohtia ovat Fraunces ja Inter, Playfair Display ja Source Sans 3, DM Serif Display ja DM Sans sekä Space Grotesk ja Inter.

### Mikä fontti sopii Montserratin kanssa?

Merriweather leipätekstinä tuottaa klassisen groteskin ja antiikvan kontrastin. Bebas Neue toimii Montserratin yläpuolella vahvana julisteotsikkona.

### Mikä sopii Playfair Displayn pariksi?

Yksinkertainen, avoin groteski leipätekstiin, kuten Source Sans 3, Lato tai Inter. Vältä toista voimakkaan viivakontrastin antiikvaa.

### Saako Google Fontsia käyttää kaupallisesti maksutta?

Kyllä. Google Fontsin avoimet lisenssit, pääosin SIL Open Font License, sallivat kaupallisen käytön logoissa, verkkosivuilla, painotuotteissa ja asiakastöissä. Lue fontin sivun lisenssi, jos aiot muokata tai jakaa tiedostoja.

### Montako fonttia verkkosivulle tarvitaan?

Kaksi riittää useimpiin sivustoihin: yksi otsikkoon ja toinen leipätekstiin, vain tarvittavissa leikkauksissa.