Ein Hintergrund, der sich dem Text anpasst: wie ein Mark Platz macht

Ein Gradiently Mark ist ein Hintergrund, der sich dem Text anpasst. Weil er live gezeichnet und nicht als Bild gespeichert wird, weiß er, wo deine Worte stehen, und ordnet sich um sie herum neu: Der ruhigste, kontrastreichste Teil des Materials wandert hinter den Text, Farben nahe den Buchstaben vertiefen sich oder hellen auf, und unruhige Details beruhigen sich. Nichts wird darübergelegt. Es gibt keine Kästen, keine Schatten und keine Unschärfe, du behältst also den ganzen Hintergrund, und die Worte bleiben lesbar.

Die üblichen Wege, Text lesbar zu machen, und was sie kosten

Setz eine Überschrift auf einen lebhaften Verlauf oder ein Foto, und ein Teil davon verschwindet. Die gängigen Lösungen funktionieren alle, indem sie den Hintergrund verdecken, ein seltsames Ergebnis, wenn der Hintergrund der Grund war, das Design zu wählen.

Jede dieser Lösungen hat bei einem flachen Bild ihren Platz, und Text auf einem Verlaufshintergrund behandelt sie ehrlich. Der Unterschied bei einem Mark: Der Hintergrund macht mit, statt abgedeckt zu werden.

Was ein Mark um deine Worte herum macht

1. 1

   Er kommt zur Ruhe

   Das Material verschiebt sich, sodass deine Worte auf seinem ruhigsten Teil landen. Licht, das hinter der Überschrift gelegen hätte, wandert in den freien Raum drumherum.

2. 2

   Er ändert den Ton

   Nah an den Buchstaben gleitet die Palette zu einer Farbe, die mit der Schrift kontrastiert: tiefer hinter heller Schrift, heller hinter dunkler.

3. 3

   Er beruhigt sich

   Verzerrung, Unruhe und feine Details entspannen sich hinter den Worten, sodass eine starke Textur nie durch einen dünnen Strich schneidet.

4. 4

   Er biegt sich an den Rändern

   Muster krümmen sich am Rand der Worte leicht, statt gerade durch sie hindurchzulaufen.

Die Reaktion arbeitet Hand in Hand mit der Automatische Farbe, die für jede Zeile die helle oder dunkle Schriftfarbe des Marks wählt. Der Hintergrund macht den Platz; die Automatische Farbe wählt die richtige Farbe, um ihn zu füllen.

Wählen, wie stark der Hintergrund reagiert

Du entscheidest, wie weit der Mark nachgibt. Das Panel dafür heißt Um deine Wörter, und es beginnt mit fünf Stufen.

Unter den Stufen liegen vier Regler zur Feinabstimmung: Ton bestimmt, wie weit sich das Material für Kontrast hinter den Worten zurückzieht, Ruhe, wie stark sich Verzerrung und Unruhe entspannen, Biegung, wie sehr sich das Muster am Rand der Worte krümmt, und Reichweite, ob es sich eng an jeden Buchstaben schmiegt oder um den ganzen Textblock reagiert.

Warum das in jeder Größe zählt

Ein flaches Hintergrundbild wird einmal angeordnet. Schneidest du es auf eine Story zu, landet der helle Fleck vielleicht genau hinter der Überschrift. Ein Mark wird für jedes Format neu gezeichnet: Wenn ein Design vom Post zur Story zum Banner wandert, wandern die Worte mit, und der Mark macht wieder dort Platz, wo sie landen. Das ist es, was einen Look in jeder Größe funktionieren lässt.

Eine einfache Version der Idee in CSS

Im Web kannst du das Prinzip mit einem schlichten Verlauf übernehmen: Leg den tiefsten, ruhigsten Teil des Hintergrunds dorthin, wo dein Text sitzt, und halte die Farbe an den Rändern. Er folgt den Worten nicht, wenn sich das Layout ändert, schlägt aber einen Kasten.

.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}

Wann du die Reaktion herunterdrehst

Nicht jedes Design will maximale Lesbarkeit. Ein Handy-Hintergrundbild hat gar keine Worte, also ist Aus richtig. Riesige Display-Schrift, ein einzelnes Wort quer über ein Plakat, steht für sich und sieht mit Unsichtbar oft besser aus. Lettering-Effekte wie Kontur oder Extrusion, behandelt in Lettering-Effekte, bringen ihren eigenen Kontrast schon mit. Heb die starken Stufen für die Aufgaben auf, die sie brauchen: Kleingedrucktes, lange Details und alles, was in Eile gelesen wird.