Konturtekst: hule bokstaver som fortsatt er lesbare

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.

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 har flere.

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 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.
• Kontur ved pekeren eller i en annen tilstand: en hul knapp eller lenke på nettet som fylles når den velges.

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 har detaljene.

.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;
}

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 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 for hele familien.

1. 1

   Velg ordet

   Ett eller to ord som bærer budskapet, aldri en setning.

2. 2

   Bruk kraftig og stor skrift

   En black-vekt i overskriftsstørrelse. Konturskrift egner seg ikke til brødtekst.

3. 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. 4

   Hent fargen fra bakgrunnen

   Bruk den lyseste eller mørkeste tonen, så streken hører til designet.

5. 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.