CodeKitHubHva er dette verktøyet?
Skriftparing betyr å velge to (av og til tre) skrifttyper som skal brukes sammen på en side — vanligvis én for overskrifter og én for brødtekst — slik at siden får visuelt hierarki uten å virke usammenhengende eller monoton.
Hvert par nedenfor viser et live-rendret eksempel: overskriftsskriften øverst, brødtekstskriften under, med de faktiske Google Fonts-filene, slik at det du ser er det du får på nettstedet ditt.
Hvert par leveres med en klar-til-bruk Google Fonts `<link>`-innbyggingstag og et tilhørende CSS-utdrag med `font-family`-deklarasjoner for overskrifter og brødtekst — kopier begge, så er du ferdig.
Hvorfor bruke det?
- 28 håndplukkede par, ikke en automatisk generert liste — hvert par er valgt fordi de to skrifttypene virkelig utfyller hverandre.
- Live forhåndsvisning: hvert par vises med de faktiske skriftene lastet fra Google Fonts, ikke et statisk bilde eller en gjetning på skriftnavnet.
- Filtrer etter stemning — Moderne, Elegant, Dristig, Minimalistisk, Klassisk — for å snevre inn til følelsen prosjektet ditt trenger.
- Kopiering med ett klikk for både `<link>`-innbyggingstaggen og CSS `font-family`-reglene.
- Gratis, kjører i nettleseren din, ingen konto eller innlogging nødvendig.
Slik bruker du det
- Klikk eventuelt på et stemningsfilter (Moderne, Elegant, Dristig, Minimalistisk, Klassisk) for å begrense listen, eller la "Alle" være valgt for å bla gjennom alt.
- Se gjennom kortene med live forhåndsvisning — den øverste linjen viser overskriftsskriften, linjen under viser brødtekstskriften.
- Åpne et par du liker, og klikk for å utvide innbyggingskode-delen.
- Kopier `<link>`-taggen inn i HTML-en din `<head>`, og kopier CSS-utdraget inn i stilarket ditt for å bruke skriftene på overskrifter og brødtekst.
Eksempel
Inndata
Elegant bloggResultat
Playfair Display (overskrifter) + Source Sans Pro (brødtekst)Filtrering etter "Elegant" fremhever overskrifter med høykontrast antikva parret med en ren, lettlest grotesk brødtekst — en vanlig kombinasjon for redaksjonelle og blogglayouter.
Prinsipper for god skriftparing
- Kontrast fremfor likhet: to skrifttyper som ser nesten identiske ut (to lignende geometriske groteskskrifter, for eksempel) har en tendens til å se ut som en feil snarere enn et bevisst valg. Parr en antikva med en grotesk, eller en tung displayskrift med en lettere tekstskrift, slik at forskjellen leses som tilsiktet.
- Match x-høyde og proporsjoner: skrifter der små bokstaver ligger på lignende visuell høyde har en tendens til å føles som om de hører hjemme på samme side, selv når stilene deres er forskjellige — feiltilpasset x-høyde er en av de vanligste grunnene til at et par føles "feil".
- Begrens deg til to familier (av og til tre): én for overskrifter, én for brødtekst, og høyst en tredje for aksenter som knapper eller etiketter. Mer enn det, og siden begynner å virke uplanlagt.
- Vurder stemningen, ikke bare formen: en rund, vennlig grotesk parret med en formell antikva sender blandede signaler selv om bokstavformene teknisk sett fungerer sammen — velg skrifter som er enige om tone så vel som struktur.
- Test i reelle størrelser: et par som ser flott ut i en stor forhåndsvisning kan miste kontrast ved brødtekststørrelse, eller en displayskrift kan bli uleselig ved små størrelser — sjekk alltid begge ytterpunktene.
Velge et par etter bruksområde
Landingssider og markedsføringsnettsteder drar vanligvis nytte av filtrene "Dristig" eller "Moderne" — en sterk overskriftsskrift med høy kontrast fanger oppmerksomheten øverst på siden, parret med en ren, nøytral brødtekstskrift som holder lengre tekst lett å skumlese.
Blogger og redaksjonelt innhold leser ofte best med "Elegant" eller "Klassisk" par — en raffinert antikva-overskrift signaliserer en gjennomtenkt, redigert stemme, mens en behagelig antikva- eller grotesk-brødtekst holder lange artikler lesbare over lengre leseøkter.
Nettbutikker og produktsider har en tendens til å foretrekke "Minimalistisk"-par — tilbakeholdne, nøytrale skrifter holder fokuset på produktfotografering og priser fremfor på typografien selv, noe som er viktig når dusinvis av produktkort vises på én side.
Porteføljer og kreative nettsteder har mest rom til å eksperimentere — "Dristig" eller "Elegant" par med mer personlighet kan fungere godt siden publikummet delvis er der for å vurdere visuell smak.
Merknader om ytelse og lisensiering
Innbyggings-`<link>`-taggen laster skrifter fra Googles CDN, som er raskt og hurtigbufret på tvers av mange nettsteder besøkende sannsynligvis allerede har besøkt — men det legger til en ekstern forespørsel. For nettsteder der hvert millisekund teller, fjerner nedlasting av skriftfilene og selv-hosting av dem (med `font-display: swap` satt manuelt) den eksterne avhengigheten, mot litt ekstra oppsettsarbeid.
Alle skrifter på Google Fonts er åpen kildekode og gratis for kommersiell bruk uten krav om kreditering, selv om det er en fin gest å kreditere skriftdesigneren der det er enkelt å gjøre.
Ofte stilte spørsmål
Hva gjør at to skrifttyper "passer godt sammen"?
Gode par balanserer kontrast og harmoni. Kontrast — å parre en antikva med en grotesk, eller en dristig displayskrift med en enkel brødtekstskrift — skaper visuelt hierarki slik at overskrifter og brødtekst føles distinkte. Harmoni — lignende x-høyde, sammenlignbar strekvekt og en delt følelse av formalitet eller lekenhet — hindrer de to fra å kollidere. Parene her er kuratert med begge deler i tankene.
Bør overskrifter og brødtekst alltid bruke forskjellige skrifttyper?
Nei, å bruke én skriftfamilie for begge (som dette verktøyets "Rubik + Rubik"-par) fungerer også godt, så lenge skriften har nok vektvariasjon til å skille overskrifter fra brødtekst. Det er et gyldig, minimalistisk valg — ikke en feil.
Hvordan bruker jeg egentlig et par på nettstedet mitt?
Kopier `<link>`-innbyggingstaggen inn i `<head>` på siden din for å laste skriftene fra Googles CDN, og kopier deretter CSS-utdraget inn i stilarket ditt — det setter `font-family` for overskrifter (h1, h2, h3) og for brødtekst (body, p). Juster CSS-velgerne hvis oppmerkingen din er annerledes.
Vil lasting av Google Fonts gjøre nettstedet mitt tregere?
Hver ekstra skriftfil legger til en nettverksforespørsel og en viss risiko for blokkering av rendering. Begrens deg til én overskriftsvekt og én eller to brødtekstvekter, bruk `display=swap` (allerede inkludert i innbyggingskoden) slik at teksten vises i en reserveskrift mens nettskriften lastes, og vurder å selv-hoste skriftfilene for produksjonsnettsteder som trenger raskest mulig lastetid.
Er disse skriftene gratis å bruke kommersielt?
Ja. Hver skrift i Google Fonts, inkludert alle parene vist her, er lisensiert under SIL Open Font License eller Apache License — begge tillater gratis kommersiell bruk, endring og videredistribusjon uten royalties.