# Lettering-Effekte: Kontur, Innenlinie, Schnitt, Extrusion und mehr

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

Ein Lettering-Stil verwandelt eine Textzeile in Lettering, gezeichnet in den eigenen Farben deines Marks. Hier sind alle acht, mit den Aufgaben, die jeder gut kann, und denen, die du lassen solltest.

## The short version

- Gradiently hat acht Lettering-Effekte: Kontur, Innenlinie, Schnitt, Extrusion, Doppel, Spur, Riso und Halo.
- Jeder Stil wird in den Farben des Marks des Designs gezeichnet, sodass das Lettering immer zum Hintergrund gehört.
- Lettering-Effekte wirken am besten bei kurzen Display-Wörtern wie einem Titel, einem Namen oder einem einzelnen Wort, nicht bei Fließtext.
- Kontur, Schnitt und Extrusion bringen ihren eigenen Kontrast mit und passen zu kräftigen Postern; Innenlinie, Doppel und Riso passen zu redaktionellen und Druck-Looks.
- Nutze einen Stil pro Design, auf der Zeile, die am meisten zählt, und halte den übrigen Text schlicht.

Gradiently hat acht **Lettering-Effekte**: Kontur, Innenlinie, Schnitt, Extrusion, Doppel, Spur, Riso und Halo. Jeder verwandelt eine Textzeile in Lettering, gezeichnet in den eigenen Farben deines Marks: Höhenlinien, die die Wörter umringen, eine Linie, die in jeden Buchstaben geschnitten ist, Wörter, die aus einer Platte ausgeschnitten sind, tiefe dreidimensionale Buchstaben und mehr. Sie sind für Display-Wörter gedacht, einen Titel oder einen Namen, und wirken am besten einzeln, auf der Zeile, die die Leute am ehesten sehen sollen.

## Alle acht Lettering-Stile auf einen Blick

| Stil | Was er zeichnet | Wirkt wie | Ideal für |
| --- | --- | --- | --- |
| **Kontur** | Höhenlinien, die sich um die Wörter ausbreiten | Karten, Topografie, Klang | Festivalposter, Albumcover, Outdoor-Marken |
| **Innenlinie** | Eine Linie in jedem Buchstaben, durch die der Mark als zweite Farbe scheint | Beschilderung, Vintage-Druck | Titel im Ladenschild-Stil, Speisekarten, Etiketten |
| **Schnitt** | Wörter, ausgeschnitten aus einer massiven Platte | Schablone, Papierhandwerk | Kräftige Cover, Sale-Posts, Statements aus einem Wort |
| **Extrusion** | Tiefe Buchstaben mit Seiten in den Farben des Marks | Massiv, skulptural, retro | Veranstaltungstitel, Launches, YouTube-Thumbnails |
| **Doppel** | Offene Buchstaben, zweimal gezeichnet, leicht versetzt | Echo, Bewegung, Mode | Redaktionelle Cover, Musik, Nachtleben |
| **Spur** | Umrisse, die den Buchstaben folgen, mit einstellbarer Spurfarbe | Tempo, Bewegung, die 1970er | Sport, Countdowns, energiegeladene Storys |
| **Riso** | Zwei Farben leicht versetzt gedruckt, mit körniger Punktierung | Risograph-Zines, Indie-Druck | Poster, Zines, Bäckereien, Buchläden |
| **Halo** | Ein weiches Licht in der Farbe des Marks um die Buchstaben | Neon, Dämmerung, verträumt | Nur als Dekoration, nie als Lesbarkeitsrettung |

Die acht Stile. Jeder wird aus der Palette des Marks gezeichnet, ein anderer Mark färbt das Lettering also gleich mit um.

## Kontur, Schnitt und Extrusion: Lettering mit eigenem Kontrast

Diese drei bauen eine starke Kante in die Buchstaben ein, deshalb halten sie auch auf lebhaften Marks stand. **Kontur** umringt die Wörter mit Linien wie auf einer Reliefkarte, sodass das Lettering aus dem Hintergrund aufzusteigen scheint. **Schnitt** setzt die Wörter als Formen, die aus einer massiven Platte geschnitten sind, und wirkt selbstbewusst und grafisch. **Extrusion** gibt jedem Buchstaben Tiefe, in den Farben des Marks gezeichnet, der klassische Look für einen Launch-Titel oder ein Thumbnail.

Ein hochformatiges Poster mit dem einzelnen Wort Solstice, sehr groß gesetzt auf einem warmen Verlaufs-Mark

Ein Wort, sehr groß: die Größe, für die Kontur und Extrusion gemacht sind.

Dasselbe Solstice-Design als Veranstaltungsposter, mit großem Titel und schlichten Details darunter

Der Titel mit Effekt oben, schlichte Details darunter. Nur der Titel bekommt den Effekt.

Wenn du wissen willst, wie extrudierte und konturierte Schrift allgemein funktioniert, erklären [3D-Texteffekte](https://gradiently.design/de/guide/3d-text-effect) und [Outline-Schrift](https://gradiently.design/de/guide/outline-text) das Handwerk dahinter.

## Innenlinie, Doppel und Riso: die Druck- und Editorial-Familie

**Innenlinie** schneidet eine einzelne Linie in jeden Buchstaben, und weil die Linie den Mark selbst zeigt, wird der Hintergrund zur zweiten Farbe des Letterings. Sie passt am besten zu fetten, breiten Schriften, in deren Strich Platz ist. **Doppel** zeichnet offene Buchstaben zweimal, leicht versetzt, für ein Echo, das nach Mode- oder Musikdruck aussieht. **Riso** imitiert einen Risographen: zwei Farben, die nicht ganz deckungsgleich sind, und eine körnige Punktierung, perfekt für alles, was handgedruckt wirken soll.

> **Stimm den Stil auf die Schrift ab** Innenlinie und Schnitt brauchen dicke Striche, kombiniere sie also mit einer fetten Display-Schrift. Doppel und Spur sehen auf offenen, einfachen Buchstaben am besten aus. Riso verzeiht fast jede Schrift und ist deshalb ein sicherer erster Versuch.

## Spur und Halo: Bewegung und Stimmung

**Spur** wiederholt den Umriss eines Wortes dahinter, als zögen die Buchstaben eine Kielspur hinter sich her. Die Spurfarbe ist einstellbar, und sie wirkt wie Tempo: gut für Sport, Countdowns und alles, was selbst in einem Standbild in Bewegung wirken soll. **Halo** umgibt die Buchstaben mit einem weichen Licht in der Farbe des Marks. Es ist rein dekorativ, eine Stimmung statt eines Werkzeugs, und nie ein Mittel, schwer lesbaren Text zu retten. Ist eine Zeile schwer zu lesen, erhöhe die Reaktion des Marks oder lass stattdessen [Automatische Farbe](https://gradiently.design/de/guide/auto-ink-legibility) die andere Schriftfarbe wählen.

## Den passenden Lettering-Effekt für die Aufgabe wählen

| Du gestaltest | Zuerst probieren | Dann probieren |
| --- | --- | --- |
| Ein Konzert- oder Festivalposter | Kontur | Riso |
| Einen Post zum Produktlaunch | Extrusion | Schnitt |
| Einen Titel für die Karte eines Cafés oder einer Bäckerei | Innenlinie | Riso |
| Ein YouTube-Thumbnail | Extrusion | Schnitt |
| Ein Cover im Magazinstil oder einen Karussell-Opener | Doppel | Innenlinie |
| Eine Countdown- oder Sport-Story | Spur | Extrusion |
| Ein Zine oder Buchladen-Poster | Riso | Doppel |

Ausgangspunkte, keine Regeln. Probier zwei, schau dir beide in der Größe an, in der Leute sie wirklich sehen, und behalte den, der sich zuerst liest.

### Vermeiden

- Einen Stil auf Fließtext oder kleinen Details
- Zwei verschiedene Stile in einem Design
- Lange Überschriften mit acht Wörtern oder mehr
- Halo, um eine schwache Zeile lesbar zu machen

### Besser

- Ein Stil auf einem oder zwei Display-Wörtern
- Schlichter Begleittext mit guten Abständen
- Fette Schriften für Innenlinie und Schnitt
- Auf dem Handy in echter Größe prüfen

## So fügst du im Studio einen Lettering-Effekt hinzu

1. **Text auswählen** Wähle die Überschrift oder das Wort, das den Effekt bekommen soll. Alles andere bleibt schlichte Schrift.
2. **Einen Stil wählen** Nimm einen der acht Lettering-Stile. Er wird sofort in den Farben des Marks des Designs gezeichnet.
3. **Die Schrift anpassen** Geh fetter oder breiter, wenn der Effekt gedrängt wirkt, und gib bei Doppel und Spur etwas Laufweite dazu.
4. **Einen anderen Mark probieren** Tausche den Mark und sieh zu, wie sich das Lettering mit umfärbt. So beurteilst du einen Stil am schnellsten.
5. **Jede Größe prüfen** Bring das Design auf Story- oder Thumbnail-Größe und stell sicher, dass das Wort mit Effekt in diesem Maßstab noch lesbar ist.

## Lettering-Effekte in CSS, fürs Web

Brauchst du einen ähnlichen Look auf einer Website, lassen sich zwei davon sauber in CSS umsetzen: eine Kontur im Geist von Doppel und eine gestufte Extrusion. Beide nutzen echten Text, bleiben also markierbar und barrierefrei.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Hartkantige Schatten ohne Unschärfe bauen Tiefe statt eines Leuchtens auf. `-webkit-text-stroke` wird von allen aktuellen Browsern unterstützt; siehe [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Für die größere Familie der Effekte, auch solche, die sich schlecht ins Web übertragen lassen, siehe [Texteffekte](https://gradiently.design/de/guide/text-effects). Und wenn du überlegst, ob du überhaupt Lettering brauchst, ist [Lettering oder Typografie](https://gradiently.design/de/guide/lettering-vs-typography) eine nützliche Lektüre.

## FAQ

### Welche Lettering-Effekte hat Gradiently?

Acht: Kontur, Innenlinie, Schnitt, Extrusion, Doppel, Spur, Riso und Halo, jeweils in den Farben des Marks des Designs gezeichnet.

### Kann ich Lettering-Effekte auf Fließtext anwenden?

Besser nicht. Die Stile sind für kurze Display-Wörter gemacht; schlichte Schrift hält längeren Text leicht lesbar.

### Welcher Lettering-Effekt eignet sich am besten für ein Poster?

Kontur, Extrusion und Riso sind starke Wahlen für Poster. Kontur und Extrusion bringen eigenen Kontrast mit, und Riso gibt einen gedruckten Charakter.

### Ändern Lettering-Effekte ihre Farbe mit dem Mark?

Ja. Jeder Stil wird aus der Palette des Marks gezeichnet, ein Tausch des Marks färbt das Lettering also um.

### Sollte ich Halo nutzen, um Text lesbarer zu machen?

Nein. Halo ist dekorativ. Für Lesbarkeit erhöhst du die Reaktion des Marks oder lässt Automatische Farbe die andere Schriftfarbe wählen.