Konturtext: ihåliga bokstäver som ändå går att läsa

Konturtext visar bara kanten av varje bokstav, med insidan ihålig så att bakgrunden syns igenom. Den läses när tre villkor gäller: ett tungt typsnitt med öppna former, en linje tjock nog att läsas som en linje (runt 2 till 4 procent av teckenstorleken) och en stor storlek med en lugn bakgrund bakom. Den mest pålitliga layouten parar ett fylligt ord med ett konturord, så att ögat har något fast att läsa först.

Varför konturtext är svår att läsa

Vi känner igen bokstäver på deras massiva former. En kontur tar bort den massan och lämnar två tunna linjer för varje streck, en yttre kant och en inre. I stora storlekar fyller ögat i formen igen. I små storlekar, eller med en hårfin linje, flyter de två linjerna ihop eller försvinner in i bakgrunden. En stökig bakgrund gör det värre, eftersom det ihåliga inre visar varje bit av texturen.

Välja typsnitt och linje

Börja med vikten. Ett svart eller extrafett typsnitt har breda streck, så dess kontur beskriver fortfarande en tydlig form. Öppna bokstäver hjälper också: de runda innerytorna i O, A och e förblir synliga i stället för att sluta sig. Typsnitt som Archivo Black, Anton eller en tung grotesk är bra utgångspunkter, feta typsnitt har fler.

Färgen betyder lika mycket som bredden. En ljus linje på mörk bakgrund läses lättare än en mörk linje på ljus, eftersom ljusa linjer verkar breda ut sig något. Ta linjens färg från den ljusaste eller mörkaste delen av bakgrunden så att den ser ut som en del av designen. Om bakgrunden är en gradient, kontrollera linjen där bakgrunden ligger närmast linjens färg, för det är där konturen försvinner först.

Layouter där konturtext fungerar

• Fylligt och ihåligt par: Summer fylligt, Sessions som kontur. Det fylliga ordet förankrar, konturen ger rytm.
• Upprepat ord: samma ord staplat tre eller fyra gånger, ett fylligt och resten som kontur, för en känsla av eko eller rörelse. Retro-texteffekter tar upp de besläktade dubbel- och spårlooken.
• Bakgrundsord: ett jättelikt konturord bakom en mindre fyllig rubrik, som fungerar som textur snarare än text. För djup i stället för ihålighet, se 3D-texteffekt.
• Kontur vid hovring eller andra tillstånd: på webben, en ihålig knapp eller länk som fylls när den väljs.

Så gör du konturtext i CSS

Egenskapen heter -webkit-text-stroke. Trots prefixet fungerar den i alla större webbläsare och ingår i standarden för webbkompatibilitet. Sätt textfärgen till genomskinlig för ett ihåligt ord, eller behåll en fyllning för en fyllig bokstav med kant. MDN-referensen har detaljerna.

.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äsare läser konturtext som vanligt, eftersom det fortfarande är riktig text. Håll den riktig: platta inte ut konturrubriker till bilder på en webbplats. Kontrast är den återstående risken, eftersom verktyg mäter textfärgen, som nu är genomskinlig. Kontrollera linjen mot bakgrunden med ögat och med en kontrastkontroll på linjens färg. Färgkontrast och tillgänglighet tar upp förhållandena.

Yttre linje och innerlinje: två besläktade bokstavsstilar

Konturbokstäver har släktingar som behåller mer av den fylliga formen. En yttre linje ritar en linje runt utsidan av en fyllig bokstav och skiljer den från bakgrunden som en klistermärkeskant. En innerlinje skär en tunn linje inuti varje streck, utseendet hos graverad och viktoriansk displaytext, och hos många butiksskyltar. Båda läses lättare än ett helt ihåligt ord, så de är ett bra val när orden måste fungera i mindre storlekar. För den bredare familjen av behandlingar, se texteffekter.

1. 1

   Välj ordet

   Ett eller två ord som bär budskapet, aldrig en mening.

2. 2

   Sätt det tungt och stort

   En svart vikt i rubrikstorlek. Konturbokstäver är inte till för brödtext.

3. 3

   Välj ihålig, yttre linje eller innerlinje

   Ihålig för dramatik, en yttre linje för att lyfta ett ord från en stökig bakgrund, innerlinje för en hantverksmässig skyltkänsla.

4. 4

   Ta färgen från bakgrunden

   Använd dess ljusaste eller mörkaste ton så att linjen hör till designen.

5. 5

   Kontrollera den på en telefon

   Se inlägget i verklig storlek. Om konturen flimrar eller försvinner, gör linjen tjockare eller fyll ordet.

Behandlingarna för Bokstäver i Gradiently täcker den här familjen utan att du bygger lager för hand: Innerlinje skär en linje inuti varje bokstav, Dubbel ritar öppna bokstäver två gånger, Spår lämnar konturer som släpar efter och Kontur ringar in orden med höjdlinjer. Eftersom Marken bakom designen flyttar sin lugnaste region bakom orden får en ihålig eller innerlinjerad rubrik den stadiga bakgrund den behöver. Gradientbokstäver är en separat teknik, som tas upp i gradienttext i CSS.