# Outline-Texteffekt: hohle Schrift, die lesbar bleibt

[Canonical HTML page](https://gradiently.design/de/guide/outline-text)

Hohle Buchstaben wirken auf dem Plakat scharf und verschwinden am Handy öfter als jeder andere Effekt. So wählst du Schrift, Kontur und Layout, damit sie halten, mit CSS, das in jedem Browser funktioniert.

## The short version

- Der Outline-Texteffekt zeichnet nur den Rand jedes Buchstabens und lässt das Innere hohl, sodass der Hintergrund durchscheint.
- Konturschrift liest sich am besten in einer schweren Grotesk oder Egyptienne mit offenen Formen, groß gesetzt, mit einer Kontur von etwa 2 bis 4 Prozent der Schriftgröße.
- Ein Konturwort mit einem vollen Wort zu paaren gibt der Leserin einen Anker und hält die Kontur als Rhythmus, statt als ganze Botschaft.
- In CSS entsteht Konturschrift mit -webkit-text-stroke und einer transparenten Farbe, was jeder große Browser unterstützt.
- Vermeide Konturen bei kleinem Text, dünnen Schnitten oder Schreibschriften, denn dünne Striche verliert ein Handybildschirm zuerst.

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.

### Scheitert

- Leichte oder Regular-Schnitte
- Haarlinien unter 1 Prozent der Größe
- Schreibschriften oder Serifen mit hohem Kontrast
- Ganze Sätze als Kontur
- Kleiner Text unter etwa 60 px auf einem Post
- Ein detailreiches Foto, das durch die Buchstaben scheint

### Hält

- Black-, Heavy- oder Extra-Bold-Schnitte
- Konturen von etwa 2 bis 4 Prozent der Größe
- Robuste Grotesken, Egyptiennes oder Groteskschriften
- Ein oder zwei Wörter, der Rest voll
- Headline-Größen, ab 120 px auf einem Post
- Ein ruhiger Verlauf oder eine einfarbige Fläche dahinter

## 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](https://gradiently.design/de/guide/bold-fonts) bietet mehr.

| Schriftgröße | Konturbreite | Einsatz |
| --- | --- | --- |
| 60 px | 2 px | Das Kleinste, was ein hohles Wort sein sollte, und nur auf einfarbigem Grund |
| 120 px | 3 bis 4 px | Social-Post-Headlines bei 1080 px Breite |
| 200 px | 5 bis 7 px | Große einzelne Wörter und Plakatzeilen |
| 400 px | 10 bis 14 px | Übergroße Hintergrundwörter und Banner |

Konturbreiten bei etwa 2 bis 4 Prozent der Schriftgröße. Geh bei leichten Schnitten dicker; geh nur dünner, wenn Buchstaben zulaufen.

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](https://gradiently.design/de/guide/retro-text-effect) 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](https://gradiently.design/de/guide/3d-text-effect).
- **Kontur bei Hover oder zweitem Zustand**: im Web ein hohler Button oder Link, der sich füllt, wenn er gewählt wird.

Ein Hochformat-Post mit dem sehr groß gesetzten Wort Sessions und einem kleinen Eyebrow „Summer“ darüber

Ein großes Wort, die Form, die zu Konturlettering passt: kurz und schwer, mit kleinen vollen Details darunter.

Eine vertikale Story für eine Sommer-Musikreihe mit dem Wort Sessions als Headline

Dasselbe Wort in einer Story. Das hohe Format lässt Platz, es die Seite hinunter zu wiederholen, eine volle Kopie und der Rest hohl.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) nennt die Einzelheiten.

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

Eine Kontur in `em` skaliert mit der Schriftgröße. Der `@supports`-Block behält volle Buchstaben, wo die Eigenschaft nicht verfügbar ist.

> **Die Kontur frisst sich in den Buchstaben** CSS zeichnet die Kontur zentriert auf den Rand des Buchstabens, sodass die Hälfte nach innen fällt. Dicke Konturen auf einem gefüllten Wort lassen es dünner wirken und können kleine Punzen schließen. In SVG zeichnet `paint-order: stroke` die Kontur hinter die Füllung und vermeidet das.

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](https://gradiently.design/de/guide/color-contrast-accessibility) 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](https://gradiently.design/de/guide/text-effects).

1. **Das Wort wählen** Ein oder zwei Wörter, die die Botschaft tragen, nie ein Satz.
2. **Schwer und groß setzen** Ein Black-Schnitt in Headline-Größe. Konturlettering ist nichts für Fließtext.
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. **Die Farbe vom Hintergrund nehmen** Nimm seinen hellsten oder dunkelsten Ton, damit die Kontur zum Design gehört.
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](https://gradiently.design/de/guide/css-gradient-text).

## FAQ

### Wie mache ich Konturschrift in CSS?

Setze `color: transparent` und `-webkit-text-stroke: 0.03em #ffffff` auf den Text. Die präfixierte Eigenschaft funktioniert in allen großen Browsern.

### Welche Schrift ist für Konturschrift am besten?

Eine schwere Grotesk oder Egyptienne mit offenen Formen, etwa Archivo Black oder Anton. Dünne Schnitte und Schreibschriften zerfallen als Kontur.

### Wie dick sollte eine Textkontur sein?

Etwa 2 bis 4 Prozent der Schriftgröße: rund 3 bis 4 px für eine 120-px-Headline.

### Ist Konturschrift barrierefrei?

Screenreader lesen sie normal vor, aber beim Kontrast kann sie durchfallen. Nutze sie nur für große Wörter und prüfe die Konturfarbe gegen den Hintergrund.