# Konturtekst: hule bokstaver som fortsatt er lesbare

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

Hule bokstaver ser skarpe ut på en plakat, men forsvinner på mobil oftere enn andre effekter. Slik velger du skrifttype, strek og layout som holder, med CSS som fungerer i alle nettlesere.

## The short version

- Konturtekst tegner bare kanten av hver bokstav og lar innsiden være hul, slik at bakgrunnen synes gjennom.
- Konturtekst er lettest å lese i en kraftig grotesk eller egyptienne med åpne former, stor størrelse og en strek på omtrent 2 til 4 prosent av skriftstørrelsen.
- Ett konturert ord ved siden av ett fylt ord gir leseren et holdepunkt og lar konturen skape rytme fremfor å bære hele budskapet.
- I CSS lages konturtekst med -webkit-text-stroke og gjennomsiktig tekstfarge, som støttes av alle de store nettleserne.
- Unngå kontur på liten tekst, tynne vekter og løkkeskrift, fordi tynne streker er det første en mobilskjerm mister.

**Konturtekst** viser bare kanten av hver bokstav, med en hul innside som slipper bakgrunnen gjennom. Den er lesbar når tre forhold er på plass: en kraftig skrifttype med åpne former, en strek tykk nok til å ses som en linje, omtrent 2 til 4 prosent av skriftstørrelsen, og stor tekst på en rolig bakgrunn. Den mest pålitelige layouten kombinerer ett fylt ord med ett konturert ord, så øyet har noe fast å lese først.

## Hvorfor konturtekst er vanskelig å lese

Vi kjenner igjen bokstaver gjennom de fylte formene. En kontur fjerner denne massen og etterlater to tynne linjer for hvert strøk, én ytre og én indre kant. I stor størrelse fyller øyet formen inn igjen. I liten størrelse, eller med en hårfin strek, flyter linjene sammen eller forsvinner i bakgrunnen. En urolig bakgrunn gjør det verre, fordi den hule innsiden viser hver detalj i teksturen.

### Fungerer dårlig

- Lette eller vanlige skriftvekter
- Hårfine streker under 1 prosent av størrelsen
- Løkkeskrift eller antikva med stor strekontrast
- Hele setninger med kontur
- Liten tekst under omtrent 60 px på et innlegg
- Et detaljert bilde synlig gjennom bokstavene

### Holder seg lesbart

- Black, heavy eller extra bold
- Streker på omtrent 2 til 4 prosent av størrelsen
- Solide grotesker og egyptienner
- Ett eller to ord, resten fylt
- Overskriftsstørrelser på 120 px og oppover i innlegg
- En rolig gradient eller ensfarget bakgrunn

## Velg skrifttype og strek

Start med vekten. En black eller extra bold har brede strøk, så konturen fortsatt beskriver en tydelig form. Åpne bokstaver hjelper også: åpningene i O, A og e forblir synlige fremfor å lukke seg. Archivo Black, Anton eller en kraftig grotesk er gode utgangspunkt. [Fete skrifter](https://gradiently.design/nb/guide/bold-fonts) har flere.

| Skriftstørrelse | Strekbredde | Bruk |
| --- | --- | --- |
| 60 px | 2 px | Minste størrelse for et hult ord, og bare på ensfarget bakgrunn |
| 120 px | 3 til 4 px | Overskrifter i sosiale innlegg som er 1080 px brede |
| 200 px | 5 til 7 px | Store enkeltord og plakatlinjer |
| 400 px | 10 til 14 px | Overdimensjonerte bakgrunnsord og bannere |

Strekbredder på omtrent 2 til 4 prosent av skriftstørrelsen. Bruk tykkere strek på lette vekter, og tynnere bare hvis bokstavene begynner å tette seg.

Farge betyr like mye som bredde. En lys strek på mørk bakgrunn er lettere å lese enn en mørk strek på lys bakgrunn, fordi lyse linjer ser ut til å spre seg litt. Hent strekfargen fra den lyseste eller mørkeste delen av bakgrunnen, så den hører til designet. Er bakgrunnen en gradient, sjekker du streken der bakgrunnen er nærmest strekfargen. Der forsvinner konturen først.

## Layouter der konturtekst fungerer

- **Fylt og hult par:** *Sommer* fylt, *konserter* med kontur. Det fylte ordet gir et holdepunkt, konturen gir rytme.
- **Gjentatt ord:** samme ord stablet tre eller fire ganger, ett fylt og resten konturert, for en følelse av ekko eller bevegelse. [Retroteksteffekter](https://gradiently.design/nb/guide/retro-text-effect) dekker de beslektede doble uttrykkene og sporene.
- **Bakgrunnsord:** et enormt konturord bak en mindre, fylt overskrift, som fungerer som tekstur fremfor tekst. For dybde fremfor hulhet, se [3D-teksteffekt](https://gradiently.design/nb/guide/3d-text-effect).
- **Kontur ved pekeren eller i en annen tilstand:** en hul knapp eller lenke på nettet som fylles når den velges.

Et stående innlegg med ordet Konserter i svært stor skrift og en liten overlinje med Sommer

Ett stort ord i en form som passer konturskrift: kort og kraftig, med små, fylte detaljer under.

En loddrett historie for en sommerkonsertserie med Konserter som overskrift

Det samme ordet i en historie. Den høye rammen gir rom til å gjenta det nedover siden, én fylt kopi og resten hule.

## Slik lager du konturtekst i CSS

Egenskapen heter `-webkit-text-stroke`. Til tross for prefikset fungerer den i alle store nettlesere og inngår i standarden for nettkompatibilitet. Sett tekstfargen til gjennomsiktig for et hult ord, eller behold fyllfargen for en fylt bokstav med kant. [MDNs dokumentasjon](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) har detaljene.

```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 strek angitt i `em` skaleres med skriftstørrelsen. `@supports`-blokken beholder fylte bokstaver der egenskapen ikke er tilgjengelig.

> **Streken spiser seg inn i bokstaven** CSS tegner streken sentrert på bokstavkanten, så halvparten havner innenfor. Tykke streker på et fylt ord får det til å se tynnere ut og kan lukke små åpninger. I SVG tegner `paint-order: stroke` streken bak fyllet og unngår dette.

Skjermlesere leser konturtekst som vanlig, siden det fortsatt er ekte tekst. Behold den slik: Ikke gjør konturoverskrifter om til bilder på en nettside. Kontrast er den gjenværende risikoen, fordi verktøy måler tekstfargen, som nå er gjennomsiktig. Sjekk streken mot bakgrunnen både visuelt og med en kontrastkontroll av strekfargen. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) dekker forholdstallene.

## Ytre strek og innlinje: to beslektede skriftuttrykk

Konturskrift har slektninger som beholder mer av den fylte formen. En **ytre strek** tegner en linje rundt utsiden av en fylt bokstav og skiller den fra bakgrunnen, som kanten på et klistremerke. En **innlinje** skjærer en tynn linje inn i hvert strøk, slik du ser i gravert og viktoriansk dekorativ skrift og mange butikkskilt. Begge er lettere å lese enn et helt hult ord, og er gode valg når ordene må fungere i mindre størrelse. Se [teksteffekter](https://gradiently.design/nb/guide/text-effects) for hele familien.

1. **Velg ordet** Ett eller to ord som bærer budskapet, aldri en setning.
2. **Bruk kraftig og stor skrift** En black-vekt i overskriftsstørrelse. Konturskrift egner seg ikke til brødtekst.
3. **Velg hul, ytre strek eller innlinje** Hul skrift for dramatikk, ytre strek for å løfte et ord fra en urolig bakgrunn, innlinje for et håndlaget skiltpreg.
4. **Hent fargen fra bakgrunnen** Bruk den lyseste eller mørkeste tonen, så streken hører til designet.
5. **Sjekk på mobil** Se innlegget i faktisk størrelse. Hvis konturen flimrer eller forsvinner, gjør streken tykkere eller fyll ordet.

Bokstavutforming i Gradiently dekker denne familien uten at du må bygge lag for hånd: Innlinje skjærer en linje inn i hver bokstav, Dobbel tegner åpne bokstaver to ganger, Spor etterlater konturer, og Kontur omgir ordene med høydekurver. Marken bak designet flytter det roligste området bak ordene, så en hul overskrift eller innlinje får den stabile bakgrunnen den trenger. Gradienttekst er en egen teknikk, dekket i [gradienttekst i CSS](https://gradiently.design/nb/guide/css-gradient-text).

## FAQ

### Hvordan lager jeg konturtekst i CSS?

Sett `color: transparent` og `-webkit-text-stroke: 0.03em #ffffff` på teksten. Egenskapen med prefiks fungerer i alle store nettlesere.

### Hvilken skrifttype passer best til konturtekst?

En kraftig grotesk eller egyptienne med åpne former, som Archivo Black eller Anton. Tynne vekter og løkkeskrift faller fra hverandre når de kontureres.

### Hvor tykk bør en tekstkontur være?

Omtrent 2 til 4 prosent av skriftstørrelsen: rundt 3 til 4 px for en overskrift på 120 px.

### Er konturtekst tilgjengelig?

Skjermlesere leser den som vanlig, men kontrasten kan være for lav. Bruk den bare til store ord, og sjekk strekfargen mot bakgrunnen.