So wird Text auf Fotos lesbar, ganz ohne Box

Um Text auf Fotos lesbar zu machen, ohne ihn in eine Box zu setzen, beginne mit der Platzierung: Finde oder schaffe die ruhigste Fläche des Bildes und setze die Wörter dorthin. Reicht das nicht, füge ein Verlauf-Scrim hinzu, einen weichen Übergang von klar zu dunkel an einem Rand, senke dann mit einer Tönung den eigenen Kontrast des Fotos und mache zuletzt die Schrift kräftiger und größer. In dieser Reihenfolge bleiben Foto und Wörter intakt und klar. Eine Box ist die letzte Zuflucht, kein Ausgangspunkt.

Diese Seite behandelt speziell den Weg ohne Box. Für alle Techniken einschließlich Boxen, Bänder und Freisteller siehe Text über Bild.

Warum Text auf Fotos verloren geht

Text braucht einen Helligkeitsunterschied zwischen den Buchstaben und dem, was dahinter liegt. Ein Foto wechselt die Helligkeit ständig: ein weißes Hemd neben einem dunklen Türrahmen, Blätter vor Himmel. Wo ein Buchstabe von hell zu dunkel wechselt, verschwindet ein Teil von ihm. Feines Detail verschlimmert es, weil das Auge den Rand des Buchstabens nicht von der Textur dahinter trennen kann.

Sechs Wege, Text auf Fotos lesbar zu machen

1. Für Freiraum auswählen und zuschneiden

Die beste Lösung passiert, bevor du ein Wort tippst. Wähle Fotos mit einer leeren Fläche: Himmel, eine Wand, eine Tischplatte, ein unscharfer Hintergrund. Schneide dann so zu, dass diese Fläche dort sitzt, wo die Headline hinkommt. Ein Hochformat-Post mit 1080×1350 gibt dir Platz, das Motiv nach unten zu schieben und das obere Drittel ruhig zu lassen. Fotografiere darauf hin, wenn du kannst: Tritt zurück und lass Raum über dem Motiv. Schrift auf unruhigen Hintergründen behandelt Muster und Texturen, die sich wie unruhige Fotos verhalten.

2. Ein Verlauf-Scrim hinzufügen

Ein Scrim ist ein Verlauf über dem Foto, dunkel am Rand, wo der Text sitzt, und ausblendend bis ganz klar. Weil er ausblendet, liest das Auge ihn als abfallendes Licht statt als Form. Beschränke ihn auf das Drittel des Bildes, das die Wörter trägt, und nimm einen dunklen Ton aus dem Foto statt reines Schwarz.

3. Das Foto tönen

Ein Foto in einer oder zwei Farben zu tönen verengt seinen Hell-Dunkel-Bereich, sodass Text darüber überall leichter zu lesen ist. Ein dunkles Duotone, etwa tiefes Blau zu weichem Flieder, wirkt besonders gut hinter weißer Schrift; Duotone-Effekt zeigt, wie du eines baust. Tönen lässt außerdem eine Reihe uneinheitlicher Fotos wie zu einer Marke gehörig aussehen.

4. Lokal abdunkeln oder aufhellen

Die meisten Bildeditoren lassen dich Belichtung oder Lichter in einem Bereich senken. Einen hellen Himmel direkt hinter der Headline um eine Blende zu senken, reicht oft allein und ist für jeden unsichtbar, der das Original nicht kennt.

5. Die Schrift robuster machen

Dünne, kleine Schrift verschwindet zuerst. Nimm Semibold oder Bold, geh eine Größe hoch und öffne den Buchstabenabstand bei kleinen Zeilen leicht. Eine schwere Grotesk mit 110 px hält über einem Foto, wo eine leichte Serife mit 70 px nie besteht. Fette Schriften nennt verlässliche Schriften.

6. Das Foto neben die Wörter stellen

Manchmal ist die ehrliche Antwort, gar nicht zu überlappen. Schneide das Foto zu einem Kreis, Bogen oder der Hälfte des Bildes und setze die Wörter auf einen einfarbigen oder Verlaufgrund daneben. Das Foto bleibt ganz, und die Wörter bekommen perfekten Kontrast.

Welche Technik zu welchem Foto passt

So legst du in CSS einen Verlauf-Overlay über ein Bild

Lege auf einer Website Scrim und Foto in einer background-Deklaration übereinander. Der Verlauf steht zuerst, damit er oben liegt. So bleibt der Effekt in CSS und passt sich jedem Zuschnitt des Layouts an.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Prüfe das Ergebnis an den Kontrastempfehlungen: grob 4,5 zu 1 für normalen Text und 3 zu 1 für große Headlines, wie im Kontrastleitfaden von WebAIM beschrieben. Teste den hellsten Punkt hinter den Wörtern, nicht den Durchschnitt. Farbkontrast und Barrierefreiheit erklärt die Zahlen.

Fehler bei Text auf Fotos, die du vermeiden solltest

Höfe und Leuchten um Buchstaben sind der häufigste Rettungsversuch und der, der am billigsten aussieht. Sie verwischen die Buchstabenränder, das Gegenteil dessen, was Lesen braucht. Wenn du in Versuchung bist, lies zuerst Textschatten und bessere Alternativen.

In Gradiently lassen sich Fotos in den Farben des Marks als Mono, Duotone oder Wash tönen und in Bögen, Kreise und Blobs zuschneiden, damit sie neben den Wörtern sitzen. Bei Designs, in denen der Mark durchscheint, schiebt er seine ruhigste Fläche hinter den Text, und Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift, ohne Boxen, Schatten oder Unschärfe.