Outline-teksteffect: holle letters die toch leesbaar blijven

Het outline-teksteffect toont alleen de rand van elke letter, met de binnenkant hol zodat de achtergrond erdoorheen schijnt. Het leest als aan drie voorwaarden is voldaan: een zwaar lettertype met open vormen, een lijn dik genoeg om als lijn te lezen (ongeveer 2 tot 4 procent van de lettergrootte) en een groot formaat met een rustige achtergrond erachter. De betrouwbaarste layout combineert één gevuld woord met één woord met contour, zodat het oog eerst iets stevigs heeft om te lezen.

Waarom outlinetekst slecht leest

We herkennen letters aan hun massieve vormen. Een contour haalt die massa weg en laat twee dunne lijnen over voor elke streek, een buitenrand en een binnenrand. Op groot formaat vult het oog de vorm weer in. Op klein formaat, of bij een haarlijn, lopen de twee lijnen in elkaar over of verdwijnen ze in de achtergrond. Een drukke ondergrond maakt het erger, want de holle binnenkant laat elk beetje textuur zien.

Het lettertype en de lijn kiezen

Begin bij het gewicht. Een zwart of extra vet lettertype heeft brede streken, dus de contour beschrijft nog steeds een duidelijke vorm. Open letters helpen ook: ronde binnenruimtes in O, A en e blijven zichtbaar in plaats van dicht te lopen. Lettertypes als Archivo Black, Anton of een zware grotesque zijn goede beginpunten; vette lettertypes heeft er meer.

Kleur telt net zo zwaar als dikte. Een lichte lijn op een donkere ondergrond leest makkelijker dan een donkere lijn op een lichte, omdat lichte lijnen zich licht lijken uit te spreiden. Neem de lijnkleur uit het lichtste of donkerste deel van de achtergrond zodat het deel van het ontwerp lijkt. Is de achtergrond een verloop, controleer de lijn dan op de plek waar de ondergrond het dichtst bij de lijnkleur ligt; daar verdwijnt de contour als eerste.

Layouts waar outlinetekst werkt

• Gevuld en hol paar: Summer gevuld, Sessions met contour. Het gevulde woord verankert, de contour voegt ritme toe.
• Herhaald woord: hetzelfde woord drie of vier keer gestapeld, een gevuld en de rest met contour, voor een gevoel van echo of beweging. Retro-teksteffecten behandelt de verwante dubbele en sporenlooks.
• Achtergrondwoord: een enorm woord met contour achter een kleinere gevulde kop, als textuur in plaats van tekst. Voor diepte in plaats van holte, zie 3D-teksteffect.
• Contour bij hover of in een tweede staat: op het web een holle knop of link die zich vult als hij wordt geselecteerd.

Zo maak je outlinetekst in CSS

De eigenschap is -webkit-text-stroke. Ondanks het voorvoegsel werkt hij in elke grote browser en maakt hij deel uit van de webcompatibiliteitsstandaard. Zet de tekstkleur op transparant voor een hol woord, of behoud een vulling voor een gevulde letter met een rand. De MDN-referentie heeft de details.

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

Schermlezers lezen outlinetekst gewoon voor, omdat het nog steeds echte tekst is. Houd het echt: maak van koppen met contour op een website geen afbeeldingen. Contrast is het resterende risico, want tools meten de tekstkleur, die nu transparant is. Controleer de lijn tegen de achtergrond op het oog en met een contrastchecker op de lijnkleur. Kleurcontrast en toegankelijkheid behandelt de verhoudingen.

Buitenlijn en inline: twee verwante letterstijlen

Letters met contour hebben verwanten die meer van de massieve vorm behouden. Een buitenlijn tekent een lijn rond de buitenkant van een gevulde letter en scheidt hem van de achtergrond als een stickerrand. Een inline snijdt een dunne lijn in elke streek, de look van gegraveerde en Victoriaanse displaylettertypes en van menig winkelbord. Beide lezen makkelijker dan een volledig hol woord, dus ze zijn een goede keuze als de woorden op kleiner formaat moeten werken. Voor de bredere familie aan bewerkingen, zie teksteffecten.

1. 1

   Kies het woord

   Een of twee woorden die de boodschap dragen, nooit een zin.

2. 2

   Zet het zwaar en groot

   Een zwart gewicht op kopformaat. Letters met contour zijn niet voor lopende tekst.

3. 3

   Kies hol, buitenlijn of inline

   Hol voor drama, een buitenlijn om een woord van een drukke ondergrond te tillen, inline voor een vakkundig, bordachtig gevoel.

4. 4

   Neem de kleur uit de achtergrond

   Gebruik de lichtste of donkerste tint zodat de lijn bij het ontwerp hoort.

5. 5

   Controleer het op een telefoon

   Bekijk het bericht op ware grootte. Als de contour flikkert of verdwijnt, maak de lijn dikker of vul het woord.

De Lettering-bewerkingen van Gradiently dekken deze familie af zonder dat je lagen met de hand opbouwt: Binnenlijn snijdt een lijn in elke letter, Dubbel tekent open letters twee keer, Spoor laat contouren achter zich aan slepen en Contour omringt de woorden met hoogtelijnen. Omdat de Mark achter het ontwerp zijn rustigste gebied achter de woorden zet, krijgt een holle of inline kop de stabiele ondergrond die hij nodig heeft. Verloopletters zijn een aparte techniek, behandeld in verlooptekst in CSS.