Outline-Texteffekt: hohle Schrift, die lesbar bleibt

Der Outline-Texteffekt zeigt nur den Rand jedes Buchstabens, das Innere bleibt hohl, sodass der Hintergrund durchscheint. Er liest sich, wenn drei Bedingungen gelten: eine schwere Schrift mit offenen Formen, eine Kontur, die dick genug ist, um als Linie zu wirken (etwa 2 bis 4 Prozent der Schriftgröße), und eine große Größe mit ruhigem Hintergrund dahinter. Das verlässlichste Layout paart ein volles mit einem Konturwort, damit das Auge zuerst etwas Festes zu lesen hat.

Warum Konturschrift schwer lesbar ist

Wir erkennen Buchstaben an ihren vollen Formen. Eine Kontur nimmt diese Masse weg und lässt für jeden Strich zwei dünne Linien, eine äußere und eine innere. In großen Größen füllt das Auge die Form wieder auf. In kleinen Größen oder bei einer Haarlinie verschwimmen die zwei Linien oder gehen im Hintergrund unter. Ein unruhiger Grund verschlimmert es, weil das hohle Innere jedes Stück Textur zeigt.

Schrift und Kontur wählen

Beginne mit der Stärke. Eine Black- oder Extra-Bold-Schrift hat breite Striche, ihre Kontur beschreibt also noch eine klare Form. Offene Buchstaben helfen ebenfalls: Runde Punzen in O, A und e bleiben sichtbar, statt zuzulaufen. Schriften wie Archivo Black, Anton oder eine schwere Grotesk sind gute Ausgangspunkte; fette Schriften bietet mehr.

Die Farbe zählt so viel wie die Breite. Eine helle Kontur auf dunklem Grund liest sich leichter als eine dunkle auf hellem, weil helle Linien sich leicht auszubreiten scheinen. Nimm die Konturfarbe vom hellsten oder dunkelsten Teil des Hintergrunds, damit sie wie Teil des Designs aussieht. Ist der Hintergrund ein Verlauf, prüfe die Kontur dort, wo der Grund der Konturfarbe am nächsten kommt; dort verschwindet die Kontur zuerst.

Layouts, in denen Konturschrift funktioniert

• Volles und hohles Paar: Summer voll, Sessions als Kontur. Das volle Wort verankert, die Kontur gibt Rhythmus.
• Wiederholtes Wort: dasselbe Wort drei- oder viermal gestapelt, eines voll und der Rest als Kontur, für einen Eindruck von Echo oder Bewegung. Retro-Texteffekte behandelt die verwandten Looks Double und Trail.
• Hintergrundwort: ein riesiges Konturwort hinter einer kleineren vollen Headline, das als Textur statt als Text wirkt. Für Tiefe statt Hohlheit siehe 3D-Texteffekt.
• Kontur bei Hover oder zweitem Zustand: im Web ein hohler Button oder Link, der sich füllt, wenn er gewählt wird.

So machst du Konturschrift in CSS

Die Eigenschaft heißt -webkit-text-stroke. Trotz des Präfixes funktioniert sie in jedem großen Browser und ist Teil des Webkompatibilitätsstandards. Setze die Textfarbe auf transparent für ein hohles Wort oder behalte eine Füllung für einen vollen Buchstaben mit Rand. Die MDN-Referenz nennt die Einzelheiten.

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

Screenreader lesen Konturtext normal vor, da er echter Text bleibt. Halte ihn echt: Wandle Kontur-Überschriften auf einer Website nicht in Bilder um. Kontrast ist das verbleibende Risiko, weil Werkzeuge die Textfarbe messen, die nun transparent ist. Prüfe die Kontur nach Augenmaß und mit einem Kontrastprüfer für die Konturfarbe gegen den Hintergrund. Farbkontrast und Barrierefreiheit behandelt die Verhältnisse.

Außenkontur und Inline: zwei verwandte Lettering-Stile

Konturlettering hat Verwandte, die mehr der vollen Form behalten. Eine Außenkontur zeichnet eine Linie um die Außenseite eines vollen Buchstabens und trennt ihn wie ein Sticker-Rand vom Hintergrund. Ein Inline schneidet eine dünne Linie in jeden Strich, der Look von gravierter und viktorianischer Display-Schrift und manchem Ladenschild. Beide lesen sich leichter als ein ganz hohles Wort, sind also eine gute Wahl, wenn die Wörter in kleineren Größen funktionieren müssen. Für die weitere Familie der Behandlungen siehe Texteffekte.

1. 1

   Das Wort wählen

   Ein oder zwei Wörter, die die Botschaft tragen, nie ein Satz.

2. 2

   Schwer und groß setzen

   Ein Black-Schnitt in Headline-Größe. Konturlettering ist nichts für Fließtext.

3. 3

   Hohl, Außenkontur oder Inline wählen

   Hohl für Drama, eine Außenkontur, um ein Wort von unruhigem Grund abzuheben, Inline für ein handwerkliches, Beschilderungsgefühl.

4. 4

   Die Farbe vom Hintergrund nehmen

   Nimm seinen hellsten oder dunkelsten Ton, damit die Kontur zum Design gehört.

5. 5

   Am Handy prüfen

   Sieh den Post in echter Größe an. Flackert oder verschwindet die Kontur, verdicke sie oder fülle das Wort.

Die Lettering-Looks von Gradiently decken diese Familie ab, ohne dass du Ebenen von Hand baust: Innenlinie schnitzt eine Linie in jeden Buchstaben, Doppel zeichnet offene Buchstaben doppelt, Spur lässt Konturen hinterherziehen, und Kontur umringt die Wörter mit Höhenlinien. Weil der Mark hinter dem Design seine ruhigste Region hinter die Wörter schiebt, bekommt eine hohle oder Innenlinie-Headline den stabilen Grund, den sie braucht. Verlauf-Lettering ist eine eigene Technik, behandelt unter Verlaufstext in CSS.