# Typsnittskombinationer: enkla regler som fungerar

[Canonical HTML page](https://gradiently.design/sv/guide/font-pairing)

Två typsnitt som ser bra ut var för sig kan slåss när de delar en sida. Några regler och en handfull beprövade par tar bort gissandet.

## The short version

- Typsnittskombinationer fungerar bäst när varje typsnitt har en tydlig roll, oftast ett för rubriker och ett för brödtext.
- Ett bra par kontrasterar tydligt på ett sätt, till exempel serif mot sans serif eller tungt mot lätt, samtidigt som de delar proportioner och stämning.
- Att använda en typsnittsfamilj i flera vikter, eller en superfamilj med matchande serif- och sans-versioner, är det tryggaste sättet att kombinera typsnitt.
- Två typsnitt som liknar varandra men inte är identiska, till exempel två neutrala sans serif, ser oftast ut som ett misstag snarare än en kombination.
- Två typsnitt räcker för nästan alla varumärken, inlägg och webbplatser; ett tredje bör ha ett snävt uppdrag, till exempel kod eller etiketter.

Bra **typsnittskombinationer** handlar om tre regler: ge varje typsnitt en särskild roll, låt de två kontrastera tydligt på ett sätt, och låt dem vara överens om allt annat, till exempel proportioner och stämning. En rubrik i serif över brödtext i sans serif är det klassiska exemplet. Om du är osäker, använd en familj i två vikter; den kan inte skära sig med sig själv.

## Börja med roller, inte typsnitt

Innan du väljer något typsnitt, bestäm vilka uppgifter texten ska klara. De flesta designer har två: rubriker som sätter tonen och brödtext som måste vara bekväm att läsa. Vissa lägger till en tredje, liten uppgift, som etiketter eller kod. Välj brödtextens typsnitt först, eftersom det bär de flesta orden, och hitta sedan ett rubriktypsnitt som kompletterar det.

| Roll | Uppgift | Det viktigaste |
| --- | --- | --- |
| Rubrik | Sätta tonen, synas först | Karaktär, vikt, hur den ser ut stor |
| Brödtext | Gå att läsa bekvämt en längre stund | Läsbarhet, jämn textyta, en bra normal och kursiv |
| Etiketter och liten text | Läsas snabbt i små storlekar | Tydliga former, öppen bokstavsspärrning, kraftiga vikter |
| Kod eller siffror | Linjera och förbli entydiga | Monospace eller tabellsiffror |

Typografiska roller. Två typsnitt kan täcka alla fyra; brödtextens typsnitt klarar ofta etiketter också.

Ett redaktionellt inlägg med en stor rubrik, en liten etikett och en stödrad i en stillsammare stil

Roller gjorda synliga: en stor rubrik med karaktär, en liten etikett ovanför och en stillsam stödrad under. Kontrasten ligger i storlek och roll innan den ligger i typsnittet.

## Kontrastera på ett sätt, var överens om resten

En kombination behöver en synlig skillnad, annars ser det andra typsnittet ut som en olycka. Men om de två skiljer sig på alla sätt samtidigt ser de ut att komma från olika projekt. Välj en kontrastaxel och håll resten nära.

- **Klassificering:** en serif med en sans serif. Den mest pålitliga kontrasten. [Serif eller sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif) förklarar vad var och en tillför.
- **Vikt:** ett tungt rubrikskär med ett normalt textskär, även från samma familj.
- **Bredd:** ett smalt rubriktypsnitt med en brödtext i normal bredd.
- **Var överens om proportioner:** liknande x-höjd, alltså höjden på gemener, får de två att sitta bekvämt på samma rad.
- **Var överens om stämning:** en varm, mjuk serif passar med en varm, humanistisk sans; en skarp, geometrisk sans passar med en spröd serif med hög kontrast.

## En familj eller två

Den enklaste kombinationen är ingen kombination alls: en familj i två eller tre vikter. Den är konsekvent till sin natur och svår att göra fel. Superfamiljer går ett steg längre, med en serif och en sans ritade tillsammans för att dela proportioner, så att du får kontrasten från två klassificeringar med harmonin från en enda design.

### En familj

- Kontrast bara från vikt och storlek
- Garanterad harmoni
- Stillsammare, mer enhetlig röst
- Exempel: rubriker i Archivo Black, brödtext i Archivo

### Två familjer

- Kontrast från klassificering eller karaktär
- Kräver matchande proportioner och stämning
- Mer uttrycksfullt, mer personlighet
- Exempel: rubriker i Fraunces, brödtext i Inter

## Beprövade typsnittskombinationer från Google Fonts

De här paren använder typsnitt som är gratis på [Google Fonts](https://fonts.google.com/) och vitt spridda, vilket gör dem lätta att testa. Se dem som utgångspunkter: sätt dina egna ord i dem och bedöm resultatet.

| Rubrik | Brödtext | Kontrast | Känsla |
| --- | --- | --- | --- |
| Playfair Display | Source Sans 3 | Serif med hög kontrast och en ren sans | Redaktionell, klassisk |
| Fraunces | Inter | Mjuk serif med karaktär och en neutral sans | Varm, samtida |
| DM Serif Display | DM Sans | Rubrikserif med sin systersans | Vänlig, välputsad |
| Instrument Serif | Inter | Smal serif med en neutral sans | Mode, redaktionell |
| IBM Plex Serif | IBM Plex Sans | En superfamiljs serif och sans | Precis, teknisk |
| Space Grotesk | Inter | Egensinnig grotesk med en vanlig | Tech, produkt |
| Archivo Black | Archivo | Vikt inom en familj | Djärv, rak |

Sju kombinationer från Google Fonts. Var och en kontrasterar tydligt på ett sätt och är överens i proportion.

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

Så laddar och använder du en kombination: Fraunces för rubriker, Inter för brödtext, båda med en rimlig reserv. Bara de vikter du använder begärs.

## Kombinationer att undvika

### Undvik

- Två neutrala sans serif som bara skiljer sig lite
- Två rubriktypsnitt som konkurrerar om uppmärksamheten
- Ett tredje och fjärde typsnitt för variationens skull
- Typsnitt med mycket olika x-höjd på samma rad

### Gör så här

- En sans i två vikter, eller en serif tillsammans med den
- Ett rubriktypsnitt, ett stillsamt texttypsnitt
- Två typsnitt, med vikter och storlekar för variation
- Typsnitt med liknande proportioner

Rubriktypsnitt är de mest frestande att överanvända. De är gjorda för stora storlekar och korta rader; brödtext i ett sådant tröttar ögat snabbt. [Rubriktypsnitt](https://gradiently.design/sv/guide/display-fonts) tar upp var de gör sig bäst.

## Så testar du en typsnittskombination på tio minuter

1. **Använd riktiga ord** Sätt en verklig rubrik och ett riktigt stycke från ditt eget arbete, inte utfyllnadstext.
2. **Sätt dem i verkliga storlekar** Rubriken stor, brödtexten i lässtorlek, i det format du faktiskt ska använda.
3. **Titta på texturen** Kliv tillbaka. Brödtexten ska se ut som en jämn grå yta; rubriken ska tydligt skilja sig från den.
4. **Prova på en telefon** Många kombinationer som ser eleganta ut på en bildskärm faller isär i telefonstorlek. [Typsnitt för sociala medier](https://gradiently.design/sv/guide/fonts-for-social-media) tar upp vad som håller.
5. **Kontrollera detaljerna** Siffror, skiljetecken, kursiv och varje språk du publicerar på.

När du har valt, skriv ner det med vikter och storlekar så att alla använder det på samma sätt; [varumärkestypsnitt](https://gradiently.design/sv/guide/brand-fonts) tar upp licenser och språk, och [typografins grunder](https://gradiently.design/sv/guide/typography-basics) tar upp skalan. I Gradiently ligger typsnitten i ditt varumärkeskit och gäller varje ny design.

## FAQ

### Vad är typsnittskombinering?

Typsnittskombinering är att välja två typsnitt, oftast ett för rubriker och ett för brödtext, som kontrasterar tydligt på ett sätt och är överens i proportioner och stämning.

### Hur många typsnitt ska jag använda?

Två räcker till nästan allt. Ett tredje bör ha ett snävt uppdrag, till exempel kod eller små etiketter.

### Går det bra att bara använda ett typsnitt?

Ja. En familj i två eller tre vikter är den tryggaste kombinationen som finns, och många starka varumärken använder just det.

### Vilken är en bra kombination i Google Fonts?

Pålitliga utgångspunkter är Fraunces med Inter, Playfair Display med Source Sans 3 och IBM Plex Serif med IBM Plex Sans.

### Varför ser mina två typsnitt fel ut ihop?

Oftast är de för lika, så att skillnaden ser ut som ett misstag, eller så skiljer de sig på alla sätt samtidigt. Behåll en tydlig kontrast och matcha proportionerna.