Inspirierte Designentscheidungen mit Herb Lubalin: Typografie kann so spannend sein wie Illustration und Fotografie

Während eine gute Verwendung von Schrift den Menschen beim Lesen hilft, kann eine großartige Typografie so viel mehr bewirken. Typografie kann eine Idee eloquent artikulieren und eine Botschaft farbenfroh auf eine Weise vermitteln, die so kraftvoll ist wie jede Illustration oder Fotografie.

Ich bin jemand, der das Kino genauso liebt wie die Typografie. Wenige Dinge inspirieren mich so sehr wie die Typografie von Filmplakaten, die entweder die Atmosphäre eines Films heraufbeschwören oder zur Erzählung seiner Geschichte beitragen.

In jüngerer Zeit spiegelt die Typografie in Quentin Tarantinos Filmplakaten perfekt die Atmosphäre und den Charakter seiner Filme wider. In Pulp Fiction ist die Aachen Bold-Schrift des Titels so hartgesotten wie der Film selbst. Obwohl der Satz des ikonischen Zeichens für Once Upon a Time in Hollywood ebenso von der Realität abweicht wie andere Teile des Films, beschwört das Plakat den Geist Hollywoods herauf.

Saul Bass ist möglicherweise der bekannteste Grafikdesigner seiner Zeit und für das Hollywood der 1950er und 60er Jahre entwarf er Filmplakate, die so unverkennbar sind wie das Schild selbst. Für sein Plakatdesign für Hitchcocks Vertigo im Jahr 1958 verwendete Bass handgeschnittene Typografie, die an deutsche expressionistische Filme der 1920er Jahre erinnert. 1960 ist die gekürzte Titeltypografie von Bass für Psycho – wiederum für Alfred Hitchcock – sowohl clever als auch offensichtlich. Während Saul Bass oft fälschlicherweise zugeschrieben wird, eines meiner Lieblingsfilmplakate von West Side Story entworfen zu haben – Bass hat die Titelsequenz entworfen – wurde das Plakat tatsächlich von Joseph Caroff entworfen, der auch James Bonds berühmtes 007-Logo entworfen hat.

Obwohl wir im Web noch nicht die gleiche Kontrolle über die Typografie haben wie im Druck, haben neue Dateiformate, Font-Lieferservices und Web-Fonts weitaus mehr typografische Flexibilität gebracht als noch vor zehn Jahren. Typografie-Steuerelemente in CSS haben uns auch dabei geholfen, kreativer mit Schrift umzugehen. Zusätzlich zu den grundlegenden Schriftstileigenschaften können wir jetzt OpenType-Figuren, Silbentrennung, Ligaturen und sogar Kerning zuverlässig optimieren.

Es ist selten, solche kreativen Verwendungsmöglichkeiten für Schrift online zu finden. Das Studium der Arbeit von Grafikdesignern und talentierten Typografen kann uns die Augen dafür öffnen, was wir mit den heutigen Schrifttechnologien erreichen können. Einer meiner persönlichen Lieblingsdesigner und Typografen ist Herb Lubalin, und das Kennenlernen von ihm und seiner Arbeit hat meine eigene Herangehensweise an Typografie verändert.

Inspiriert von Herb Lubalin

Herb Lubalin war ein amerikanischer Grafikdesigner, der seine Karriere damit verbrachte, alles zu entwerfen, von Werbung über Plakate bis hin zu Briefmarken. Er war fasziniert vom Aussehen von Wörtern und davon, wie typografisches Design sie zum Klingen bringen kann. Lubalin verstand, wie Grafikdesigner durch die Kombination von Kunst, Text und Typografie überzeugende Botschaften vermitteln. Er sagte:

„Je besser Menschen kommunizieren, desto größer wird der Bedarf an besserer Typografie – ausdrucksstarker Typografie.“

— Kräuter-Lubalin

Nachdem Herbert (Herb) Lubalin die Aufnahmeprüfung an der Kunstschule Cooper Union in New York nur knapp bestanden hatte, wurde er von seinem ersten Job als Grafiker gefeuert, weil er um eine Gehaltserhöhung von 2 Dollar pro Woche gebeten hatte. In den amerikanischen Werbeagenturen der Vorkriegszeit bestand die Aufgabe eines Layouters einfach darin, Schlagzeilen, Texte und Bilder in den verfügbaren Platz zu platzieren, aber das änderte sich nach dem Zweiten Weltkrieg mit einem Zustrom von eingewanderten Designern aus Europa. Dazu gehörten der Österreicher Herbert Bayer, der Russe Mehemed Fehmy Agha und der Weißrusse Alexey Brodovitch.

Diese Designer importierten neue Prozesse, die Art Direktoren, Layouter und Autoren zusammenbrachten, um die Kreativteams zu bilden, die in den 1960er und 1970er Jahren durch den berühmten Werbe-Kreativdirektor Bill Bernbach populär gemacht wurden.

1945 wurde Lubalin Art Director bei Sudler & Hennessey – einem auf die pharmazeutische Industrie spezialisierten Kreativstudio –, wo er ein Team von Designern, Illustratoren und Fotografen leitete. Faszinierend ist der Prozess, den Lubalin zunächst bei Sudler & Hennessey und ab 1964 in seinem eigenen Atelier etablierte. Er trieb den Designprozess voran, indem er „Taschentücher“ anfertigte – Federskizzen, die die räumliche Anordnung der Elemente festlegten – und detaillierte Notizen zu typografischen Designs machte, einschließlich der Auswahl von Schriftarten, Größen und Gewichten.

Zu Beginn jedes neuen Projekts begann Lubalin damit, Anordnungen von Schlagzeilen, Texten und Bildern auf Seidenpapier zu skizzieren. Dann legte er ein weiteres Taschentuch darauf, um seine Ideen zu verfeinern, dann noch eins und noch eins, um sein Design schnell zu entwickeln. Nachdem seine Assistenten weggeworfene Taschentücher vom Boden oder Müll geborgen hatten, wurden sie zu Sammlerstücken.

Lubalin war ein obsessiver Perfektionist in Bezug auf Typografie. Für „Let's talk type“ – eine Handelsanzeige für Sudler & Hennessey – platzierte Lubalin präzise den einzigen Absatz. Diese Kopie sitzt perfekt auf der Grundlinie neben dem Wort „let“, und ihre Größe und ihr Zeilenabstand ermöglichen die Unterlänge des Buchstabens „y“ oben.

Genauso präzise war Lubalin bei der Textplatzierung in einem Plakat, das den Avantgarde-Antikriegsplakatwettbewerb ankündigte. Er nahm häufig eine Skalpellklinge zum Tippen, passte den Abstand zwischen den Buchstaben an und änderte die Höhe der Ober- und Unterlängen, um sie an seine Entwürfe anzupassen. Die Buchstaben in der Überschrift für „No More War“ haben eine präzise Größe und Ausrichtung. Das Tracking des blauen Großbuchstabens standfirst erzeugt einen Textblock, der sich perfekt in seinen Raum einfügt.

In „Der vierte Juli bedeutet Picknicks …“ benutzte Lubalin die Perspektive, um den Weg nach vorn darzustellen. Dies bedeutete, dass jede Textzeile nachverfolgt und manchmal Wörter geändert werden mussten, um sie an das Design anzupassen. Die Arbeit mit Lubalins Entwürfen war nicht einfach, und wie einer seiner Assistenten später beschrieb:

„Um alles aufeinander abzustimmen, müssen Sie es immer und immer wieder tun, und wenn der Kunde den Text ändert, müssen Sie das Ganze wiederholen. Für ihn (Lubalin) war es das wert. Wie lange es dauerte oder wie viel es kostete, war ihm nicht so wichtig wie anderen Designern.“

Aufgrund seiner unermüdlichen Überzeugung und seines Talents wurde Lubalin zu einem der berühmtesten Grafikdesigner und Typografen des 20. Jahrhunderts. Wir können viel von seiner Herangehensweise an seine Arbeit und seiner Überzeugung lernen, dass Design überzeugend kommunizieren kann.

Es gibt zwei Bücher über Herb Lubalin und seine Arbeit, die Sie Ihrer Sammlung hinzufügen sollten. „Herb Lubalin: Art Director, Graphic Designer and Typographer“ (1985) von Gertrude Snyder und Alan Peckolick ist vergriffen, aber gute Exemplare sind bei eBay erhältlich. Noch besser ist „Herb Lubalin: American Graphic Designer“ (2013) von Adrian Shaughnessy, herausgegeben von Unit Editions. Shaughnessys Buch ist eine limitierte Auflage von 2000 und enthält Hunderte von Beispielen von Lubalins Arbeit.

Überschriften vorformatieren

Überschriften sind ein perfekter Ausgangspunkt, um abenteuerlustiger mit Schrift umzugehen. Ausdrucksstarke Typografie braucht keine ausgefallenen Schriftarten. Sie können eine auffällige Überschrift erstellen, indem Sie verschiedene Stile und Stärken verwenden, die in vielen alltäglichen Schriftfamilien zu finden sind. Suchen Sie nach Großfamilien wie Montserrat – entworfen von Julieta Ulanovsky und verfügbar bei Google Fonts – mit einer Vielzahl von Schriftstärken, die von dünn und leicht bis zu extra fett und sogar schwarz reichen.

Für dieses erste von Herb Lubalin inspirierte Design verwendet meine Überschrift schwarze und leichte Gewichte dieser serifenlosen Schrift. Negative Laufweite (Buchstabenabstand) und enger Zeilenabstand (Zeilenhöhe) ergeben zusammen einen Schriftblock, der Aufmerksamkeit erfordert.

In der Vergangenheit mussten Sie bei der Entwicklung solcher Überschriften das Design fest in Ihren HTML-Code codieren, indem Sie Umbrüche zwischen einzelnen Wörtern hinzufügen, wie hier:

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

In anderen Fällen können Sie jedes Wort mit einem Inline-Span-Element umbrechen und dann seine Anzeigeeigenschaft in Block ändern:

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

Anstelle dieser Präsentationselemente füge ich explizite Zeilenumbrüche in meinen HTML-Code ein:

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

Browser ignorieren mehr als ein einzelnes Leerzeichen zwischen Wörtern, daher liest sich diese Überschrift in kleinen Darstellungsbereichen wie ein Satz. Ich brauche nur Grundstile, die ihre Farben, Größe und Gewichte stylen, sowie das negative Tracking und den engen Zeilenabstand, die diese Überschrift unverwechselbar machen:

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

Während das pre-Element von HTML vorformatierten Text respektiert und ihn genau so darstellt, wie er in einem Dokument geschrieben ist, ermöglicht die CSS-Eigenschaft white-space ähnliche Ergebnisse, ohne die Semantik zu opfern. Von den sechs verfügbaren Leerraumwerten sind dies die vier, die ich am häufigsten verwende:

1. white-space: normal;
   Text füllt Zeilenfelder und bricht wie erforderlich
2. white-space: nowrap;
   Der Text wird nicht umgebrochen und kann seinen Container überlaufen lassen
3. white-space: pre;
   Explizite Zeilenumbrüche werden berücksichtigt, Textumbrüche mit neuen Zeilen und br-Elementen
4. white-space: pre-wrap;
   Leerzeichen werden respektiert, aber der Text wird auch umgebrochen, um Zeilenfelder zu füllen

Ich benötige die Effekte der white-space Eigenschaft nur in größeren Ansichtsfenstern, also isoliere ich sie mit einer Medienabfrage:

 @media (min-width: 64em) { h1 { white-space: pre; } }

Die Verwendung mehrerer Stile aus einer Schriftfamilie erhöht das visuelle Interesse. Mein von Lubalin inspiriertes Design umfasst leichte, fette und schwarze Strichstärken sowie verdichtete und regelmäßige Stile dieser serifenlosen Schrift, um eine Vielzahl von Textbehandlungen zu erzeugen.

Zuerst brauche ich zwei Strukturelemente, um mein Design zu verwirklichen, Haupt- und Nebenelement:

 <main>…</main> <aside>…</aside>

Während das Hauptelement meine Überschrift und den Fließtext enthält, enthält das Nebenelement vier Bilder in einer Abteilung und fünf Artikel über Versionen des Klassikers Cortina:

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

Zuerst lege ich die Stile der Absätze in jedem meiner Artikel fest, indem ich Pseudo-Klassen-Selektoren verwende. Jeder Absatz verwendet eine andere Kombination von Schriftstilen und -stärken mit gemischten Groß- und Kleinbuchstaben:

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

Nachdem diese Grundstile für jede Bildschirmgröße vorhanden sind, führe ich das Layout für das Seitenelement ein, das auf mittelgroßen Bildschirmen sichtbar sein wird. Für Layouts wie dieses, bei denen sich Elemente nicht überlappen, verwende ich oft Raster-Vorlagen-Bereiche wegen ihrer Einfachheit. Dieses Design hat neun Gitterbereiche. Ich könnte diesen Bereichen zwar Namen geben, die den Inhalt beschreiben, den ich darin platzieren werde – zum Beispiel „mark-1“ – stattdessen verwende ich Buchstaben, die das Verschieben von Elementen in meinem Raster ein wenig einfacher machen:

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

Ich muss die vier Bilder in meine Vorlagenbereiche einfügen und nicht in die Abteilung, die sie enthält. Ich ändere die Anzeigeeigenschaft dieses Elements in Inhalt, wodurch es effektiv aus dem DOM für Styling-Zwecke entfernt wird:

 aside div { display: contents; }

Ich platziere diese Bilder mit Bereichsnamen. Wenn Sie sie in einen anderen Bereich verschieben, müssen Sie nur auf einen anderen Bereichsnamen verweisen und ihre Reihenfolge in meinem HTML nicht ändern:

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

Dann platziere ich Artikel in den fünf verbleibenden Bereichen, um mein Layout zu vervollständigen:

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

Auf kleinen und mittelgroßen Bildschirmen stapeln sich die Haupt- und Nebenelemente vertikal in der Reihenfolge, in der sie in meinem HTML erscheinen. Der zusätzliche Platz, der in größeren Ansichtsfenstern verfügbar ist, ermöglicht es mir, sie nebeneinander zu platzieren, sodass das visuelle Gewicht auf beiden Seiten eines Bildschirms ausgeglichen ist. Zuerst wende ich ein fünfspaltiges symmetrisches Gitter auf das Körperelement an:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

Dann platziere ich sowohl Haupt- als auch Nebenelemente mit Zeilennummern. Dadurch entsteht ein asymmetrisches Design mit einer weißen Spalte zwischen meinem Hauptinhalt und den Artikeln, die ihn unterstützen:

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

Neuordnen und Rotieren

CSS Grid ist jetzt das beste Werkzeug für die Implementierung inspirierter Layouts, und seine leistungsstarken Eigenschaften sind auch nützlich für die Entwicklung komplizierter typografischer Designs.

Meine Überschrift enthält eine Überschrift, gefolgt von zwei Absätzen, und ihre Reihenfolge in HTML bedeutet, dass sie sinnvoll sind, wenn sie ohne angewendetes Styling gelesen werden:

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

Um mit diesem Design zu beginnen, füge ich Grundstile für beide Elemente hinzu und lege ihre Ausrichtung, Farben und Größen fest:

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

Ich habe meinen HTML-Code für eine semantische Satzstruktur und nicht für eine visuelle Präsentation angeordnet. Damit ich die Elemente visuell neu anordnen kann, füge ich Flexbox-Eigenschaften zu meiner Kopfzeile und einen Flex-Richtungswert für die Spalte hinzu:

 header { display: flex; flex-direction: column; }

Standardmäßig erscheinen Elemente in der Reihenfolge, in der sie in HTML vorkommen, aber in meinem Design erscheint der letzte Absatz in dieser Überschrift zuerst, über der Überschrift.

Der Standardreihenfolgewert für alle Elemente ist 0. Um also die Position dieses Absatzes zu ändern, ohne meinen HTML-Code zu ändern, füge ich einen negativen Wert von -1 hinzu, wodurch er ganz oben platziert wird:

 header p:last-of-type { order: -1; }

Mein Design für mittelgroße Bildschirme enthält zwei große Bänder mit Hintergrundfarben, die mit einem CSS-Verlauf entwickelt wurden. Als Nächstes ändere ich also die Vordergrundfarben meiner Überschrift und meiner Absätze, um sie von diesem neuen Hintergrund abzuheben:

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

Die ungewöhnliche Anordnung der drei Elemente in diesem Header ist durch die Kombination von CSS Grid mit Flexbox möglich. Obwohl es auf den ersten Blick nicht offensichtlich ist, platziere ich die Überschrift und die Absätze in dieser Überschrift auf einem vierspaltigen symmetrischen Raster. Wenn Sie eine Spalte in der ersten und letzten Zeile leer lassen, entsteht eine dynamische Diagonale, die diese Überschrift interessanter macht:

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

Meine Überschrift erstreckt sich über alle vier Spalten:

 header h1 { grid-column: 1 / -1; }

Während die erste – die unten in meiner Kopfzeile erscheint – die erste Spalte leer lässt:

 header p:first-of-type { grid-column: 2 / -1; }

Der letzte Absatz – jetzt oben in der Kopfzeile platziert – erstreckt sich über die ersten drei Spalten und lässt links ein Leerzeichen:

 header p:last-of-type { grid-column: 1 / 4; }

Es ist ungewöhnlich, gedrehte Textelemente im Web zu sehen, aber wenn Sie dies tun, bleiben sie oft in Erinnerung und sind immer eine schöne Überraschung. Ich möchte, dass meine Überschrift gegen den Uhrzeigersinn gedreht wird, also füge ich eine Transformation hinzu, die sie um 30 Grad negativ dreht und vertikal um 150 Pixel nach unten verschiebt:

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin gibt den Punkt an, um den Transformationen stattfinden. Sie können einen Ursprung in der Mitte oder an einer der vier Ecken eines Elements auswählen – top-left (0 0) , top-right (100% 0) , bottom-right (100% 100%) oder bottom-left (0 100%) . Sie können einen Ursprung auch in Pixeln, em- oder rem-Einheiten angeben.

Für ein zusätzliches Überraschungselement füge ich dieser Transformation einen subtilen Übergang hinzu und reduziere die Rotation, wenn jemand mit dem Mauszeiger über meine Überschrift fährt:

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

Kombinieren von Header-Elementen

In meinem nächsten von Lubalin inspirierten Design kombiniere ich eine geordnete Liste von Cortina-Modellen mit einer mehrfarbigen Überschrift, um mit dieser Überschrift ein starkes Statement abzugeben:

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

Diese Überschrift umfasst drei Textzeilen. Während ich zuvor die Verwendung zusätzlicher Elemente vermieden habe, benötige ich drei Inline-Span-Elemente, um diese Zeilen anders zu gestalten:

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

Die semantischste Wahl, um meine Liste der Cortina-Modelle und die Jahre, in denen sie hergestellt wurden, zu kennzeichnen, ist eine geordnete Liste. Um jeden Modellnamen stark hervorzuheben, schließe ich sie in starke Elemente ein, die einen semantischen Wert sowie ein fettes Erscheinungsbild von Standardbrowserstilen liefern:

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

Für kleine Ansichtsfenster benötige ich nur wenige Grundstile. Die große Schriftgröße und der minimale Zeilenabstand erzeugen einen soliden Textblock. Dann ändere ich den Anzeigewert des Span-Elements von Inline zu Block und verwende Pseudo-Klassen-Selektoren, um die Vordergrundfarben der ersten und dritten Zeile zu ändern:

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

Ich möchte, dass Elemente in meiner geordneten Liste ein zweispaltiges symmetrisches Raster bilden, in dem jede Spalte die gleiche Menge an verfügbarem Platz einnimmt:

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

Dann ziehe ich den Zeilenabstand der Elemente zusammen und füge einen durchgehenden blauen Rand am Ende aller Listenelemente außer dem letzten hinzu:

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

Praktischerweise ist es nicht erforderlich, Spalten- oder Zeilennummern für jedes Listenelement anzugeben, da CSS Grid sie aufgrund des normalen Flusses automatisch anordnet. Um dies stärker hervorzuheben, ändere ich die Anzeigewerte der starken Elemente in Block und setze sie in Großbuchstaben:

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

Das horizontale und vertikale Zentrieren eines Elements war früher schwierig, aber zum Glück hat Flexbox diese Ausrichtung trivial gemacht. Flexbox hat zwei Achsen – Hauptachse und Querachse – die die Richtung ändern, wenn Sie den Standardwert für die Flex-Richtung einer Zeile ändern.

Die Flex-Richtung meiner Kopfzeile bleibt Zeile, also richte ich Elemente auf der Querachse (vertikal) aus und richte dann den Inhalt auf der Hauptachse aus (horizontal:)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

Mit Inhalt, der jetzt in die Kopfzeile eingegeben wird, wende ich ein Raster an, das drei Spalten und zwei Zeilen enthält. Ihre Abmessungen werden durch ihren Inhalt definiert und automatisch angepasst:

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

Die drei mehrfarbigen Linien in der Überschrift bilden die Grundlage für dieses Header-Design. Ich möchte sie in diesem Raster in bestimmten Spalten und Zeilen platzieren, also füge ich display: contents; zur Überschrift:

 h1 { display: contents; }

Dann platziere ich diesen mehrfarbigen Text mit Zeilennummern in Spalten und Zeilen:

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

Ich möchte, dass der Text in meiner Kopfzeile vertikal angezeigt wird, also drehe ich jede Spanne im Uhrzeigersinn um 180 Grad und ändere dann ihren Schreibmodus auf vertikal von links nach rechts:

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

Die Überschrift und die geordnete Liste in meinem Design bilden einen festen Block. Um diese Elemente eng zusammenzupacken, ändere ich die Anzeigeeigenschaft der Liste von Raster zu Block. Dann richte ich den Inhalt in jedem Listenelement rechts aus, sodass sie auf der Grundlinie meiner Überschrift stehen:

 ol { display: block; } li { text-align: right; }

SVG und Text

Ich habe lange gebraucht, um SVG zu schätzen und mich damit vertraut zu machen, wie man das Beste daraus macht, und ich lerne immer noch. SVG ist in der Lage, weit mehr als einfache Formen zu erzeugen, und eines seiner aufregendsten Features ist das Textelement.

Wie HTML-Text ist auch SVG-Text zugänglich und auswählbar. Es ist auch unendlich gestaltbar, indem es Beschneidungspfade, Füllungen einschließlich Farbverläufe, Filter, Masken und Striche verwendet. Das Hinzufügen von Text zu SVG ist genauso wie das Einfügen in HTML, indem das Textelement verwendet wird. Nur Inhalte innerhalb dieser Textelemente werden von Browsern gerendert und sie ignorieren alles außerhalb. Sie können beliebig viele Textelemente hinzufügen, aber meine nächste Überschrift benötigt nur eines:

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG enthält eine Reihe von Eigenschaften und Attributwerten, die auf Text angewendet werden können. Viele SVG-Eigenschaften – wie Buchstaben- und Wortabstände und Textdekoration – sind auch in CSS enthalten. Aber seine Gestaltungsfunktionen, die einzigartig für SVG sind, tragen dazu bei, SVG-Text so ansprechend zu machen.

Beispielsweise legt textLength die Breite des gerenderten Textes fest, der je nach gewähltem lengthAdjust-Wert schrumpft und gedehnt wird, um den Raum auszufüllen.

• textLength
  Der Text wird passend skaliert. Stellen Sie textLength in Prozent ein oder verwenden Sie beliebige Zahlenwerte. Ich bevorzuge textbasierte Einheiten, em oder rem.
• lengthAdjust
  Definiert, wie der Text gestaucht oder gedehnt wird, damit er auf die im textLength-Attribut definierte Breite passt.

Bei direkter Verwendung auf einem Textelement verhalten sich SVG-Eigenschaften genauso wie Inline-Stile:

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

Aber genau wie bei Inline-Stilen wird der beste Wert erzielt, indem SVG-Elemente mithilfe von CSS gestaltet werden, sei es in einem externen Stylesheet oder eingebettet in HTML. Sie können sogar ein Stilelement in einer externen SVG-Datei oder einem SVG-Block verwenden, der neben HTML enthalten ist:

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML hat sein span-Element und SVG enthält ein ähnliches Element, das nützlich ist, um Text in kleinere Elemente zu unterteilen, damit sie einzigartig gestaltet werden können. Für diese Überschrift teile ich den Inhalt des Textelements auf sechs tspan Elemente auf:

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

Indem ich meine Überschrift in mehrere Elemente aufteile, kann ich jedes einzelne Wort gestalten. Ich kann sie sogar genau in meinem SVG positionieren, entsprechend der Grundlinie oder sogar relativ zueinander.

• x ist der horizontale Startpunkt für die Textgrundlinie;
• y ist der vertikale Startpunkt für die Textgrundlinie;
• dx verschiebt Text horizontal von einem vorherigen Element;
• dy verschiebt Text vertikal von einem früheren Element.

Für meine Überschrift positioniere ich das erste tspan-Element 80 Pixel von oben, dann erscheint jedes nachfolgende Element 80 Pixel darunter:

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

tspan Elemente sind nützlich für die präzise Positionierung und individuelles Styling, aber sie sind nicht ohne Bedenken hinsichtlich der Barrierefreiheit. Hilfstechnologien sprechen tspan-Elemente als einzelne Wörter aus und buchstabieren sie sogar, wenn ein tspan einen einzelnen Buchstaben umschließt. Ein Screenreader spricht beispielsweise diese Reihe von tspan Elementen aus:

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

Als:

„C“, „o“, „r“, „t“, „i“, „n“, „a“

Wir sollten Menschen, die Hilfstechnologien verwenden, keine Unannehmlichkeiten bereiten oder, schlimmer noch, unsere Inhalte aufgrund unserer Styling-Entscheidungen unzugänglich machen. Vermeiden Sie also die Verwendung von tspan unnötig und niemals für einzelne Buchstaben.

Streichen von Text mit CSS und SVG

Das Hinzufügen eines Strichs verbessert oft die Lesbarkeit, wenn Text vor einem Hintergrundbild platziert wird, und kann auch subtile und auffällige Ergebnisse erzielen. Sie werden in keiner CSS-Spezifikation eine offizielle Möglichkeit finden, Text zu streichen. Es gibt jedoch eine experimentelle Eigenschaft, die ein Webkit-Anbieterpräfix verwendet und von modernen Browsern weitgehend unterstützt wird.

text-stroke ist eine Abkürzung für zwei Eigenschaften: text-stroke-color und text-stroke-width . Für meine gestrichelte Überschrift lege ich zuerst grundlegende Typografiestile für family , size und weight fest und passe dann den Zeilenabstand und die Laufweite an:

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

Dann wende ich text-stroke an und füge die text-fill-color property mit einem Wert von transparent hinzu, der die weiße Vordergrundfarbe überschreibt:

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

Obwohl text-stroke eine experimentelle Eigenschaft ist und nicht in einer W3C-Spezifikation enthalten ist, besteht jetzt, da Browser sie implementiert haben, kaum eine Chance, dass sie entfernt wird. Wenn Sie jedoch immer noch Bedenken haben, einen älteren Browser zu unterstützen, sollten Sie eine Funktionsabfrage verwenden, um die Unterstützung von text-stroke zu testen und einen geeigneten Fallback für sie bereitzustellen.

SVG hat auch stroke sowie einige Optionen, die in CSS nicht verfügbar sind. Wenn Sie mehr Optionen und die umfassendste Browserunterstützung benötigen, ist SVG die Antwort. Mein SVG-Header enthält sechs tspan Elemente:

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

Zusätzlich zu den grundlegenden Typografiestilen füge ich die entsprechenden SVG-Eigenschaften für text-stroke-color und text-stroke-width hinzu. Ich reduziere auch die Deckkraft meines Strichs, eine Option, die in CSS nicht verfügbar ist:

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG enthält andere Eigenschaften, die Aspekte eines Strichs fein abstimmen. Im Gegensatz zu CSS können SVG-Striche mit der Eigenschaft stroke-dasharray gestrichelt werden. Alternative Werte definieren gefüllte Bereiche und leere Bereiche, sodass die Bindestriche um meinen Überschriftentext eine Einheit gefüllt und dann zehn Einheiten leer sind:

 text { stroke-dasharray: 1, 10; }

Wenn Sie komplexere Muster benötigen, fügen Sie dem Muster zusätzliche Zahlen hinzu, sodass ein Strich-Dasharray-Wert von 1, 10, 1 zu einem gestrichelten Strich führt, der 1 (gefüllt) 10 (leer) 1 (gefüllt) 1 ( leer,) 10 (gefüllt,) 1 (leer,) und Wiederholungen.

Optimieren Sie die Zugänglichkeit von SVG

CSS-Typografie-Steuerelemente sind jetzt leistungsfähiger als je zuvor, aber es gibt Gelegenheiten, in denen ein Design mehr als nur formatierten HTML-Text erfordert. Techniken zum Ersetzen von Bildern sind aus der Mode gekommen, aber SVG – ob in einer externen Datei oder inline in HTML – kann skalierbare Texteffekte liefern. SVG kann auch für die Gesamtleistung nützlich sein, wenn es gut optimiert und zugänglich gemacht werden kann.

Dieser Header enthält zwei Schriftarten. Eine davon ist Magehand, eine dekorative Schrift im Retro-Stil des indonesischen Schriftdesigners Arief Setyo Wahyudi. Die andere ist Mokoko, eine Slab Serif von Dalton Maag aus London, die in sieben Strichstärken von dünn bis schwarz erhältlich ist.

Das Einbetten dieser beiden Schriftarten sowohl in das Web Open Font Format (WOFF) als auch in das WOFF2-Format würde meiner Seite über 150 KB hinzufügen. Wenn Sie diese Schriftarten in einem Grafikeditor in Konturen konvertieren und den Header als optimiertes SVG-Bild bereitstellen, werden nur 17 KB hinzugefügt.

Das SVG-Bild in meinem Header enthält drei Pfade:

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

Die Reihenfolge dieser Pfade ist wichtig, da Elemente wie in HTML in der Reihenfolge gestapelt werden, in der sie geschrieben wurden. SVG enthält eine Reihe von Eigenschaften und Attributwerten, die auf jedes Element angewendet werden können. Ich verwende die Fill-Eigenschaft, um jeden Pfad in meiner Kopfzeile einzufärben:

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

Für einen noch stilvolleren Effekt kann ich einen linearen Verlauf mit zwei Farbstopps definieren und darauf verweisen, um mein dekoratives Skript zu füllen:

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

SVG-Dateien sind häufig kleiner als Bitmap-Bilder oder die kombinierte Größe mehrerer Schriftartdateien, müssen jedoch sorgfältig optimiert werden, um die beste Leistung zu erzielen.

Jedes Element, jeder Griff und jeder Knoten erhöht die Größe einer SVG-Datei, ersetzen Sie Pfade also nach Möglichkeit durch einfache Formen wie Kreise, Ellipsen oder Rechtecke. Vereinfachen Sie Kurven, um die Anzahl der Knoten zu reduzieren und weniger Griffe zu verwenden. Beliebte Grafiksoftware wie Adobe Illustrator, Affinity Designer und Sketch exportieren Dateien, die durch nicht optimierte Elemente und unnötige Metadaten aufgebläht sind. Tools wie SVGOMG des Entwicklers Jake Archibald entfernen jedoch nicht benötigte Elemente und können die SVG-Dateigröße oft erheblich reduzieren.

SVG-Bilder, die Textumrisse enthalten, können auch zugänglich gemacht werden, indem alternativer Text und ARIA-Eigenschaften verwendet werden. Wenn Sie auf eine externe SVG-Datei verlinken, fügen Sie alternativen Text hinzu, wie Sie es bei jedem nicht dekorativen Bild tun sollten:

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

Der beste Weg, Menschen zu helfen, die Hilfstechnologien verwenden, besteht darin, SVG in HTML einzubetten. Fügen Sie eine ARIA-Rolle und ein beschreibendes Label hinzu, und Screenreader behandeln das SVG als einzelnes Element und lesen die Label-Beschreibung laut vor:

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

Das Hinzufügen eines Titelelements hilft der Hilfstechnologie, den Unterschied zwischen mehreren SVG-Blöcken zu verstehen, aber dieser Titel wird nicht in einem Browser angezeigt:

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

Wenn ein Dokument mehrere SVG-Blöcke enthält, geben Sie jedem eine eindeutige ID und fügen Sie diese dem Titel hinzu:

 <svg> <title>…</title> </svg>

ARIA hat mehrere Attribute, die die Zugänglichkeit von SVG unterstützen. Wenn SVG rein dekorativ ist und keinen semantischen Wert hat, verbergen Sie es vor Hilfstechnologien, indem Sie ein aria-hidden Attribut hinzufügen:

 <svg aria-hidden="true"> … </svg>

Für mein Design verwende ich SVG anstelle einer HTML-Überschrift. Um die fehlende Semantik für Hilfstechnologien zu ersetzen, verwenden Sie ein ARIA-Rollenattribut und einen Wert für Überschrift. Fügen Sie dann ein Ebenenattribut hinzu, das dem fehlenden HTML entspricht:

 <svg role="heading" aria-level="1"> … </svg>

Clipping-Typ

Die CSS-Eigenschaft background-clip definiert, ob sich der Hintergrund eines Elements gemäß dem CSS-Box-Modell unter seiner border-box , padding-box oder content-box erstreckt:

• border-box
  Der Hintergrund erstreckt sich bis zur Außenkante des Rahmens (und unterhalb des Rahmens).
• padding-box
  Der Hintergrund erstreckt sich nur bis zur Außenkante der Polsterung.
• content-box
  Der Hintergrund wird nur innerhalb der Inhaltsbox gerendert (auf diese zugeschnitten).

Aber es gibt noch einen weiteren Wert, der viel mehr Möglichkeiten für inspirierende Typografie bietet. Text als Wert für background-clip verwenden beschneidet den Hintergrund eines Elements auf den Platz, der von dem darin enthaltenen Text eingenommen wird.

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

Da dieses SVG-Bild eine Überschrift darstellt, füge ich alternativen Text sowie eine ARIA-Rolle und -Ebene hinzu, um sicherzustellen, dass es zugänglich bleibt:

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

In SVG speichert das defs-Element grafische Objekte, auf die an anderer Stelle in einer Datei verwiesen werden kann. Dazu gehören die Muster, die meine Bilder enthalten, und ich füge für jeden Buchstaben eines hinzu:

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

Der Inhalt im defs-Element wird nicht direkt gerendert und um ihn anzuzeigen, verweise ich entweder mit einem use-Attribut oder einer URL darauf. Mein SVG enthält einen Pfad für jeden der sieben Buchstaben im Wort „Cortina“, und ich fülle jeden Pfad mit einem Muster unter Verwendung seiner eindeutigen ID:

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

Bildelemente ermöglichen das Rendern von Bitmap- oder Vektorbildern innerhalb eines SVG. Mein Design enthält drei Blaupausenbilder für Autoteile, die ich mit einem Standard-Href-Attribut verlinke:

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

Diese drei Musterbilder von Autoteilen füllen jeden Buchstaben aus, und das Ergebnis ist ein auffälliges Design für die Überschrift, das Aufmerksamkeit erfordert.

Techniken kombinieren

Es besteht kein Zweifel, dass Herb Lubin eine meisterhafte Fähigkeit hatte, Typen zum Sprechen zu bringen. Für dieses letzte von Lubin inspirierte Beispiel habe ich die Techniken zusammengestellt, die ich demonstriert habe, um ein überzeugendes Design für diesen klassischen Ford der 70er Jahre zu schaffen.

Um dieses Design zu entwickeln, benötige ich zwei Strukturelemente, die mir inzwischen sehr vertraut sein sollten, ein Haupt- und ein Nebenelement:

 <main>…</main> <aside>…</aside>

Mein Hauptelement enthält ein Header-Element mit einer SVG-Überschrift, gefolgt von einer Division, die meinen Fließtext enthält. Ich füge meiner Überschrift eine ARIA-Rolle und -Ebene hinzu, um sicherzustellen, dass der SVG-Text zugänglich ist:

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

Um ein vollständiges Bild auf kleinen Bildschirmen und halbe bis größere Ansichtsfenster bereitzustellen, verwende ich ein Bildelement und eine Medienabfrage mit minimaler Breite:

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

Lubalins Designs sind oft energisch, um mein Hauptelement mit Energie zu füllen, wende ich Gittereigenschaften an und verwende drei Spalten und fünf Reihen, um ein asymmetrisches Layout zu entwickeln.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

Dieses Design wird von einem Umriss der charismatischen Cortina und einem textbasierten Hintergrundbild dominiert, das das Hauptelement verdeckt. Ich skaliere dieses SVG so, dass es den Hintergrund des Elements ausfüllt, und ändere den Hintergrundursprung so, dass es nur hinter dem Inhalt und nicht seinem Rand oder seiner Füllung erscheint:

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

Wenn ich Spalten um meine Kopfzeile und Textteilung herum leer lasse, entsteht ein negativer Raum, der dazu beiträgt, den Blick von jemandem auf die Komposition zu lenken. Die Kopfzeile belegt die ersten beiden meiner drei Spalten, während die Division die letzten beiden ausfüllt:

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

Einer der Vorteile der Verwendung des SVG-Textelements ist die Möglichkeit, Text gemäß seiner Grundlinie oder relativ zu den einzelnen Elementen zu positionieren. Meine SVG-Überschrift enthält zwei Textelemente für den Namen dieses Autos und ein drittes für den Zeitraum, in dem es hergestellt wurde. Ich möchte dieses letzte Textelement genau 250 Pixel von links und 60 Pixel von oben in meinem SVG platzieren:

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

Dieses schillernde Design wird in größeren Ansichtsfenstern einprägsamer, wenn das textbasierte SVG-Hintergrundbild und mein Cortina-Umriss nebeneinander passen. Ich wende ein zweispaltiges symmetrisches Gitter auf das Körperelement an:

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

Dann platziere ich die Haupt- und Nebenelemente mit Liniennamen in meinem Raster:

 main { grid-column: main; } aside { grid-column: aside; } }

Im Web sollte inspirierende Typografie attraktiv und lesbar sein, aber die Lesbarkeit von Fließtext kann leicht durch den dahinter stehenden Hintergrund beeinträchtigt werden.

Der Hintergrundfilter wendet CSS-Filtereffekte auf Elemente hinter dem Text an. Diese Filter umfassen Unschärfe, Helligkeit und Kontrast sowie Farbeffekte, die alle dazu beitragen können, den laufenden Text vor Hintergrundbildern, Grafiken oder Mustern besser lesbar zu machen.

Wenden Sie einen oder mehrere Filter mit derselben CSS-Filtersyntax an, die ich in einer früheren Ausgabe demonstriert habe:

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter ist Teil der Filter Effects Module Level 2-Spezifikation. Es hat bereits eine solide Unterstützung in modernen Browsern, obwohl einige immer noch das Webkit-Vendor-Präfix benötigen:

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

Lesen Sie mehr aus der Serie

• Inspirierte Designentscheidungen: Avaunt Magazine
• Inspirierte Designentscheidungen: Dringende Angelegenheiten
• Inspirierte Designentscheidungen: Ernest Journal
• Inspirierte Designentscheidungen: Alexey Brodovitch
• Inspirierte Designentscheidungen: Bea Feitler
• Inspirierte Designentscheidungen: Neville Brody
• Inspirierte Designentscheidungen: Otto Storch
• Inspirierte Designentscheidungen: Max Huber
• Inspirierte Designentscheidungen: Giovanni Pintori
• Inspirierte Designentscheidungen: Emmett McBain
• Inspirierte Designentscheidungen: Bradbury Thompson

NB: Smashing-Mitglieder Smashing-Mitglieder haben Zugriff auf ein wunderschön gestaltetes PDF des Magazins Andy's Inspired Design Decisions und vollständige Codebeispiele aus diesem Artikel. Sie können das PDF und die Beispiele dieser Ausgabe sowie alle anderen Ausgaben direkt auf Andys Website kaufen.