# Displaytypsnitt: så designar du med stor text

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

Stor text kan bära en hel design på egen hand. Den kan också skrika, trängas och åldras dåligt. Skillnaden ligger mest i valet av typsnitt, storleken och vad du parar det med.

## The short version

- Displaytypsnitt är typsnitt som är ritade för att användas stort, till rubriker, affischer, logotyper och omslag, i stället för till stycken.
- De har oftast mer kontrast, tätare avstånd eller starkare personlighet än brödtypsnitt, vilket gör dem slående stora och svårlästa små.
- Använd ett displaytypsnitt för några få ord i taget och para det med ett lugnt, läsbart brödtypsnitt för allt annat.
- Stor text behöver tätare radavstånd och ofta något tätare teckenavstånd än standardinställningarna.
- Många familjer har ett separat Display-snitt eller en optisk storleksaxel som anpassar formen automatiskt för stora storlekar.

**Displaytypsnitt** är typsnitt ritade för att användas stort: rubriker, affischer, omslag, förpackningar och korta bitar text. Deras detaljer, från kraftig kontrast mellan tjocka och tunna streck till tätt avstånd och uttrycksfulla former, är gjorda för att se bäst ut i stora storlekar och faller oftast samman i styckestorlek. Använd ett displaytypsnitt för de få orden som ska stoppa någon, och ett tystare brödtypsnitt för allt de läser efteråt.

Den här guiden tar upp vad som gör ett typsnitt till ett displaytypsnitt, hur stort du ställer in det, hur du parar det och hur du hindrar stor text från att se trång eller daterad ut. Den bygger på [typografins grunder](https://gradiently.design/sv/guide/typography-basics) och [visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy).

## Vad som skiljer ett displaytypsnitt från ett brödtypsnitt

Brödtypsnitt är byggda för bekvämlighet över tusentals ord: öppna former, kraftiga streck, generöst avstånd och hög x-höjd så att bokstäverna klarar små storlekar och dåliga skärmar. Displaytypsnitt byter en del av det mot karaktär. Vid 80 px har ingen svårt att se bokstäverna, så designern kan skruva upp kontrasten, pressa ihop bredden, skärpa detaljerna och dra åt avståndet.

| Egenskap | Brödtypsnitt | Displaytypsnitt |
| --- | --- | --- |
| Streckkontrast | Låg till måttlig | Ofta hög, med hårfina tunna streck |
| Avstånd | Öppet, för små storlekar | Tätt, för stora storlekar |
| Detaljer | Enkla, robusta | Fina serifer, bläckfällor, egenheter |
| Bästa storlek | Ungefär 12 till 24 px på skärm | Ungefär 40 px och uppåt |
| Uppgift | Att läsas | Att märkas och sedan läsas |

Ungefärliga intervall: varje familj skiljer sig, och din slutliga kontroll är alltid den riktiga designen i sin riktiga storlek.

Vissa familjer finns i båda versionerna: ett Text-snitt och ett Display-snitt av samma design, eller en enda variabel fil med en optisk storleksaxel som justerar sig själv när storleken ändras. [Variabla typsnitt](https://gradiently.design/sv/guide/variable-fonts) förklarar optisk storlek mer ingående.

## Typer av displaytypsnitt och stämningen de ger

Displaytypsnitt väljer du lättast efter den känsla du vill ha. Varje familj nedan har vitt tillgängliga exempel från Google Fonts, så att du kan prova dem på dina egna ord.

- **Högkontrastiga serifer**: mode, kultur, redaktionellt. Exempel: Playfair Display, DM Serif Display, Bodoni Moda.
- **Smalt sans**: brådska, sport, nyheter, affischer. Exempel: Bebas Neue, Anton, Oswald.
- **Brett och utsträckt sans**: teknik, moderna varumärken, självsäker lugn. Exempel: Syne, Unbounded.
- **Mjukt och rundat**: vänligt, mat, barn, välmående. Exempel: Fraunces med sin mjuka axel, Fredoka.
- **Tunga grotesker**: kraftfulla uttalanden, lanseringar, aktivism. Exempel: Archivo Black, Inter Tight i svart vikt.
- **Skript och handritat**: inbjudningar, hantverk, personliga varumärken, sparsamt använt. Exempel: Caveat, Yellowtail.

Ett stående omslag i tidskriftsstil med en stor displayrubrik på en djup gradient

Ett redaktionellt omslag: en displayrubrik bär designen, med liten text i ett tyst typsnitt.

Ett stående rabattinlägg med fet smal displaytext på en ljus gradient

Ett rabattinlägg: smal displaytext får plats med stora ord i ett smalt utrymme.

## Hur stor displaytext ska vara

Så stor att den tydligt är det första folk ser, och så liten att orden ryms på få rader. En användbar vana är att storleksätta displaytext i förhållande till canvasen i stället för i punkter. På ett inlägg på 1080 gånger 1350 fyller en rubrik på två till fyra ord ofta omkring 70 till 90 procent av bredden. På en webbplats ligger en hero-rubrik oftast någonstans kring tre till sex gånger brödtextens storlek.

På webben skalar `clamp()` displaytext mjukt mellan ett minimum och ett maximum, så att den blir stor på stora skärmar utan att svämma över på telefoner. Dra åt radavstånd och teckenavstånd när storleken växer, för standardvärdena är ritade för mindre text.

```css
.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}
```

En flytande displayrubrik med tätt radavstånd och lätt negativt teckenavstånd, parad med en läsbar ingress. `max-width` i `ch` håller rubriken till några få rader.

> **Miniatyrtestet** Krymp din design till den storlek den visas i i ett flöde eller ett sökresultat. Om displaytexten fortfarande är det första du läser är storleken rätt. Om orden blir till textur, ta bort ord innan du gör texten mindre.

## Para ett displaytypsnitt med ett brödtypsnitt

Den enklaste tillförlitliga paringen ger varje typsnitt ett jobb. Displaytypsnittet talar högt för några få ord, brödtypsnittet gör det tysta arbetet med bildtexter, brödtext, datum och priser. Skilj de två åt på minst ett tydligt sätt, som serif mot sans eller smalt mot normal bredd, så att de inte ser ut som en nästan-träff. [Typsnittspar](https://gradiently.design/sv/guide/font-pairing) tar upp reglerna i sin helhet.

### Undvik

- Två displaytypsnitt som tävlar i en design
- Ett displaytypsnitt för brödtext eller små bildtexter
- En parning som är så lik att den ser ut som ett misstag
- Varje ord i designen i displaystorlek

### Gör så här

- Ett displaytypsnitt, ett lugnt brödtypsnitt
- Displaytext bara för några få ord
- En tydlig kontrast i struktur eller bredd
- Stora ord överst, små ord som förklarar

## Displaytext på gradienter och stökiga bakgrunder

Stor text är den mest förlåtande text du kan lägga på en färgstark bakgrund, eftersom tjocka streck behåller formen mot rörelsen i fältet bakom. Risken ligger i de tunna delarna: hårfina serifer och fina detaljer försvinner i gradientens ljusare eller stökigare partier. På rika bakgrunder väljer du ett displaytypsnitt med kraftigare tunna streck, eller går upp en vikt.

Ett stående inlägg med en stor rubrik över en gradient som mjuknar bakom texten

Displaytext över en levande gradient: bakgrunden lugnar sig och gör plats bakom orden.

I Gradiently vet en Mark var dina ord är: dess lugnaste område flyttar sig bakom rubriken och färgerna nära bokstäverna fördjupas eller lyfts, så att även fin displaytext håller. Bokstavsbehandlingar som Contour, Inline och Extrude ger karaktär åt displayord när typsnittet självt är enkelt. [Texteffekter](https://gradiently.design/sv/guide/text-effects) visar när de fungerar.

## Misstag som får displaytext att se billig ut

1. **Standardavstånd i enorma storlekar** Stor text med brödtextens standardvärden ser lös ut. Dra åt radavståndet till omkring 1 till 1,1 och teckenavståndet något.
2. **Falsk fetstil och falsk kursiv** När ett typsnitt saknar en stil kan verktyg och webbläsare fejka den genom att smeta ut eller luta bokstäverna. Ladda de riktiga vikterna och kursiverna.
3. **Att sträcka text så att den passar** Skala aldrig text i bredd eller höjd. Välj ett smalt eller brett snitt i stället.
4. **Trendtypsnitt utan skäl** Ett typsnitt som valts för att det syns överallt den här säsongen åldras med säsongen. Välj efter den stämning du behöver.
5. **Ensamma ord i tvåradiga rubriker** Ett enda kort ord ensamt på andra raden försvagar rubriken. Skriv om, bryt om eller använd `text-wrap: balance`.

## FAQ

### Vad är ett displaytypsnitt?

Ett displaytypsnitt är ett typsnitt som är designat för stora storlekar, som rubriker, affischer och logotyper. Dess detaljer och täta avstånd ser bäst ut stora och läses oftast dåligt i styckestorlek.

### Kan jag använda ett displaytypsnitt för brödtext?

Det är bäst att låta bli. Displaytypsnitt offrar läsbarhet i små storlekar för karaktär, så stycken i dem är tröttande att läsa. Para dem med ett brödtypsnitt i stället.

### Hur stort ska ett displaytypsnitt vara?

Så stort att det är det första folk ser, oftast flera gånger brödtextens storlek. På ett inlägg på 1080 gånger 1350 sträcker sig en kort rubrik ofta över det mesta av bredden.

### Var hittar jag gratis displaytypsnitt?

Google Fonts har många displayfamiljer under öppna licenser, bland andra Playfair Display, Bebas Neue, Anton och Fraunces. Kontrollera alltid ett typsnitts licens innan du använder det i ett varumärke.