Die Kurzfassung
- Ein Textschatten wirkt am besten als bewusster Stil, etwa ein harter versetzter Schatten ohne Unschärfe, nicht als Rettung bei schlechtem Kontrast.
- Weiche Leuchten und verschwommene Höfe hinter Buchstaben verwischen deren Ränder und lassen ein Design meist billig und veraltet wirken.
- Ein dünner, enger Schatten ist eine vernünftige Wahl für Untertitel auf bewegtem Video, wo sich der Hintergrund nicht kontrollieren lässt.
- Für lesbaren Text schlagen Platzierung, ein Verlauf-Scrim, ein getönter Hintergrund und ein kräftigerer Schnitt meist jeden Schatten.
- In CSS nimmt text-shadow einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe und akzeptiert mehrere, durch Kommas getrennte Schatten.
Auf dieser Seite
Ein Textschatten hilft in zwei Situationen: als bewusster Stil, meist ein harter, um ein paar Pixel versetzter Schatten ohne Unschärfe, und als dünner Sicherheitsrand bei Untertiteln über bewegtem Video. Als Rettung für Wörter, die sich auf einem Foto oder Verlauf nicht lesen lassen, schadet er meist: Weiche Schatten und Leuchten verwischen genau die Ränder, an denen das Auge Buchstaben erkennt, und sie datieren ein Design sofort. Für Lesbarkeit setze die Wörter auf eine ruhigere Fläche, füge ein Verlauf-Scrim hinzu, töne den Hintergrund oder wähle einen kräftigeren Schnitt.
Arten von Textschatten-Effekten
Wie es aussieht
Urteil
Wie es aussieht
Urteil
Wie es aussieht
Urteil
Wie es aussieht
Urteil
Wie es aussieht
Urteil
Wann ein Textschatten hilft
Als harter, versetzter Stil
Ein Schatten ohne Unschärfe, um einige Prozent der Buchstabenhöhe versetzt und in einer kontrastierenden Farbe der Palette, ist ein typografischer Stil mit langer Geschichte auf Plakaten, Verpackungen und Beschilderung. Er wirkt selbstbewusst und ein wenig nostalgisch. Behandle ihn wie jeden Effekt: einer pro Design, ein paar große Wörter, eine schwere Schrift. Texteffekte vergleicht ihn mit den anderen Behandlungen. Retro-Texteffekte zeigt seine nahen Verwandten, das Doppel und die Spur.
Hinter Untertiteln auf Video
Untertitel sitzen über Filmmaterial, das sich in jedem Bild ändert, du kannst also keine ruhige Fläche wählen. Ein enger, dunkler Schatten oder eine dünne Kontur hält weiße Untertitel lesbar, wenn ein helles Fenster dahinter vorbeizieht. Halte ihn nah an den Buchstaben: kurze Unschärfe und kaum oder kein Versatz. Video-Untertitel gestalten behandelt Größe und Platzierung.
Wann ein Textschatten schadet
Das Problem, Kontrast mit einem Schatten zu reparieren, ist, dass er das Symptom behandelt. Der Hintergrund bleibt unruhig; du hast nur einen Schmierfleck um die Buchstaben ergänzt. Weiche Leuchten sind der schlimmste Täter, weil sie eine verschwommene Wolke über jeden Buchstaben hinaus verteilen und den Rand aufweichen, der seine Form bestimmt. In Social Posts komprimieren sie außerdem schlecht und werden zu fleckigen Bändern.
Schatten als Krücke
- Weiches schwarzes Leuchten auf weißem Text über einem Foto
- Farbiger Hof um eine Headline
- Schatten auf kleinem Fließtext
- Mehrere verschiedene Schatten in einem Design
- Schatten plus Kontur plus Leuchten auf einem Wort
Bessere Wahl
- Die Wörter auf die ruhigste Fläche setzen
- Ein Verlauf-Scrim an einem Rand des Bildes
- Größere, kräftigere Schrift für die kleine Zeile
- Ein durchgehender Stil über das ganze Set
- Eine Behandlung, bewusst gewählt
Bessere Alternativen zum Textschatten
- 1
Die Wörter verschieben
Finde die ruhigste, gleichmäßigste Fläche des Hintergrunds und setze den Text dorthin. Das löst die meisten Probleme, bevor sie entstehen.
- 2
Ein Verlauf-Scrim hinzufügen
Ein weicher Übergang von dunkel zu klar an einem Rand gibt Kontrast ohne sichtbare Form. Lesbarer Text auf Fotos enthält Scrim-Codes.
- 3
Den Hintergrund beruhigen
Töne ein Foto in einer oder zwei Farben, senke seine Lichter oder wähle einen Verlauf mit ruhigerer Fläche.
- 4
Die Schrift stärken
Geh einen Schnitt und eine Größe hoch. Eine fette Grotesk in großzügiger Größe braucht auf den meisten Hintergründen keine Hilfe.
- 5
Die Tinte wechseln
Manchmal schlägt dunkler Text auf heller Fläche weißen Text mit Schatten. Wähle die Tinte pro Zeile statt für das ganze Design.
Wörter über einer unruhigen Hintergrundstrecke: Das ist der Moment, in dem Menschen zum Leuchten greifen.
Dieselben Wörter mit beruhigtem Hintergrund dahinter. Kein Schatten nötig, und die Buchstaben bleiben scharf.
Gerade bei Verläufen wird der Grund über das Bild hinweg oft heller oder dunkler, sodass eine Tintenfarbe nicht zu jeder Zeile passt. Text auf Verlauf zeigt, wie du dafür planst, und Schrift auf unruhigen Hintergründen behandelt Muster und Texturen.
Textschatten in CSS
Die CSS-Eigenschaft text-shadow nimmt einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe. Trenne mehrere Schatten mit Kommas; der zuerst genannte liegt oben. Nimm em-Einheiten, damit der Schatten mit der Schriftgröße skaliert. Die vollständige Referenz steht bei MDN.
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
color: #fff7ed;
text-shadow: 0.06em 0.06em 0 #9a3412;
}
/* Tight caption edge for text over video */
.caption {
color: #ffffff;
text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}
/* Preferred fix for readability: a scrim, not a shadow */
.hero {
background:
linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
url("/images/hero.jpg") center / cover;
}Automatische Kontrastprüfungen vergleichen die Textfarbe mit der Hintergrundfarbe und ignorieren den Schatten. Markiert ein Werkzeug deinen Text als kontrastarm, sieht ein Schatten auf deinem Bildschirm vielleicht besser aus, ändert aber die Messung nicht. Korrigiere stattdessen Hintergrund oder Tinte. CSS-Textschatten bietet weitere Rezepte fürs Web.
Wie Gradiently Lesbarkeit löst
Gradiently wurde auf der Idee gebaut, dass Wörter keine Rettung brauchen sollten. Ein Mark weiß, wo die Wörter stehen: Seine ruhigste, kontrastreichste Fläche wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, und unruhiges Detail entspannt sich. Automatische Farbe wählt dann für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks. Boxen, Schatten oder Unschärfe sind nicht beteiligt, und du bestimmst, wie stark der Mark reagiert. Willst du Tiefe als Stil, gibt der Lettering-Look Extrusion tiefe Buchstaben in den Farben des Marks, und Doppel zeichnet offene Buchstaben doppelt, beide scharf und ohne Unschärfe.
Häufige Fragen
Soll ich einen Textschatten nutzen, um Text lesbar zu machen?
Meist nicht. Platzierung, ein Verlauf-Scrim, ein ruhigerer Hintergrund oder ein kräftigerer Schnitt machen Text lesbar, ohne die Buchstaben zu verwischen.
Was ist ein harter Schatten bei Text?
Eine Kopie der Buchstaben, nach unten und zu einer Seite versetzt, ohne Unschärfe, meist in einer kontrastierenden Farbe. Ein bewusster Stil, wie man ihn von Plakaten und Verpackungen kennt.
Wie füge ich in CSS einen Textschatten hinzu?
Nimm text-shadow: 0.06em 0.06em 0 #9a3412;, wobei die Werte horizontaler Versatz, vertikaler Versatz, Unschärferadius und Farbe sind.
Verbessert ein Textschatten den Kontrast für die Barrierefreiheit?
Automatische Prüfungen vergleichen die Textfarbe mit dem Hintergrund und ignorieren den Schatten, ein Schatten behebt also kein durchfallendes Verhältnis. Korrigiere Hintergrund oder Tinte.
Warum wirken leuchtende Texteffekte billig?
Ein Leuchten verteilt eine verschwommene Wolke um jeden Buchstaben, weicht seine Ränder auf und bildet bei Komprimierung oft Banding.
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