# Texteffekte, die nicht altbacken wirken: Kontur, 3D, Echo [Canonical HTML page](https://gradiently.design/de/guide/text-effects) Die meisten Texteffekte wirken altbacken, weil sie auf alles angewendet werden, in voller Stärke und ohne Grund. Auf ein Wort gesetzt, im richtigen Gewicht und in der richtigen Farbe, gehören sie zu den ausdrucksstärksten Werkzeugen der Typografie. ## The short version - 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. **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](https://gradiently.design/de/guide/display-fonts), 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 | Sieben Familien von Schriftzug-Effekten. Je höher das Risiko, desto mehr Sorgfalt braucht der Effekt. ## 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 Design im Hochformat mit einem großen Wort auf einem leuchtenden Farbverlauf, die Art Layout, die zu einem Schriftzug-Effekt passt Ein großes Wort ist der Ort, an dem sich ein Effekt seinen Platz verdient: wenig zu lesen, viel zu fühlen. Ein Veranstaltungsplakat im Hochformat mit einem gestalteten Titel und schlichten Details auf einem dunklen Farbverlauf 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. ```css /* 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); } ``` Vier Effekte in schlichtem CSS. `-webkit-text-stroke` funktioniert trotz Präfix in allen großen Browsern. Schatten in `em` skalieren mit dem Text. > **Barrierefreiheit** Effekte aus CSS lassen die Worte echter Text bleiben, also lesen Screenreader, Suchmaschinen und Übersetzungstools sie weiterhin. Effekte, die in Bilder eingebrannt sind, brauchen die Worte im Alt-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. - Grund: Nachtviolett: #1a1033 - Echo: Violett: #7c3aed - Leuchten: pinkes Licht: #f472b6 - Buchstabe: warmes Weiß: #fde8d0 Effektfarben aus einem Farbverlauf gezogen: ein dunkler Grund, ein gesättigtes Echo, ein Leuchten und eine warme Buchstabenfläche. 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](https://gradiently.design/de/guide/color-contrast-accessibility). ## 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 quadratisches Design mit einem kurzen Satz, groß gesetzt auf einem ruhigen Farbverlauf, mit viel freiem Raum 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](https://gradiently.design/de/guide/text-on-gradient); Effekte, die im Farbverlauf selbst stecken, zeigt [Farbverlaufstext in CSS](https://gradiently.design/de/guide/css-gradient-text). ## FAQ ### 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.