10.7    Gelungene Webtypografie – Textformatierungen und Gestaltungstipps  

Die Grundlagen der Makro- und Mikrotypografie sind die Voraussetzung, um typografische anspruchsvolle Webseiten zu gestalten. Diese beiden Bereiche haben Sie bereits in den vorangegangenen Abschnitten kennengelernt. Im Folgenden geht es nun um einzelne inhaltliche Elemente und deren typografische Ausgestaltung. Die Formatierungsvorschläge bzw. Richtwerte beziehen sich vor allem auf Bildschirmgrößen ab 960 Pixel aufwärts. Bei kleineren Screens müssen diese entsprechend ausgetestet und angepasst werden.

 

10.7.1    Die Schriftauswahl 

So viele typografische Hinweise, Ratschläge, Beispiele und Möglichkeiten enden oder – je nachdem, wie man es sieht – beginnen mit der Frage: »Welche Schriftart nehme ich jetzt?«

Und die Antwort ist vermutlich klar: Es gibt keine erfüllende oder korrekte Antwort. Ein »Kommt drauf an« passt am ehesten. Vereinfacht gesprochen, kommt es auf zwei Faktoren an, die Lesbarkeit und die ästhetisch emotionale Wirkung. Vor allem Letzteres sollte das entscheidende Kriterium sein. Denn ich behaupte mal, für jede gewünschte Wirkung wird man auch eine passende Schriftart finden. Welche Wirkung soll das Design und die Typografie also vermitteln:

Soll es klassisch oder modern wirken? Elegant oder technisch? Verspielt oder zurückhaltend? Seriös oder unbekümmert? Dynamisch oder statisch? Laut und aggressiv oder eher anmutig?

Abbildung 10.85    Die Schriftart sollte die Aussage unterstützen. Die sehr plakativen Beispiele zeigen links einen Widerspruch und rechts eine übliche Assoziation.

Schriften nach ihrer Emotionalität auszuwählen ist Gefühlssache. Sie sollten die inhaltliche Aussage des Textes unterstreichen. Man wird aber kaum die eine Schriftart finden, die alle gewünschten Eigenschaften eindeutig vermittelt. Es ist wohl eher so, dass mehrere unterschiedliche Schriftarten passen würden, es somit dann eher auf den Einsatz und die genaue Ausgestaltung ankommt.

Wichtig ist, dass Schriftarten, die nicht nur als schmückendes Element eingesetzt werden sollen, sondern vor allem für den Fließtext verwendet werden, gut lesbar sind. Um eine gute Lesbarkeit zu erreichen, ist aber die Schriftart weniger bedeutend als gedacht. Vielmehr kommt es auf die Schriftgröße und den Zeilenabstand (dazu mehr in Abschnitt 10.5.4) an. Diese beiden Faktoren hängen dann natürlich von der Schriftart ab und sollten daher mit Bedacht individuell gestaltet werden.

Mit oder ohne Serifen  | Es hält sich die hartnäckige Meinung, dass sich für den Bildschirm serifenlose Schriften besser eignen als Schriften mit Serifen. Dies gilt, wenn überhaupt, vor allem für kleinen Text. 12-Pixel-Fließtext wird in der Verdana sicherlich besser lesbar sein als in Times New Roman. Mit größer werdender Schriftgröße wird der Unterschied aber immer kleiner.

Mit Serifen wirken Schriften eher anmutig und klassisch, während serifenlose eine eher technische Wirkung vermitteln. So gibt es immer wieder die klassische Auswahl: eine serifenlose für den Fließtext und eine Serifenschrift für die Überschriften.

Abbildung 10.86    Überschriften mit Serifen, Fließtext serifenlos, so wie bei avivre-consult.eu wird es häufig gemacht. Es geht aber auch andersherum.

Anzahl der Schriftarten | Braucht es überhaupt mehrere Schriftarten? Eigentlich nicht, wenn die erste Wahl gut war. Hat man eine Schrift gefunden, die vielseitig einsetzbar ist, also in einer geringen Größe genauso gut funktioniert wie im Titel und vielleicht auch noch in verschiedenen Schnitten (mehr zu den verschiedenen Schriftschnitten in Abschnitt 10.5.2) daherkommt, Glückwunsch! Dann braucht man eigentlich keine weitere Schriftart mehr.

Abbildung 10.87    Verschiedene Schnitte der Google-Fonts-Schrift Open Sans ermöglichen ein breites Spektrum an Formatierungen.

»Genauso ist das beim Schriftentwerfen: 95 % einer Schrift müssen sein wie alle anderen Schriften auch, sonst wirkt sie störend (ich rede natürlich nur von Textschriften).«
Eric Spiekermann, deutscher Typograf

Für Abwechslung und unterschiedliche gestalterische Anforderungen kann es aber auch hilfreich sein, mehr als eine Schriftart einzusetzen, also zwei! Denn mehr als zwei Schriftarten sollten schon sehr, sehr gut überlegt und begründet sein. Mehr als eine Schrift bringt die Herausforderung mit sich, dass die Schriftarten später nicht nur die gewünschte Wirkung transportieren, sondern vor allem auch miteinander harmonieren sollen. Zwei sehr markante Schriftarten schließen sich schon fast gegenseitig aus. Gerne wird daher eine auffälligere, »lautere« Schriftart für die Überschriften gewählt und eine klarere, dezentere für die Fließtexte.

Abbildung 10.88    Schönes Zusammenspiel aus unterschiedlichen Schriftarten bei withjack.co.uk

Schriftarten miteinander kombinieren | Wenn Sie eine passende Schriftart finden, die über mehrere Schriftschnitte verfügt, besteht eigentlich keine Notwendigkeit, noch weitere Schriftarten dazuzunehmen. Mit der Größe und verschiedenen Schnitten besteht meistens genug Gestaltungsspielraum. Sollen doch zwei Schriftarten gemischt werden, dann bieten sich Serifen- und serifenlose Schriften aus der gleichen Familie an. Diese sind aufeinander abgestimmt und harmonieren sehr gut.

Trial and Error – ein Ansatz, um passende Schriftmischungen zu finden

Abbildung 10.89    Zweimal gleiche Schriftfamilien: links die Droid Sans und Droid Serif der Google Fonts; rechts die FF Meta und FF Meta Serif von typekit

Wollen Sie doch zwei (oder gar mehr) ganz unterschiedliche Schriften mischen, dann gibt es verschiedene Wege. Sie können die Schriftarten aufgrund des Kontrastes und der Vielfalt auswählen. Zwei Schriftarten auszuwählen, die sich zu ähnlich sind, also z. B. aus der gleichen Schriftgruppe stammen, wirkt im Design eher störend. Abbildung 10.90 verdeutlicht dies: Eine Serifenschrift wie die Times New Roman kombiniert mit einer Nichtserifenschrift wie die Open Sans kann funktionieren. Bei zwei ähnlichen Serifenschriften (hier: Times New Roman und Georgia) wird es schon schwieriger, das Schriftbild wirkt nicht harmonisch.

Abbildung 10.90    Eine Serifen- mit einer Nichtserifenschrift kombiniert kann durchaus harmonisch wirken. Bei zwei ähnlichen Serifenschriften (unteres Beispiel) wird es schon schwieriger.

Abbildung 10.91    Auch spannend: ayakaito.com mischt die Schriftarten innerhalb des Überschriftentextes.

Systemschriften vs. Webfonts | Sicher, warum sollte man in Zeiten der breiten Webfonts-Auswahl überhaupt noch auf Systemschriften zurückgreifen? Na ja, es gibt zwei verdammt gute Argumente:

1. Systemschriften sind einfach für Schriftgrößen bis ca. 16 Pixel für die Bildschirmdarstellung optimiert, was man bei Weitem nicht von allen Webfonts behaupten kann. Also für Fließtext sind Systemschriften (sicher nicht alle) eine gute Wahl.

2. Und die Systemschriften müssen nicht extra geladen werden. Wer mehrere Webfonts mit mehreren Schnitten einsetzt, lädt ordentlich Datenmengen dazu und verursacht einige HTTP-Requests. Es sollte also gut überlegt sein.

Schriftklassiker wie Helvetica oder Times New Roman sind durch ihre extrem häufige Verwendung sicherlich abgegriffen und langweilig, und die meisten möchten lieber auf sie verzichten. Andererseits hat sich der Leser gerade an diese Schriften gewöhnt. Durch diese Gewöhnung kann er sie besonders gut lesen, gerade weil er sie so gut kennt. Dies sollte mit bedacht werden, bevor man die Standardschriften kategorisch ausschließt.

Abbildung 10.92    Dass eine typografische Gestaltung auch »nur« mit Systemschriften wie Arial und Times New Roman ansprechend aussehen kann, beweist bugaboo.com.

Die typografischen Möglichkeiten sind mit den Webfonts aber auch extrem gestiegen: die Auswahl als auch die Gestaltungsoptionen durch teilweise mehrere Schriftschnitte. Als Anregung für den eigenen Webfonts-Einsatz bieten sich unter anderem die beiden folgenden Webseiten an:

Abbildung 10.93    Wer sich mit Webfonts und Typografie auseinandersetzt, sollte typewolf.com kennen – tolle Showcases und hilfreiche Artikel.

Abbildung 10.94    typ.io listet Webseiten und deren eingesetzten Webfonts auf.

 

10.7.2    Die Gestaltung von Überschriften 

Überschrift ist nicht gleich Überschrift. Technisch gesehen, gibt es sechs Hierarchiestufen (h1 bis h6). Und inhaltlich sind zwar keine Grenzen gesetzt, ich breche es aber trotzdem auf zwei Varianten herunter:

1. die Überschrift auf der Startseite als Titel/Motto der Webseite

2. die einzelnen Überschriftendefinitionen im »normalen« Inhaltsbereich

Der Titel der Webseite | Der Titel einer Webseite empfängt den Besucher. Oft stellt der Titel kurz und knackig das Unternehmen vor, oder er bietet dem Besucher Lösungen zu seinen Bedürfnissen, oder er weckt Interesse, die Webseite weiter zu erkunden, oder er ist eine Art Werbespruch. Manchmal ist er auch eine Mischung der verschiedenen Varianten. Der Titel ist entsprechend markant auf der Startseite platziert, gerne auch mal sehr groß. Er wirkt auch durch ausreichend viel Leerraum drum herum und/oder durch den Einsatz einer besonderen Schriftart oder -farbe.

Die Website sabowind.de (siehe Abbildung 10.95) setzt auf einen markanten, großen Titel, der klar und ohne Umschweife den Nutzen der Website auf den Punkt bringt.

Abbildung 10.95    Markanter Titel, klare Aussage bei sabowind.de

h1 bis h6 | Die Überschriften im Inhaltsbereich sind meistens schon nicht mehr so markant gestaltet, aber immer noch auffällig genug, um auch als Überschrift entsprechend wahrgenommen zu werden. Ausgezeichnet werden Überschriften klassischerweise durch die Schriftgröße, ausgehend von der h1 als größter Überschrift bis zur h6 als kleinster. Die konkrete font-size-Definition ist meistens vom Fließtext abhängig (auf diesen komme ich gleich noch zu sprechen). Denn um der Semantik Rechnung zu tragen, sind alle Überschriften größer als der Fließtext. Dies kann herausfordernd sein, da die Überschriften nicht nur größer sein sollten als der Fließtext, sondern die Hierarchie innerhalb der Überschriften sollte auch klar erkennbar sein, wobei die größte Überschrift vielleicht ein bestimmtes Maß nicht überschreiten sollte.

Abbildung 10.96    Zwei Überschriftengrößen (h1 und h2) zusammen mit anderen Auszeichnungselementen (Einleitung, Zitat) sind oft schon ausreichend wie hier bei lean-maritime.de.

Da eine h1 wesentlich öfters definiert wird als eine h6 (die nur wirklich sehr selten im Einsatz ist), sollte auch mit der h1-Größendefinition begonnen werden. Übliche Größen liegen irgendwo zwischen 20 und 35 Pixel, was aber nur als Richtwert dienen kann, da dies zu sehr vom Gesamtlayout abhängig ist.

Abbildung 10.97    Die Standardgrößen der Überschriften im beliebten Framework Bootstrap, getbootstrap.com/css/#type

Selten wird die ganze Überschriftenhierarchie bis zur h6 auf Webseiten eingesetzt. Meistens reichen die ersten drei völlig aus. Nichtsdestotrotz sollten alle sechs Varianten definiert werden. Denn gerade dann, wenn der Webdesigner dies nicht gemacht hat, kommt ein schlauer Fuchs (im Zweifel der Kunde) und möchte später unbedingt eine h6 einsetzen (Murphys Gesetz). Eine Möglichkeit ist es, die Varianten h3 bis h6 optisch gleich zu definieren, dies sollte aber die Ausnahme bleiben.

Abbildung 10.98    Eine Überschrift, gefolgt von einem kurzen Abstract und zwei Teasern, die zu weiteren Inhalten verlinken, und das Ganze optisch ansprechend verpackt: siltectra.com/produkte/branchen

Blindtexte | Zu oft wird die typografische Gestaltung mit Blindtexten gemacht. Die Lesbarkeit eines Lorem Ipsum-Textes zu bewerten dürfte aber schwierig werden. Wenn man erst gar nicht versucht, den Text weiterzulesen, dann fällt einem auch nicht auf, dass er eventuell unleserlich sein könnte. Je früher der richtige Text zur Verfügung steht und eingesetzt wird, umso besser. Steht der richtige Text noch nicht zur Verfügung, sollte statt pseudolateinischen Wörtern wenigstens vergleichbarer Text genommen werden, sofern es diesen gibt. Eventuell gibt es eine alte Webseite, deren Texte man erst einmal einsetzen kann.

Abbildung 10.99    Helfer in der Not: Wenn kein Text vorhanden ist, kann man auf Blindtextgeneratoren wie blindtextgenerator.de zurückgreifen.

 

10.7.3    Fließtext 

Fließtexte, auch gerne Copy genannt, sind das eigentliche Herzstück der meisten Webseiten. Hier stehen die Informationen, nach denen der Anwender dürstet (so bilden es sich zumindest die Webseitenbetreiber ein). Bei den meisten Webseiten gibt es mehr Fließtexte als irgendwelche anderen inhaltlichen Elemente. Die aus dem Print üblichen 9 bis 12 Punkt galten auch lange im Web als Standard. Dies hat sich in den letzten Jahren – zum Glück für die Lesbarkeit – nach oben korrigiert. Übliche Schriftgrößen für Fließtexte liegen inzwischen irgendwo zwischen 14 bis 16 Pixel, was eben wieder von der Schriftart, der Textmenge und der gewünschten Gestaltungswirkung abhängig ist.

Um für die einzelnen Textelemente aber Schriftgrößen zu finden, bietet es sich an, mit dem Fließtext zu beginnen. Sobald dieser gut lesbar ist und sich gut in das Gesamtdesign eingliedert, können die anderen Textelemente angepasst werden.

Die Systemschriften wurden vor allem für kleinere Schriftgrößen am Bildschirm entworfen. Wer Fließtexte um die 16 Pixel und größer definieren möchte, sollte sich einen passenden Webfont aussuchen und auf die Systemschriften eher verzichten.

Abbildung 10.100    Das Beispiel zeigt schön auf, wie eine markante Schriftart in der Überschrift funktioniert, für den Fließtext aber kaum zu gebrauchen ist, martin-walker.de.

 

10.7.4    Links  

Links sollten immer als solche zu erkennen sein. Manchmal geschieht dies durch die besondere Positionierung (Navigation), oft durch farbliche Hervorhebungen und/oder Unterstreichen (im Fließtext). Womit man nie etwas verkehrt machen kann, ist, wenn man Links unterstreicht. Der Anwender hat gelernt, dass alle unterstrichenen Texte Links sind, aber nicht alle Links unterstrichen sind.

Abbildung 10.101    Klare Linkgestaltung: einmal farblich und unterstrichen, knabenreich-consult.de (oben), und einmal mit individuellem Unterstrich, akademie-frankfurt.de (unten)

Linkalternative | Wer nicht auf den typischen Unterstrich setzen möchte, der muss sich passende Alternativen überlegen. Eine interessante Variante ist es, den Unterstrich zu verändern. Die klassische Definition text-decoration:underline erzeugt einen Unterstrich, der die Unterlängen der Buchstaben anschneidet, was typografisch nicht so schön ist.

Ein alternativer Unterstrich lässt sich durch die border-Eigenschaft erzeugen. Siehe dazu auch Abschnitt 12.6.2, »Individuelle Linkunterstriche«. Hier wird das Vorgehen exemplarisch erklärt.

Es gibt noch weitere Gestaltungsvarianten, wenn man nicht auf den Unterstrich setzen möchte. Dabei gibt es sowohl die Variante, eine sehr markante andere Farbe zu nehmen als die Farbe des restlichen Textes oder nur eine dezente andere, was auch von der Gesamtgestaltung abhängig ist. Klar ist aber, je auffälliger der Link, umso mehr wird er als solcher erkannt.

Varianten zum Ausprobieren wären auch eine farbliche Hinterlegung des Textlinks, ein anderer Schriftschnitt (z. B. kursiv), eine andere Schriftart oder ein Icon vor dem Text.

Pseudoklassen | Auch der :hover-Zustand sollte definiert werden, um dem Anwender auch beim Überfahren mit der Maus optisch klarzumachen, dass dies ein Link ist.

Während die Pseudoklasse :active kaum eine Rolle spielt, wird :visited zumindest ab und an mal eingesetzt. Eigentlich ist es ja ein hilfreiches Mittel, um zu sehen, welche Seiten man schon besucht hat und welche nicht, aber selten praxistauglich umgesetzt. Der Anwender verschafft sich in Sekundenbruchteilen einen Überblick über die Webseite und lernt die spezifischen Gestaltungsformatierungen und Farbgebungen. Zusätzlich dann auch noch besuchte Links von all den anderen (Link)formatierungen zu unterscheiden, missglückt oft.

Daher sehen :active und :visited genauso aus wie die normale Linkdefinition (:link).

 

10.7.5    Listen 

Listen gehören zu den am meisten unterschätzten HTML-Elementen. Innerhalb des Fließtextes sind sie eine tolle Möglichkeit, einen schnellen Überblick zu liefern, und bieten dem Auge einen Anhaltspunkt. Für die Erstellung einer Navigation (siehe Kapitel 12, »Navigations- und Interaktionsdesign«) werden sie häufig genutzt, ebenso wie für jede Art von Aufzählungen und Besonderheiten wie Preislisten oder Portfolio-Übersichten.

Eine Liste muss dabei nicht nur eine eingerückte Aufzählung mit jeweils einem schwarzen Punkt davor sein. Die folgenden Beispiele zeigen, wie sich mit Weißraum, Icons und typografischer Gestaltung individuelle und lesbare Listen gestalten lassen.

Abbildung 10.102    So unterschiedlich können Listen aussehen.

 

10.7.6    Tabellen 

Nein, Tabellen müssen nicht hässlich sein und nach Excel aussehen. Mit ein bisschen Einsatz lassen sie sich vielmehr in richtige Augenschmankerl verwandeln. Die HTML-Standardtabelle ist grau und langweilig. Selten schadet es den Inhalten, wenn sie mehr Platz bekommen. Also den Innenabstand vergrößern, sodass zwischen Text und Rahmen mehr Freiraum besteht und die Inhalte besser zu erfassen sind. Mit einem fetten Schriftschnitt oder größerer Schrift lassen sich Schwerpunkte setzen, also z. B. die Reihen- oder Zeilenüberschriften hervorheben. Auch farbiger Text oder farbige Hintergründe sind dafür gut geeignet. Dezente horizontale Striche bilden eine schöne optische Trennung zwischen den Reihen.

Abbildung 10.103    Eine Standard-HTML-Tabelle (okay, drei Jahre später und es sind inzwischen natürlich 26 Meistertitel geworden).

Abbildung 10.104    So übersichtlich und ansprechend können Tabellen aussehen, transfersapp.com und shopify.com.

Reihen oder Spalten, die besonders hervorgehoben werden sollen (wie in Abbildung 10.104 oben), werden gerne farblich hinterlegt, oder manchmal werden die Inhalte auch größer dargestellt. Bei der Gestaltung einer Tabelle ist es wichtig, sich zu fragen, welche Inhalte transportiert werden sollen. Was soll der Betrachter vor allem erfassen können? Und dann darauf achten, dass diese Inhalte entsprechend hervorgehoben werden. Fetter Schriftschnitt, farbiger oder größerer Text, farbiger Hintergrund oder dickere Trennlinien sind alles geeignete Mittel, um einzelne Spalten oder Reihen oder auch nur einzelne Tabellenzellen optisch zu markieren.

 

10.7.7    Zitate 

In HTML gibt es zwei Möglichkeiten, Zitate zu kennzeichnen. Das blockquote-Tag ist für längere Zitate gedacht und rückt das Zitat automatisch links und rechts (Außenabstand) etwas ein. Das cite-Tag sollte für kürzere Zitate oder auch Quellenangaben eingesetzt werden. Zitate sind eine schöne Möglichkeit, den Fließtext aufzulockern und größere gestalterische Highlights zu setzen, als dies mit dem Fließtext möglich ist.

Abbildung 10.105    Zitate können die Gestaltung auflockern oder auch als Titel dienen: jasonsantamaria.com/articles/deadlines.

Ein kleines Beispiel verdeutlicht, wie mit reinem CSS Zitate typografisch ansprechend gestaltet werden können.

Der HTML-Code ist übersichtlich, innerhalb des blockquote-Tags steht ein cite-Tag mit der Quellenangabe.

<blockquote> Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt.
<cite>Giovanni Trapattoni</cite>
</blockquote>

Listing 10.18    Zitat-Definition in HTML

Per CSS-Code wird das Zitat formatiert:

blockquote {
width: 450px;
margin: 2em auto;
padding: 0.5em 35px;
font: italic 18px/1.5 Georgia, serif;
color: #666;
position: relative;
}
blockquote:before {
color: #bfdbad;
content: "\201D";
font-size: 80px;
position: absolute;
left: -12px;
top: -8px;
}
blockquote cite {
font: italic 13px/1.5 Arial, sans-serif;
color: #999999;
display: block;
margin-top: 8px;
}
blockquote cite:before {
content: "\2014 \2009";
}

Listing 10.19    Zitat-Formatierung per CSS

Mithilfe der Pseudoklasse :before wird ein Anführungszeichen (content: "\201D") vor dem Zitat erzeugt, sicherheitshalber, damit es in allen Browsern korrekt angezeigt wird, als Unicodezeichen. Dieses wird dann entsprechend positioniert und gestaltet. So hat man mit wenigen Kniffen ein individuelles Zitat erstellt, rein mit CSS.

Abbildung 10.106    Mit etwas CSS-Formatierung sieht das Zitat gleich ansprechend aus.

 

10.7.8    Kaufmanns-Und 

Abbildung 10.107    Pinterest liefert eine schöne Auswahl an unterschiedlich gestalteten Ampersands: pinterest.com/search/pins/?q=ampersand.

Was gibt es im Deutschen teilweise für schreckliche Namen: Kaufmanns-Und. Klingt schon so, als ob es sich ein Beamter ausgedacht hat. Der englische Begriff Ampersand wird dem ästhetischen Ausdruck des Zeichens da schon gerechter. Manchmal wird das &-Zeichen auch et-Zeichen oder Und-Zeichen genannt.

Aufgrund seiner Eleganz und Schönheit (zumindest in vielen Schriftarten) hat sich geradezu ein Hype um dieses &-Zeichen entwickelt. Vom T-Shirt bis zum Agenturnamen wird es allzu gerne eingesetzt und in allen möglichen Varianten verun…gestaltet.

Normalerweise wird das &-Zeichen im Browser ganz normal wie alle anderen Zeichen erzeugt, wer aber typografisch ein bisschen aus der Masse hervorstechen will, der lässt das &-Zeichen nicht einfach von jeder x-beliebigen Schrift darstellen. Gerade in Überschriften kann es spannend sein, das &-Zeichen gesondert zu formatieren. Folgendes Beispiel verdeutlicht dies:

<h1>Sodom <span class="amp">&</span> Gomorra</h1>

Listing 10.20    HTML-Kennzeichnung des Kaufmanns-Und

In HTML bekommt das &-Zeichen eine eigene Klasse zugewiesen. Und per CSS wird diese dann entsprechend formatiert:

h1{
    color: #444;
    font-size: 50px;
}

span.amp {
    font-family: "Goudy Old Style", "Palatino", 
"Book Antiqua", serif;
    font-style: italic;
    font-size:110%;
    color: #7f8c77;
}

Listing 10.21    CSS-Formatierung des Kaufmanns-Und

Abbildung 10.108    In Überschriften und Titeln sind eigens gestaltete Ampersands ein schönes Design-Element.

 

10.7.9    »Text-shadow« 

CSS3 bietet ja einige hilfreiche Neuerungen, so unter anderem die Eigenschaft text-shadow. Textschatten vererben sich auch an die Kindelemente weiter. Durch ihren gezielten Einsatz können Webdesigner dafür sorgen, dass Texte besser lesbar sind. Die Eigenschaft bietet aber auch ganz neue Gestaltungsmöglichkeiten, das Aussehen von Texten völlig ohne Bildbearbeitungsprogramme zu verändern. Was in Photoshop die Ebenenstile Schlagschatten, Kontur und Schein nach außen sind, ist in CSS3 der text-shadow.

Abbildung 10.109    Der Aufbau der text-shadow-Eigenschaft

Eine beispielhafte Syntax sieht dann so aus:

text-shadow: 1px 1px 1px #000;

Listing 10.22    Textschatten-Definition in CSS

Es lassen sich auch negative Werte für die Abstände einsetzen, und mehrere Schatten auf ein Element angewandt werden mit Kommata getrennt. Mit einem leichten Schlagschatten lässt sich die Lesbarkeit von Texten verbessern, die einen nicht sehr großen Hell-Dunkel-Kontrast zum Hintergrund aufweisen. Ansonsten sind die Gestaltungsmöglichkeiten eher für Überschriften geeignet und sollten nicht aus Selbstzweck eingesetzt werden, sondern dann, wenn sie das Design bereichern. Die folgenden Varianten zeigen eher die Möglichkeiten auf, als dass diese eins zu eins übernommen werden sollten.

#one{
    color: #0eaa8e;
    text-shadow: 2px 4px 3px #ccc;
}

Listing 10.23    Einfache Textschatten-Definition in CSS

#two{
    padding: 50px 0;
    background: #0eaa8e;
    color: #d9efeb;
    text-shadow:-1px -1px 1px #333, 0px 1px 1px #fff;
}

Listing 10.24    CSS-Definition für eingedrückte Buchstaben

#three{
    text-shadow: 3px 3px 0px #fff, 5px 5px 0px #999;
}

Listing 10.25    CSS-Definition für einen versetzten Schatten

#four{
    color: #055446;
    text-shadow: -10px 10px 0px #35c0a8, -20px 20px 0px #6cd1bf, -30px 30px 0px #b2e5dc;
}

Listing 10.26    CSS-Definition für mehrere versetzte Schatten

#five{
    color: #fff;
    text-shadow: 0 0 30px #0EA086, 0 0 30px #0EA086, 0 0 30px #0EA086;
}

Listing 10.27    CSS-Definition für einen weichen Schatten/Glüheffekt

#six{
color: rgba(14, 170, 142, 0.5);
    text-shadow: 5px 5px 0 rgba(214, 37, 108, 0.5);
}

Listing 10.28    CSS-Definition für einen Anaglyph-Effekt

#seven{
    padding: 50px 0;
    background: #0eaa8e;
    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

Listing 10.29    CSS-Definition für einen 3D-Schatten-Effekt

 

10.7.10    Typografische HTML-Elemente 

Im Screendesign und auch bei der typografischen Gestaltung im Browser wird man zuerst immer nur die Elemente formatieren, die vorliegen. Kommt also keine Tabelle im Layout vor, wird diese nicht gestaltet. Kommt keine h6 vor, wird diese nicht gestaltet. Die Gefahr liegt darin, dass diese auch später nicht gestaltet werden und es erst auffällt, wenn diese Elemente irgendwann doch einmal auf der Webseite zum Einsatz kommen – was einen Anruf beim Webdesigner zur Folge hat.

Abbildung 10.110    Schon wieder der Blindtextgenerator, diesmal bietet er aber eine Vorlage mit HTML-Elementen an, fertig zur typografischen Ausgestaltung, blindtextgenerator.com/snippets.

So sollten alle möglichen HTML-Elemente formatiert werden, um später keine Design-Überraschungen zu erleben. Um kein Element zu vergessen, lohnt es sich, eine Art typografie.html-Datei anzulegen, die alle Elemente beinhaltet.

Im Beispielmaterial zum Buch ist eine solche HTML-Datei enthalten, die sich auch gut in jedes CMS als eigene Typografie-Seite einfügen lässt.