3D-Texteffekt: extrudierte Schrift mit Geschmack

Ein 3D-Texteffekt lässt flache Buchstaben massiv wirken, indem er Seiten ergänzt, als wäre jeder Buchstabe aus einem Block geschnitten und leicht von der Seite gesehen. Geschmackvoll gemacht nutzt er eine schwere Schrift, eine kurze Tiefe von etwa 5 bis 10 Prozent der Buchstabenhöhe, eine einheitliche Richtung und Seitenfarben aus einem dunkleren Ton des Hintergrunds. Schlecht gemacht nutzt er Verläufe, glänzende Lichter, lange Tiefen und mehrere Richtungen zugleich. Halte es schlicht, und extrudierte Schrift wirkt wie ein selbstbewusstes Schild statt wie Clipart.

Was extrudierten Text gut oder billig aussehen lässt

Extrusion hat eine lange Geschichte in handgemalten Schildern, Zirkusplakaten und Plattenhüllen der 1970er. Diese Geschichte ist der Grund, warum sie warm und ein wenig nostalgisch wirkt. Nutze das für Cafés, Eis, Kindermarken, Musik und Events. Für eine ruhige, minimalistische Marke ist sie meist die falsche Stimme; Texteffekte hilft, einen passenden zu wählen.

Tiefe, Richtung und Farbe wählen

Tiefe

Die Seiten sollten kürzer sein, als die Buchstabenstriche breit sind. Bei einer 160-px-Headline wirkt eine Tiefe von 8 bis 16 px massiv; 40 px beginnt wie ein langer Schatten auszusehen, was ein anderer Stil ist. Kleiner Text kann gar keine Tiefe tragen, beschränke Extrusion also auf Headline-Größen.

Richtung

Wähle eine Richtung und behalte sie in jedem Design. Nach unten und rechts ist am natürlichsten, weil wir Licht meist als von oben links kommend lesen. Gerade nach unten wirkt wie gestapelte Blöcke. Nach oben links wirkt ungewohnt, was für eine einzelne Aussage funktionieren kann, aber schnell ermüdet.

Farbe

Drei Töne leisten die ganze Arbeit: die Buchstabenfläche, die Seite und der Grund. Die Fläche sollte stark mit dem Grund kontrastieren. Die Seite liegt dazwischen, meist ein tiefer Ton des Grunds oder der Fläche. Sie vom Hintergrund zu nehmen lässt die Extrusion vom selben Licht beleuchtet wirken.

So machst du einen 3D-Texteffekt in CSS

CSS hat keine Extrude-Eigenschaft, aber gestapelte Schatten erledigen es. Jede text-shadow-Ebene ist eine feste Kopie der Buchstaben, einen Pixel weiter versetzt, ohne Unschärfe. Stapelst du genug davon, verschmelzen die Kopien zu festen Seiten. Ein letzter, weicherer Schatten darunter erdet die Buchstaben auf der Seite.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Dutzende Ebenen von Hand zu schreiben ist mühsam. Ein paar Zeilen JavaScript erzeugen die Liste für jede Tiefe, Richtung und Farbe, die du in dein Stylesheet einfügen kannst.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Halte extrudierte Überschriften auf einer Website als echten Text, damit sie durchsuchbar, markierbar und für Screenreader lesbar bleiben. Die Schatten ändern den gemessenen Kontrast zwischen Buchstabe und Hintergrund nicht, achte also darauf, dass die Buchstabenfarbe für sich besteht. Willst du eine leichtere, grafische Version, behandelt Textschatten einen einzelnen harten Schatten ohne Ebenen; für echtes 3D mit Licht und Rotation bist du im Gebiet von WebGL, in das Shader-Verläufe einführt.

Extrudiertes Lettering Schritt für Schritt

1. 1

   Zwei bis vier Wörter wählen

   Ein Ladenname, ein einzelnes Angebot, ein Eventtitel. Extrusion braucht Raum drumherum.

2. 2

   In einer schweren Schrift setzen

   Eine Black-Grotesk oder Egyptienne oder eine weiche Retro-Serife. Retro-Schriften nennt einige mit der richtigen Wärme.

3. 3

   Farben für Fläche, Seite und Grund wählen

   Starker Kontrast zwischen Fläche und Grund; die Seite ein dunklerer Ton des Grunds.

4. 4

   Tiefe in eine Richtung ergänzen

   Starte bei etwa 6 Prozent der Buchstabenhöhe, nach unten rechts. Erhöhe nur, wenn es noch flach wirkt.

5. 5

   Alles andere flach lassen

   Details, Daten und Preise in einer schlichten, vollen Grotesk ohne Effekt.

Extrudierte Schrift in Gradiently

Extrusion ist einer der Lettering-Looks von Gradiently: Er gibt jedem Text im Studio feste Tiefe nach unten rechts, mit Seiten in den eigenen Farben des Marks und einem Regler für die Tiefe, sodass du keine Ebenen stapeln musst. Der Mark hinter dem Design schiebt seine ruhigste Fläche hinter die Wörter, sodass extrudiertes Lettering lesbar bleibt, wie sich der Hintergrund über das Bild auch verschiebt. Der Outline-Texteffekt und andere Looks stehen im selben Menü, falls die Extrusion für die Botschaft zu laut ist.