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

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

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.

Wenn du wissen willst, wie extrudierte und konturierte Schrift allgemein funktioniert, erklären 3D-Texteffekte und Outline-Schrift 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.

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 die andere Schriftfarbe wählen.

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

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

1. 1

   Text auswählen

   Wähle die Überschrift oder das Wort, das den Effekt bekommen soll. Alles andere bleibt schlichte Schrift.

2. 2

   Einen Stil wählen

   Nimm einen der acht Lettering-Stile. Er wird sofort in den Farben des Marks des Designs gezeichnet.

3. 3

   Die Schrift anpassen

   Geh fetter oder breiter, wenn der Effekt gedrängt wirkt, und gib bei Doppel und Spur etwas Laufweite dazu.

4. 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. 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.

/* 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;
}

Für die größere Familie der Effekte, auch solche, die sich schlecht ins Web übertragen lassen, siehe Texteffekte. Und wenn du überlegst, ob du überhaupt Lettering brauchst, ist Lettering oder Typografie eine nützliche Lektüre.