typografische-webdesign-highlights

Akzente zu setzen mit Farben und Bildern kann jeder.

Ok, fast jeder. Aber darum soll es hier nicht gehen. Sondern um die Typografie, die Schriftgestaltung. Darum mit Texten Akzente zu setzen.

Die Gestaltung des Textes ist ein elementares Element für eine effektive Webseite. Dies beginnt zuerst bei der Wahl der richtigen Schriftarten.

Dazu kommen dann passende Textfarben, Schriftgrößen, Zeilenlängen- und abstände. Fertig. Fertig? Nicht ganz. Denn jetzt kommt die hohe Kunst der Typografie!

Die kleinen Auszeichnungen. Die feinen typografischen Markierungen.

Die detaillierten Textgestaltungen, die vielleicht auch ein gutes Design von einem sehr guten unterscheiden.

Man könnte sie als Teil der Mikrotypografie bezeichnen, also als Detailtypografie.

Im folgenden stelle ich 10 unterschiedliche typografische Highlights vor, die jede Seite auflockern und typografisch verfeinern. Diese sorgen dafür, dass das Benutzungserlebnis erhöht wird.

Die meisten sind kein Hexenwerk und keine hoch trabende technische Wissenschaft, sondern lassen sich recht einfach mit wenigen HTML- & CSS-Anweisungen umsetzen. Sie alle sorgen aber für die besondere typografische Gestaltung, sie alle können den kleinen Unterschied ausmachen.

Mehr Raum gewinnen – Zeichenabstand

Weißraum, wir brauchen mehr Weißraum.

Erste Designerregel beim Gestalten ist der Einsatz von Weißraum. Hierdurch lassen sich Hierarchien schaffen und Elemente zu Gruppen ordnen.

Es gibt aber noch eine weitere Möglichkeit durch Weißraum typografische Spannung zu erzeugen: Den Abstand zwischen Buchstaben verändern. Die Umsetzung ist ganz simpel mit der CSS-Anweisung letter-spacing.

Während in der Printtypografie die Abstände zwischen einzelnen Buchstabenpaaren schon mal per Hand fein justiert werden, ist dies im Webbereich aus Gründen eher nicht möglich, bzw. besser gesagt ungünstig, da man selber die Darstellung beim Betrachter nie ganz unter Kontrolle hat (anders als bei Printpublikationen).

Oberstes Typografie-Gebot ist ja die Lesbarkeit. Eine (größere) Veränderung des Buchstabenabstandes verbessert diese eher nicht. Daher sollte man letter-spacing mit Feingefühl anwenden. Zum Beispiel, um bei Überschriften Spannung zu erzeugen. Hier eignen sich dann eher sehr kurze Headlines als längere. Auch für den Header-Bereich oder kurze Teaser eignet sich diese Methode gut wie die folgenden Beispiele zeigen:

groovemade

place

Die Bearbeitung des Buchstabenabstandes ist denkbar einfach. Hier drei Beispiele, bei denen der Abstand immer weiter vergrößert wird. Die letzte Zeile zeigt das Wort mit dem normalen Buchstabenabstand, was auf einmal unpassend dicht beieinander wirkt.

letter-spacing
Zusammen mit Großbuchstaben (den sogenannten Kapitälchen) kann die Veränderung des Buchstabenabstandes ein nettes kleines Highlight sein.

Mehrfarbige Headlines

Headlines sind die typografischen Eyecatcher. Warum Sie nicht noch etwas mehr hervorheben und gestalterisch in Szene setzen mit mehreren Farben?

mehrfarbige-headline-webdesgin

mehrfarbige-headlines

Sicher, der Effekt sollte nicht übertrieben werden. Zu viel Farbe kann verwirren. Aber gezielt eingesetzt, lassen sich so innerhalb einer Headline noch Schwerpunkte setzen und die Spannung und der Kontrast erhöhen.

See the Pen Mehrfarbige Headline by Martin Hahn (@hahnsinn) on CodePen.

SVG-Headlines

Die typografischen Gestaltungsmöglichkeiten sind im Web nun mal (wesentlich) eingeschränkter als im Print-Bereich. Vor allem individuelle Anordnungen/Platzierungen sind nur schwer möglich. Hier eröffnen SVG-Grafiken den Gestaltungsspielraum.

Eine in Adobe Illustrator gestalteten Typo-Grafik wird als SVG-Datei abgespeichert. Wichtig ist, dass der Text als solcher belassen wird und NICHT in Pfade umgewandelt wird, wie es sonst gerne gemacht wird:

svg-webdesign

In der Frontend-Umsetzung sieht das dann folgendermaßen aus:

See the Pen obWRvJ by Martin Hahn (@hahnsinn) on CodePen.

Diese SVG-Grafik benötigt dann zum einen kaum Speicherplatz und sie ist beliebig skalierbar. Also ideal für ein responsives Webdesign. Und Der Text lässt sich auswählen und von Suchmaschinen indizieren.
Mehr zu dieser Methode gibt es im Artikel Creating a Web Type Lockup

Inverse Überschriften

Ein im Print-Bereich (Z.b. auf Magazin-Covers) gerne eingesetzter Effekt sind inverse Überschriften. Hier wird die Hintergrundfarbe-Textfarbe-Kombination einfach umgekehrt. So wie auf dieser Webseite:

inverse-headline-webdesign

Auf Webseiten lässt sich das mit Hilfe von CSS und den Anweisungen color und background-color ganz einfach umsetzen.

Bei Headlines (bzw. generell bei allen Block-Elementen) mag es etwas komplizierter sein, will man nicht, dass die Hintergrundfarbe sich über die volle Breite des Eltern-Elements erstreckt (meistens ein DIV-Container).

Hier kann man mit SPAN-Elementen innerhalb der Überschrift arbeiten und so einen hübsch aussehenden Effekt erzeugen:

See the Pen Inverser Text by Martin Hahn (@hahnsinn) on CodePen.

Andere mögliche Code-Umsetzungen finden sich im Artikel Markierte Headline in vielen Varianten.

Schatten-Effekte

Schatten werden gerne genommen, um Texte optisch vom Hintergrund abzuheben. Zum Beipsiel, wenn Headlines auf farbigen Bildern liegen. Mit der CSS-Eigenschaft text-shadow lassen sich so beispielsweise schöne weiche Schatten erzeugen.

Mit ein bisschen mehr CSS werden die Effekte dann noch markanter. Dies ist sicherlich nicht für alle Einsatzzwecke geeignet, aber für den Fall der Fälle gut zu wissen, wo es steht:

See the Pen Text-Shadow by Martin Hahn (@hahnsinn) on CodePen.

Und dann gibt es natürlich auch die Möglichkeit den Schatten in einer anderen Farbe zu gestalten. Etwas umfangreicher, dafür mit mehr Gestaltungsspielraum:

See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.

Besondere Unterstriche

Der normale Linkunterstrich text-decoration:underline ist Standard. Und genauso langweilig. Mit border-bottom kann man die Links wenigstens noch etwas individueller gestalten. Aber warum nicht mal ganz andere Arten von Unterstrichen?

Wie wäre es mit einer Grafik, die aussieht, als hätte man den Text mit einem Marker unterstrichen:

See the Pen Individueller Unterstrich by Martin Hahn (@hahnsinn) on CodePen.

Oder den Unterstrich einfach etwas dicker machen und halb unter den Text legen:

See the Pen Link Underline by Martin Hahn (@hahnsinn) on CodePen.

Ebenfalls einen netten individuellen Effekt zeigt sich in diesem CodePen. Ok, etwas umfangreicher, aber das ergebnis kann sich sehen lasen:

See the Pen Hilighter On The Page by Jeff Ballweg (@jeffballweg) on CodePen.

Überschrift über durchgestrichener Linie

Schon oft gesehen und häufig gefragt, wie dies umgesetzt wird? Im Grunde ist es nur ein kleiner netter Effekt. Statt eine Headline zu unterstreichen oder gar eine Trennlinie einzusetzen, wird die Überschrift mittig über eine Linie gesetzt. Mit Hilfe eines SPAN-Elements und den Pseudoelementen ::after und ::before dann gar nicht mehr so schwierig:

See the Pen Headline with a line behind by Jens Grochtdreis (@jensgro) on CodePen.

Ein weiteres Beispiel findest du im Artikel Überschrift über durchgestrichener Linie.

Kapitälchen am Anfang eines Absatzes

Auch im Printbereich schon ein alter Hut und gerade in Zeitungen und Magazinen gerne eingesetzt: Das Kapitälchen am Anfang eines Artikels.

Im Webdesign findet man diesen „Effekt“ sehr selten. Warum eigentlich? Die Umsetzung ist denkbar einfach mit mit dem Pseudoelement ::first-letter:

See the Pen Kapitälchen by Martin Hahn (@hahnsinn) on CodePen.

Inverse SVG-Maske

Mit SVG-Grafiken geht so einiges (siehe oben). Man kann diese auch als Maske einsetzen, ähnlich wie man es in Photoshop von Ebenenmasken her kennt. Für Headlines lassen sich damit aufmerksamkeitsstarke Effekte erzielen:

See the Pen PZmMgY by Martin Hahn (@hahnsinn) on CodePen.

Gedrehter Text

Es ist so simpel: Warum nicht Text einfach mal drehen? Klar, für Fließtexte denkbar ungeeignet, aber für kurze Überschriften, Kategorien usw. eine spannende Variante. Mit transform: rotate fast schon ein Kinderspiel:

See the Pen 90° Rotate by Martin Hahn (@hahnsinn) on CodePen.

Fazit

Nicht jedes vorgestellte typografische Highlight eignet sich für jedes Projekt. Um ehrlich zu sein, eignen sich wahrscheinlich nur die wenigsten. Aber es ist immer gut zu wissen, „was so geht“. Welche Möglichkeiten man als Webdesigner hat. Welche Gestaltungsvarianten noch möglich wären.

Denn ich bin überzeugt: Es kommt das Projekt, wo eine der Varianten brauchen und einsetzen wirst, um typografische Highlights zu setzen 😉

Oder was meinst du?
Oder hast du noch weitere spannende typografische Highlights, die wir unbedingt kennen lernen sollten? Dann lass uns unten in den Kommentaren wissen!

10 einfache Methoden für typografische Highlights
4.7225 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Hol Dir die Webdesign-Checkliste mit
90 Checkpunkten für Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog.
Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

9 Kommentare

  1. Hey Martin,

    klasse, das sind tolle Beispiele für gelungenen Einsatz von Typografie!
    Die kreativen Unterstreichungen werde ich mir auf jeden Fall merken und bei dem ein oder anderen Projekt umsetzen!

    Bei einer inversen SVG Maske hat man doch aber das Problem, dass das ganze kein Text ist, sondern eine Grafik, oder nicht?

    Grüße
    Jonas

    • Hallo Jonas,
      freut mich!
      Der Text bei der SVG-Maske-Maske ist keine Grafik, sondern… SVG :) …also Vektoren!
      Ganz simpel anzupassen: Einfach mal oben in den HTML-Quellcode schauen, habe mal spontan ein paar andere Buchstaben genommen 😉

      Gruss
      Martin

      • Hehehehe, der neue Text gefällt mir gut 😉
        Ich habe noch nie mit SVGs online gearbeitet, werde das aber definitiv mal beginnen. Danke für die Inspiration!

        Grüße
        Jonas

        • Immer gerne doch!

Trackbacks/Pingbacks

  1. 10 einfache Methoden für typografische Highlights - Freakinthecage Webdesign Stuttgart - Der Blog
  2. Lieblinks – Februar 2016 | Webtrends, TED-Videos, vertrauensvolle Maßnahmen, Content Marketing, WordPress-Themes
  3. Linklove #02 - Let's start something!
  4. Linklove #02 – TEST
  5. Fallstudie Webdesign – So einfach habe ich zwei Webdesigns optimiert - Webdesign Journal

Kommentar verfassen