Kortversjonen
- Skriftkombinasjoner fungerer best når hver skrifttype har en tydelig rolle, vanligvis én til overskrifter og én til brødtekst.
- Et godt par har én tydelig kontrast, som seriff mot sans serif eller tung mot lett, samtidig som proporsjoner og stemning passer sammen.
- Én skriftfamilie med flere vekter, eller en superfamilie med matchende seriff- og sans serif-versjoner, er den tryggeste måten å kombinere skrifter på.
- To skrifttyper som er like, men ikke identiske, som to nøytrale sans serif-skrifter, ser vanligvis ut som en feil fremfor en bevisst kombinasjon.
- To skrifter er nok for nesten enhver merkevare, ethvert innlegg eller nettsted; en tredje bør ha en avgrenset jobb, som kode eller etiketter.
På denne siden
Gode skriftkombinasjoner handler om tre regler: gi hver skrifttype en egen rolle, la de to ha én tydelig kontrast og la dem passe sammen på alt annet, som proporsjoner og stemning. En seriffoverskrift over brødtekst i sans serif er det klassiske eksemplet. Er du i tvil, bruk én familie i to vekter; den kan ikke krasje med seg selv.
Start med roller, ikke skrifter
Før du velger skrifttype, bestem hvilke jobber typografien skal gjøre. De fleste design har to: overskrifter som setter tonen, og brødtekst som må være behagelig å lese. Noen legger til en tredje, liten jobb, som etiketter eller kode. Velg brødtekstskriften først, fordi den bærer de fleste ordene, og finn deretter en overskriftsskrift som utfyller den.
| Rolle | Oppgave | Viktigst |
|---|---|---|
| Overskrift | Sette tonen, bli sett først | Særpreg, vekt, utseende i stor størrelse |
| Brødtekst | Være behagelig å lese over tid | Leselighet, jevnt skriftbilde, god normal og kursiv |
| Etiketter og liten tekst | Leses raskt i små størrelser | Tydelige former, åpen avstand, solide vekter |
| Kode eller tall | Stå på linje og være entydig | Fast tegnbredde eller tabellariske tall |
Synlige roller: en stor overskrift med særpreg, en liten etikett over og en rolig støttelinje under. Kontrasten ligger i størrelse og rolle før den ligger i skrifttype.
Skap kontrast på ett punkt, samstem resten
En kombinasjon trenger en synlig forskjell, ellers ser den andre skriften tilfeldig ut. Men skiller de to seg på alle måter samtidig, ser de ut til å komme fra ulike prosjekter. Velg én kontrastdimensjon og hold resten nært.
- Skriftklasse: en seriff sammen med en sans serif. Den mest pålitelige kontrasten. Seriff eller sans serif forklarer hva hver bidrar med.
- Vekt: et tungt display-snitt med et normalt tekstsnitt, gjerne fra samme familie.
- Bredde: en smal overskriftsskrift med brødtekst i normal bredde.
- Samstem proporsjonene: lignende x-høyde, høyden på små bokstaver, gjør at de to står behagelig sammen på én linje.
- Samstem stemningen: en varm, myk seriff passer med en varm, humanistisk sans serif; en skarp, geometrisk sans serif passer med en presis seriff med høy kontrast.
Én familie eller to
Den enkleste kombinasjonen er ingen kombinasjon: én familie i to eller tre vekter. Den er helhetlig fra grunnen og vanskelig å få feil. Superfamilier går ett steg videre, med en seriff og en sans serif tegnet sammen for å dele proporsjoner. Da får du kontrasten mellom to skriftklasser og harmonien fra ett design.
Én familie
- Kontrast bare fra vekt og størrelse
- Garantert harmoni
- Roligere, mer ensartet uttrykk
- Eksempel: Archivo Black i overskrifter, Archivo i brødtekst
To familier
- Kontrast fra skriftklasse eller særpreg
- Trenger matchende proporsjoner og stemning
- Mer uttrykksfullt, mer personlighet
- Eksempel: Fraunces i overskrifter, Inter i brødtekst
Utprøvde skriftkombinasjoner fra Google Fonts
Disse parene bruker skrifttyper som er gratis på Google Fonts og mye brukt, så de er enkle å teste. Se på dem som utgangspunkt: sett dine egne ord med dem og vurder resultatet.
| Overskrift | Brødtekst | Kontrast | Følelse |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Seriff med høy kontrast sammen med ren sans serif | Redaksjonell, klassisk |
| Fraunces | Inter | Myk seriff med særpreg sammen med nøytral sans serif | Varm, moderne |
| DM Serif Display | DM Sans | Display-seriff med sin tilhørende sans serif | Vennlig, gjennomarbeidet |
| Instrument Serif | Inter | Smal seriff med nøytral sans serif | Mote, redaksjonell |
| IBM Plex Serif | IBM Plex Sans | Seriff og sans serif fra én superfamilie | Presis, teknisk |
| Space Grotesk | Inter | Særegen grotesk sammen med en enkel | Teknologi, produkt |
| Archivo Black | Archivo | Vekt innenfor én familie | Kraftig, direkte |
<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:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
h1, h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
line-height: 1.1;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.55;
}
</style>Kombinasjoner du bør unngå
Unngå
- To nøytrale sans serif-skrifter med bare små forskjeller
- To display-skrifter som konkurrerer om oppmerksomheten
- En tredje og fjerde skrift for variasjon
- Skrifter med svært ulik x-høyde på én linje
Gjør heller dette
- Én sans serif i to vekter, eller sammen med en seriff
- Én display-skrift, én rolig tekstskrift
- To skrifter, med vekter og størrelser som variasjon
- Skrifter med lignende proporsjoner
Display-skrifter er de mest fristende å overbruke. De er laget for store størrelser og korte linjer; brødtekst satt med dem sliter raskt ut øyet. Display-skrifter forklarer hvor de kommer til sin rett.
Test en skriftkombinasjon på ti minutter
- 1
Bruk ekte ord
Sett en faktisk overskrift og et ekte avsnitt fra arbeidet ditt, ikke plassholdertekst.
- 2
Bruk faktiske størrelser
Overskriften stor, brødteksten i lesestørrelse, på formatet du faktisk skal bruke.
- 3
Se på skriftbildet
Ta et skritt tilbake. Brødteksten bør se jevnt grå ut; overskriften bør skille seg tydelig fra den.
- 4
Prøv på en telefon
Mange kombinasjoner som er elegante på en stor skjerm, faller fra hverandre i mobilstørrelse. Skrifter til sosiale medier forklarer hva som holder.
- 5
Sjekk detaljene
Tall, tegnsetting, kursiv og alle språkene du publiserer på.
Når du har valgt, skriv ned vekter og størrelser så alle bruker dem likt; merkevareskrifter dekker lisenser og språk, og grunnleggende typografi dekker størrelsesskalaen. I Gradiently ligger skriftene i merkevaresettet og brukes på hvert nye design.
Spørsmål folk stiller
Hva er skriftkombinasjoner?
Det er å velge to skrifttyper, vanligvis én til overskrifter og én til brødtekst, som har én tydelig kontrast og passer sammen i proporsjoner og stemning.
Hvor mange skrifter bør jeg bruke?
To er nok til nesten alt. En tredje bør ha en avgrenset jobb, som kode eller små etiketter.
Er det greit å bruke bare én skrift?
Ja. Én familie i to eller tre vekter er den tryggeste kombinasjonen som finnes, og mange sterke merkevarer bruker nettopp det.
Hva er en god kombinasjon fra Google Fonts?
Pålitelige utgangspunkt er blant annet Fraunces med Inter, Playfair Display med Source Sans 3 og IBM Plex Serif med IBM Plex Sans.
Hvorfor ser de to skriftene mine feil ut sammen?
Vanligvis er de for like, slik at forskjellen virker som en feil, eller de skiller seg på alle måter samtidig. Behold én tydelig kontrast og samstem proporsjonene.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
