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

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.

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

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 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.
• Kontur ved hover eller anden tilstand: på nettet en hul knap eller et link, der fyldes ud, når det vælges.

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

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

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

1. 1

   Vælg ordet

   Et eller to ord, der bærer budskabet, aldrig en sætning.

2. 2

   Sæt det kraftigt og stort

   Et black-snit i overskriftsstørrelse. Outline-bogstaver er ikke til brødtekst.

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

   Tag farven fra baggrunden

   Brug dens lyseste eller mørkeste tone, så stregen hører til designet.

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