# Outline-tekst: hule bogstaver, der stadig kan læses

[Canonical HTML page](https://gradiently.design/da/guide/outline-text)

Hule bogstaver ser skarpe ud på en plakat og forsvinder oftere på en telefon end nogen anden effekt. Her er, hvordan du vælger skrift, streg og layout, så de holder, med CSS, der virker i alle browsere.

## The short version

- Outline-tekst tegner kun kanten af hvert bogstav og efterlader indersiden hul, så baggrunden skinner igennem.
- Outline-tekst læses bedst i en kraftig sans- eller slab-skrift med åbne former, sat stort og med en streg på cirka 2 til 4 procent af skriftstørrelsen.
- Sætter du ét ord med kontur sammen med ét massivt ord, får læseren et ankerpunkt, og konturen bliver rytme frem for hele budskabet.
- I CSS laves outline-tekst med -webkit-text-stroke og en transparent farve, som alle store browsere understøtter.
- Undgå kontur på lille tekst, tynde snit og skriveskrifter, for tynde streger er det første, en telefonskærm mister.

**Outline-tekst** viser kun kanten af hvert bogstav, mens indersiden er hul, så baggrunden skinner igennem. Den kan læses, når tre betingelser er opfyldt: en kraftig skrift med åbne former, en streg, der er tyk nok til at opleves som en linje (omkring 2 til 4 procent af skriftstørrelsen), og en stor størrelse med en rolig baggrund bagved. Det mest pålidelige layout sætter ét massivt ord sammen med ét ord med kontur, så øjet har noget fast at læse først.

## Hvorfor outline-tekst er svær at læse

Vi genkender bogstaver på deres massive former. En kontur fjerner den masse og efterlader to tynde linjer for hver streg, en ydre kant og en indre. I store størrelser fylder øjet formen ud igen. I små størrelser, eller med en hårfin streg, flyder de to linjer sammen eller forsvinder i baggrunden. En urolig bund gør det værre, for det hule indre viser hver eneste smule tekstur.

### Fejler

- Lette eller normale snit
- Hårfine streger under 1 procent af størrelsen
- Skriveskrifter eller serifskrifter med høj kontrast
- Hele sætninger med kontur
- Lille tekst under cirka 60 px i et opslag
- Et detaljeret foto, der skinner gennem bogstaverne

### Holder

- Black-, heavy- eller extra bold-snit
- Streger på omkring 2 til 4 procent af størrelsen
- Robuste sans-, slab- eller groteskskrifter
- Et eller to ord, resten massivt
- Overskriftsstørrelser, 120 px og op i et opslag
- En rolig gradient eller ensfarvet flade bagved

## Valg af skrift og streg

Start med vægten. En black- eller extra bold-skrift har brede streger, så dens kontur stadig beskriver en tydelig form. Åbne bogstaver hjælper også: runde punsler i O, A og e forbliver synlige i stedet for at lukke sig. Skrifter som Archivo Black, Anton eller en kraftig grotesk er gode udgangspunkter; [fede skrifttyper](https://gradiently.design/da/guide/bold-fonts) har flere.

| Skriftstørrelse | Stregbredde | Brug |
| --- | --- | --- |
| 60 px | 2 px | Det mindste, et hult ord bør gå ned til, og kun på en ensfarvet bund |
| 120 px | 3 til 4 px | Overskrifter i opslag til sociale medier med 1080 px bredde |
| 200 px | 5 til 7 px | Store enkeltord og plakatlinjer |
| 400 px | 10 til 14 px | Overdimensionerede baggrundsord og bannere |

Stregbredder på cirka 2 til 4 procent af skriftstørrelsen. Gå tykkere på lette snit; gå kun tyndere, hvis bogstaverne begynder at stoppe til.

Farven betyder lige så meget som bredden. En lys streg på en mørk bund læses lettere end en mørk streg på en lys, fordi lyse linjer ser ud til at brede sig en anelse. Tag stregens farve fra den lyseste eller mørkeste del af baggrunden, så den ser ud som en del af designet. Er baggrunden en gradient, så tjek stregen der, hvor bunden ligger tættest på stregens farve; det er der, konturen forsvinder først.

## Layouts, hvor outline-tekst virker

- **Massivt og hult par**: *Sommer* massivt, *Sessions* med kontur. Det massive ord forankrer, konturen giver rytme.
- **Gentaget ord**: samme ord stablet tre eller fire gange, ét massivt og resten med kontur, for en følelse af ekko eller bevægelse. [Retro teksteffekter](https://gradiently.design/da/guide/retro-text-effect) dækker de beslægtede dobbelt- og sporlooks.
- **Baggrundsord**: et kæmpe ord med kontur bag en mindre massiv overskrift, der fungerer som tekstur frem for tekst. Vil du have dybde frem for hulhed, så se [3D-teksteffekt](https://gradiently.design/da/guide/3d-text-effect).
- **Kontur ved hover eller anden tilstand**: på nettet en hul knap eller et link, der fyldes ud, når det vælges.

Et stående opslag med ordet Sessions meget stort og en lille overlinje med ordet Sommer ovenover

Ét stort ord, den form, outline-bogstaver passer til: kort og kraftigt, med små massive detaljer nedenunder.

En lodret story til en sommerkoncertrække med ordet Sessions som overskrift

Samme ord i en story. Det høje format giver plads til at gentage det ned ad siden, én massiv kopi og resten hule.

## Sådan laver du outline-tekst i CSS

Egenskaben hedder `-webkit-text-stroke`. Trods præfikset virker den i alle store browsere og er en del af webkompatibilitetsstandarden. Sæt tekstfarven til transparent for et hult ord, eller behold en udfyldning for et massivt bogstav med kant. [MDN-referencen](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) har detaljerne.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

En streg i `em` skalerer med skriftstørrelsen. Blokken `@supports` bevarer massive bogstaver, hvor egenskaben ikke findes.

> **Stregen æder sig ind i bogstavet** CSS tegner stregen centreret på bogstavets kant, så halvdelen falder indenfor. Tykke streger på et udfyldt ord får det til at se tyndere ud og kan lukke små punsler. I SVG tegner `paint-order: stroke` stregen bag udfyldningen og undgår det.

Skærmlæsere læser tekst med kontur helt normalt, da det stadig er rigtig tekst. Hold den ægte: gør ikke overskrifter med kontur til billeder på et website. Kontrasten er den tilbageværende risiko, fordi værktøjer måler tekstfarven, som nu er transparent. Tjek stregen mod baggrunden med øjet og med et kontrastværktøj på stregens farve. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) dækker forholdene.

## Ydre streg og indre linje: to beslægtede bogstavstilarter

Outline-bogstaver har slægtninge, der bevarer mere af den massive form. En **ydre streg** tegner en linje rundt om ydersiden af et massivt bogstav og adskiller det fra baggrunden som kanten på et klistermærke. En **indre linje** skærer en tynd linje ind i hver streg, looket fra graverede og victorianske displayskrifter og fra mange butiksskilte. Begge læses lettere end et helt hult ord, så de er et godt valg, når ordene skal virke i mindre størrelser. Hele familien af behandlinger finder du i [teksteffekter](https://gradiently.design/da/guide/text-effects).

1. **Vælg ordet** Et eller to ord, der bærer budskabet, aldrig en sætning.
2. **Sæt det kraftigt og stort** Et black-snit i overskriftsstørrelse. Outline-bogstaver er ikke til brødtekst.
3. **Vælg hul, ydre streg eller indre linje** Hul for dramatik, en ydre streg til at løfte et ord fri af en urolig bund, indre linje for en håndværkspræget skiltefølelse.
4. **Tag farven fra baggrunden** Brug dens lyseste eller mørkeste tone, så stregen hører til designet.
5. **Tjek det på en telefon** Se opslaget i virkelig størrelse. Hvis konturen flimrer eller forsvinder, så gør stregen tykkere, eller fyld ordet ud.

Typografibehandlingerne i Gradiently dækker denne familie uden at du skal bygge lag i hånden: Indre linje skærer en linje ind i hvert bogstav, Dobbelt tegner åbne bogstaver to gange, Spor efterlader konturer i et spor bagved, og Kontur omkranser ordene med højdekurver. Fordi Marken bag designet flytter sit roligste område om bag ordene, får en hul overskrift eller en med indre linje den rolige bund, den har brug for. Gradientbogstaver er en separat teknik, som dækkes i [gradienttekst i CSS](https://gradiently.design/da/guide/css-gradient-text).

## FAQ

### Hvordan laver jeg outline-tekst i CSS?

Sæt `color: transparent` og `-webkit-text-stroke: 0.03em #ffffff` på teksten. Egenskaben med præfiks virker i alle store browsere.

### Hvilken skrift er bedst til outline-tekst?

En kraftig sans eller slab med åbne former, som Archivo Black eller Anton. Tynde snit og skriveskrifter falder fra hinanden med kontur.

### Hvor tyk skal en tekstkontur være?

Cirka 2 til 4 procent af skriftstørrelsen: omkring 3 til 4 px til en overskrift på 120 px.

### Er outline-tekst tilgængelig?

Den læses normalt af skærmlæsere, men den kan fejle på kontrast. Brug den kun til store ord, og tjek stregens farve mod baggrunden.