Google Fonts -fonttiparit: 25 toimivaa yhdistelmää

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 kertoo, miksi kontrasti voittaa samankaltaisuuden, ja antiikva vai groteski selittää fonttilajien ominaisuudet.

Toimitukselliset parit: antiikvaotsikko ja groteski leipätekstissä

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

Modernit groteskiparit tekniikkaan ja tuotteisiin

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

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.

Ystävälliset ja pyöristetyt parit

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 ja otsikkofontit kertovat lisää.

Tekniset ja ylelliset parit

Virheet, jotka rikkovat fonttiparin

Lisää Google Fonts -fonttipari sivullesi

1. 1

   Valitse leikkaukset

   Yleensä yksi otsikkoleikkaus ja kaksi leipätekstileikkausta. Jokainen lisäleikkaus on uusi ladattava tiedosto.

2. 2

   Kopioi upotus

   Valitse fonttiperheet Google Fontsissa ja kopioi saatu linkki tai muokkaa alla olevaa koodia.

3. 3

   Aseta tehtävät CSS:ssä

   Anna otsikolle ja leipätekstille omat fonttiperhemuuttujat, jotta myöhempi vaihto onnistuu yhdellä rivillä.

4. 4

   Testaa oikealla tekstillä

   Tarkista pitkä kappale, kaksirivinen otsikko ja pisin tuotenimesi ennen päätöstä.

<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>

Google Fonts on maksuton kaupalliseen käyttöön, mutta lue fonttilisensointi ennen muokkausta tai fontin myyntiä tuotteen osana. Tee valinnasta koko brändin kattava typografiajärjestelmä, 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, ja Designer käyttää niitä suunnitelman sommittelussa.