Die Kurzfassung
- Texteffekte sind Behandlungen von Buchstaben, etwa Konturen, Innenlinien, Extrusion, versetzte Echos, Passerversatz wie im Druck und Leuchten.
- Effekte wirken am besten auf wenigen großen Worten in einem kräftigen Schnitt, wo sie Charakter hinzufügen, ohne den Text schwerer lesbar zu machen.
- Effekte wirken altbacken, wenn sie in voller Stärke auf jede Zeile angewendet, übereinandergestapelt oder zur Rettung schwacher Schrift genutzt werden.
- Konturschrift braucht eine kräftige, einfache Schrift und einen ruhigen Hintergrund, weil die Buchstaben ihre geschlossene Form verlieren.
- Wähle einen Effekt pro Design und nimm seine Farben aus der Palette des Hintergrunds, damit er gestaltet wirkt statt aufgesetzt.
Auf dieser Seite
Texteffekte sind Behandlungen von Buchstaben, etwa eine Kontur, eine Innenlinie, eine 3D-Extrusion, ein versetztes Echo, ein Passerversatz wie im Druck oder ein weiches Leuchten. Sie wirken nicht altbacken, solange drei Regeln gelten: ein Effekt pro Design, angewendet auf wenige große Worte in einem kräftigen Schnitt, und seine Farben kommen aus dem Hintergrund statt aus einer Voreinstellung. Effekte scheitern, wenn sie gestapelt, über jede Zeile verteilt oder zur Rettung von Schrift genutzt werden, die nicht funktioniert hat.
Dieser Leitfaden behandelt die wichtigsten Familien von Effekten, wann jede zu einer Botschaft passt, wie sie lesbar bleiben und wie du einige in CSS baust. Hast du die Schrift noch nicht gewählt, starte mit Display-Schriften, denn die meisten Effekte brauchen große, robuste Buchstaben.
Die wichtigsten Arten von Texteffekten
Die meisten Schriftzug-Behandlungen gehören zu einer Handvoll Familien. Jede trägt ihre eigenen Assoziationen, deshalb ist die Wahl eines Effekts eigentlich die Wahl eines Tonfalls.
| Effekt | Wie er aussieht | Welchen Ton er setzt | Risiko für die Lesbarkeit |
|---|---|---|---|
| Kontur | Buchstaben nur als Strich gezeichnet | Luftig, modern, redaktionell | Hoch auf unruhigem Grund |
| Innenlinie | Eine dünne Linie in jedem Strich | Alte Schilder, Handwerk, Sport | Gering in großen Größen |
| Extrusion | Buchstaben mit 3D-Tiefe | Retro, verspielt, laut | Mittel |
| Doppel oder Echo | Eine versetzte Kopie oder Spur dahinter | Bewegung, Musik, Energie | Mittel |
| Schnitt | Buchstaben zerschnitten und verschoben | Spannung, Mode, Tech | Mittel |
| Riso | Versetzte Farbebenen, Drucktextur | Indie-Druck, Zines, Wärme | Gering bei kleinem Versatz |
| Halo oder Leuchten | Weiches Licht um die Buchstaben | Nacht, Neon, ruhiger Luxus | Gering auf dunklem Grund |
Wann ein Texteffekt hilft und wann er schadet
Ein Effekt hilft, wenn er Bedeutung trägt, die die Worte allein nicht tragen. Ein Echo hinter Laut lässt es vibrieren. Eine Extrusion auf einer Retro-Menütafel verortet sie in der Zeit. Ein Leuchten auf einem Plakat für eine späte Veranstaltung deutet den Raum an. Sagt der Effekt nichts, wird er zur Dekoration, und Dekoration altert schnell.
Ein großes Wort ist der Ort, an dem sich ein Effekt seinen Platz verdient: wenig zu lesen, viel zu fühlen.
Auf einem Veranstaltungsplakat gehört der Effekt nur auf den Titel. Daten und Details bleiben schlicht.
Vermeiden
- Ein Effekt auf Überschrift und Fließtext
- Kontur plus Schatten plus Leuchten auf einem Wort
- Standardfarben, etwa ein schwarzer Schlagschatten auf allem
- Dünne oder leichte Schriften unter schweren Effekten
- Effekte, die schwachen Text aufregend wirken lassen sollen
Besser
- Ein Effekt, auf den wenigen größten Worten
- Eine Behandlung pro Design, mit Überzeugung eingesetzt
- Effektfarben aus der Palette des Hintergrunds
- Kräftige, einfache Buchstabenformen, die den Effekt überstehen
- Text, der schlicht funktioniert, dann ein Effekt, der Ton hinzufügt
So bleibt Konturschrift lesbar
Konturschrift ist der Effekt, der am ehesten scheitert, weil er die geschlossene Form entfernt, an der man Buchstaben leicht erkennt. Nutze ihn auf einer kräftigen Grotesk oder Slab mit offenen Formen, in großen Größen, über einem ruhigen Hintergrund. Setz den Strich dick genug, dass er als Linie wirkt, nicht als Haarlinie: Etwa 2 bis 4 Prozent der Schriftgröße sind ein guter Start.
Ein verlässliches Muster kombiniert ein gefülltes Wort mit einem konturierten, etwa Sommer gefüllt und Sessions als Kontur. Das gefüllte Wort verankert das Lesen, die Kontur fügt Rhythmus hinzu. Konturiere kleinen Text gar nicht und prüf es auf einem Handy, wo dünne Striche zuerst verschwinden.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke funktioniert trotz Präfix in allen großen Browsern. Schatten in em skalieren mit dem Text.Farben für Texteffekte wählen
Effekte wirken aufgesetzt, wenn ihre Farben aus dem Nichts kommen. Sie wirken gestaltet, wenn sie aus dem Hintergrund kommen. Nimm die Seitenfarbe der Extrusion aus dem dunkelsten Teil des Farbverlaufs, das Echo aus seiner gesättigtsten Farbe und das Leuchten aus seiner hellsten. Dann wirkt der Effekt wie Licht und Material aus derselben Szene.
Halte die Buchstabenfläche selbst in hohem Kontrast zum Grund und lass den Effekt in der Helligkeit dazwischen liegen. So fügt der Effekt Tiefe hinzu, ohne den Buchstaben Kontrast zu nehmen. Die zugrunde liegenden Kontrastregeln stehen unter Farbkontrast.
Texteffekte in Gradiently
Das Studio von Gradiently enthält acht Schriftzug-Behandlungen: Kontur, Innenlinie, Schnitt, Extrusion, Doppel, Spur, Riso und Halo. Ein Mark weiß außerdem, wo die Worte stehen: Sein ruhigster Bereich wandert dahinter, und Automatische Farbe wählt pro Zeile helle oder dunkle Schrift aus der Palette des Marks, was einem behandelten Wort einen ruhigen Grund gibt. Dieselben Regeln gelten weiter: eine Behandlung, wenige Worte, ein kräftiger Schnitt.
Ein einzelner behandelter Satz auf ruhiger Fläche zeigt, wie Zurückhaltung die Arbeit macht.
Mehr dazu, wie Schrift auf farbigem Grund lesbar bleibt, steht unter Text auf Farbverlauf; Effekte, die im Farbverlauf selbst stecken, zeigt Farbverlaufstext in CSS.
Häufige Fragen
Welche Texteffekte wirken modern?
Zurückhaltende: eine kräftige Kontur neben einem gefüllten Wort, ein kleines versetztes Echo, ein dezenter Riso-Versatz oder ein weiches Leuchten auf dunklem Grund, jeweils auf ein oder zwei große Worte angewendet.
Wie mache ich Konturschrift in CSS?
Setz die Textfarbe auf transparent und füge -webkit-text-stroke mit Breite und Farbe hinzu, etwa -webkit-text-stroke: 0.03em #ffffff. Das funktioniert in allen großen Browsern.
Wie mache ich einen 3D-Texteffekt?
Staple mehrere text-shadow-Ebenen, jede ein Pixel weiter in dieselbe Richtung versetzt und nach hinten dunkler. Nimm die Farben aus deinem Hintergrund, damit die Tiefe vom selben Licht beleuchtet wirkt.
Schaden Texteffekte der Lesbarkeit?
Das können sie. Beschränk Effekte auf große, kräftige Worte, einen Effekt pro Design, und prüf, dass die Buchstabenfläche noch starken Kontrast zum Hintergrund hat.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
