Content is King und die typografische Gestaltung sorgt dafür, dass dieser überhaupt erst gut aufgenommen werden kann.
Lerne in diesem Artikel wie du Text gestaltest, die eine Wirkung entfalten und gut lesbar sind.
Nicht selten, dass die Typografie zu wenig beachtet wird. Templates, CMS-Themes und Frontend-Frameworks liefern oft schon eine gute Basis-Gestaltung – und dabei bleibt es dann meistens. Eventuell werden noch die Schriftarten ausgewählt, fertig. Verschenktes Potential, denn es geht um die Inhalte, die meistens in Textform vorliegen, und damit eben auch um die Textgestaltung.
Um effektiv Texte zu gestalten, solltest du die typografischen und technischen (CSS-)Möglichkeiten kennen.
Die Gestaltung des Textes soll die inhaltliche Aussage des Textes visuell transportieren. Ein Gefühl vermiteln. Die Gestaltung des Textes soll eine visuelle Hierarchie schaffen, sie ist die Benutzerschnittstelle, sie gestaltet das User Interface, sie kreiert die User Experience.
Auf dieser Seite verschaffe ich dir einen Überblick, was typografische Gestaltung bedeutet, was du beachten solltest, mit welchen CSS-Eigenschaften du deine Texte beeinflussen kannst samt jeder Menge Best Practice-Beispiele. Los gehts…
Ein guter Webdesigner muss sich intensiv mit der Gestaltung von schriftlichen Informationen auseinandersetzen, also mit der sogenannten Typografie. Gute Typografie sorgt für eine gute Lesbarkeit. Der Leser kann sich auf den Inhalt konzentrieren und nicht auf die Formatierung.
Gute Typografie wirkt aber auch emotional. Sie beeinflusst, wie Inhalte verstanden und wahrgenommen werden. Sie unterstützt den Inhalt in seiner Aussage. Im Idealfall trifft sie den richtigen »Schrift«-Ton. Dabei ist Typografie ein Handwerk mit dem Ziel, Sprache sichtbar zu machen. Meistens dreht es sich aber mehr darum, was geschrieben wird, als darum, wie es geschrieben wird. Und, was eigentlich am wichtigsten ist, wie es andere lesen. Text lässt sich hierbei im Grunde wie ein User Interface betrachten.
Texte sollten so gestaltet sein, dass sie den Blickverlauf lenken, Aufmerksamkeit an der richtigen Stelle erzeugen und die Informationen schnell aufgenommen werden können.
Typografie geht daher über die Auswahl passender Schriftarten weit hinaus.
Schriftgröße und -farbe, Zeilenlänge und -abstand spielen ebenso eine Rolle wie die Strukturierung des Textes in Überschriften, Absätzen, Aufzählungen und so weiter. Text fungiert also als Benutzerschnittstelle zwischen dem Anwender, der ein Bedürfnis befriedigen möchte, und dem Websitebetreiber, der ein Ziel verfolgt.
Ebenso wie ein Logo, die Farben oder Bilderwelten unterstützt Typografie die Wiedererkennung eines Unternehmens. Die Identität, das gewünschte Image eines Unternehmens kann und sollte auch mit Typografie ausgedrückt werden.
Feste Regeln für gute Typografie gibt es nicht. Allein die Definition »gut« ist schwierig. Typografie ist kein mathematisches Problem mit nur einer Antwortmöglichkeit. Nicht jeder Leser wird den Text auf die gleiche Weise interpretieren. So gibt es immer verschiedene »Lösungen«. Immerhin existieren Richtlinien und Best Practices, an denen man sich durchaus orientieren kann. Die wichtigsten stelle ich in diesem Artikel vor. Gute Typografie heißt also auch, sich mit den Inhalten auseinanderzuetzen und deren Bedeutung und Ziele zu verstehen.
Beim Lesen lernen muss noch jeder einzelne Buchstabe erkannt und gelesen werden. Geübte Leser müssen aber nicht mehr jeden einzelnen Buchstaben lesen, sondern erkennen eher sogenannte Wortbilder:
Für ganze Wörter hat sich so jeweils ein Wortbild eingeprägt, das wir schnell wiedererkennen können. Wir merken das, wenn wir Fremdsprachen oder generell seltene, ungewöhnliche Wörter lesen müssen. Dies dauert entsprechend länger, da wir genauer hinschauen müssen (und manchmal eben doch wieder jeden Buchstaben einzeln lesen müssen).
Beim Lesen springt das Auge die Zeilen in mehreren Schritten ab, ca. 5 bis 10 Buchstaben, was 1 bis 2 Wörter entspricht. Während der Bewegung sieht das Auge nichts, erst beim Stillstand werden Wortbilder erkannt.
Diese Erkenntnisse sind insofern wichtig, dass die typgrafische Gestaltung das Erkennen dieser Wortbilder vereinfacht. Oder andersherum ausgedrückt:
Je schwerer die Wortbilder zu erkennen sind, umso schwerer ist der Text zu lesen, umso weniger Text wird gelesen.
Im Webdesign fristete die Typografie lange ein Mauerblümchen-Dasein. Die Beschränkung auf wenige Systemschriften, niedrig aufgelöste Bildschirme und verpixelte Textdarstellung sorgten für fleißige Nichtbeachtung. Webfonts und CSS3- sowie JavaScript-Technologien ermöglichen seit einigen Jahren neue Spielräume in der Textgestaltung, die dafür sorgen, dass Typografie den Raum in der Gestaltung bekommt, den sie aufgrund ihrer Bedeutung verdient.
Waren früher vor allem Farben, Bilder und das Layout die Hauptgestaltungselemente, so ist die Wichtigkeit einer guten Typografie inzwischen allgemein bekannt und akzeptiert. Die Wahl der Schriftart und die feine Ausgestaltung des Textes sind nicht mehr ein nötiges Übel, sondern werden von Anfang an in den Gestaltungsprozess mit einbezogen.
Eine schöne Gestaltung ist nicht reduziert auf Farben und Bilder, vor allem Buchstaben und Wörter vermitteln die entscheidenden Informationen, ganz egal ob Corporate Website, Online-Shop oder Werbebanner.
Der Content ist zwar King, aber erst gute Typografie sorgt dafür, dass dieser überhaupt aufgenommen wird!
Da draußen findet ein Kampf um Aufmerksamkeit statt. Geführt von uns allen auf Schauplätzen wie Facebook und Google genauso wie im Fernsehen, in Zeitungen und auf Smartphones. Wir wollen Informationen, jetzt, viele und am liebsten in leicht verdaulichen Formaten.
Gleichzeitig senden wir alle Informationen in Form von Tweets, Status-Updates, Chatnachrichten usw. Tl;dr ist das abgekürzte Eingeständnis, dass wir den Kampf eigentlich verloren haben: »Too long; didn’t read« – wir wollen stattdessen knappe Informationshäppchen, wenn nicht, sind wir schon wieder bei der nächsten Information, auf der nächsten Website, im nächsten Netzwerk.
Warum zehn Seiten lesen, wenn es auch in einer halben zusammenzufassen geht. Unser Leseverhalten hat sich diesem Prozess angepasst, und die Typografie sollte/muss sich auf dieses veränderte Verhalten einstellen. Gute Typografie sorgt auch dafür, die Inhalte so zu organisieren, dass der Leser eine gute Chance hat, das zu finden was für ihn von Interesse ist. Man kann hier also durchaus auch von Informationsdesign sprechen.
Im folgenden zeige ich dir die wichtigsten typografischen Gestaltungsmerkmale und was du beachten solltest, um zu einem gut lesbaren Text zu gelangen.
Die Schriftgröße beeinflusst erheblich die Lesbarkeit und die Bedeutung des Textes. Die Schriftgröße gibt die Höhe der Schrift an, gemessen von der Ober- über die Mittel- bis zur Unterlänge.
Da die einzelnen Längen je nach Schriftart differieren können, wirken verschiedene Schriftarten unterschiedlich groß und sind damit unterschiedlich gut lesbar bei gleicher Schriftgröße.
Die klassische Maßeinheit für die Schriftgröße (die CSS-Eigenschaft lautet font-size) ist der sog. „Punkt“ (1 Pica-Punkt = 0,352 mm), manchmal auch Didot-Punkt oder Pica-Punkt genannt. Im Web gibt es verschiedene Maßeinheiten, um die Schriftgröße zu definieren. Die häufigste ist sicherlich immer noch die Größe in Pixel (px) anzugeben, aber bei weitem nicht die einzige.
Die Angabe der Schriftgröße (egal in welcher Einheit) ist eher als Empfehlung zu betrachten. Die tatsächlich angezeigt Schriftgröße hängt von der Auflösung und Größe des Monitors, von den Benutzer-Einstellungen im Browser und vom Browser selber ab.
Mit Pixelangaben lässt sich zwar vermeintlich pixelgenau die Größe angeben, aber das Problem dabei ist, das ein CSS-Pixel nicht zwangsläufig ein Hardware-Pixel ist. Daher wird allgemein empfohlen auf flexiblere Einheiten wie %, em oder rem zu setzen. Auch aus Gründen der Barrierefreiheit wurde dies lange empfohlen, aber die modernen Browser sind inzwischen in der Lage auch absolute Einheiten bei Bedarf passend zu vergrößern. So ist es eher aus Sicht der Frontend-Entwicklung hilfreich relative Einheiten einzusetzen.
Schriftgröße in Abhängigkeit der Bildschirmbreite
Recht neu ist noch die Definition anhand der Bildschirmbreite, die mit den Anforderungen des responsiven Webdesigns aufkam. Einerseits sind die Abstände zwischen Bildschirm und Betrachter auf einzelnen Endgeräten sehr unterschiedlich, ebenso wie die Bildschirmbreite und damit die Zeilenlänge. Daher gibt es jetzt auch Einheiten wie vw, vh, sowie vmin und vmax.
Am ehesten zu empfehlen ist wohl aktuell die Angabe rem. Ähnlich wie em ist diese sehr flexibel, hat aber einen großen Vorteil gegenüber %– oder em-Angaben. Die letzten beiden setzen die Schriftgröße in Bezug zur Browser-Standardeinstellung um (16 Pixel). Dazu werden die Angaben aber auch vererbt an die HTML-Kind-Elemente. Bei entsprechend vielen Verschachtelungen kann man so leicht den Überblick verlieren, welche Schriftgröße am Ende heraus kommt.
rem als beliebteste Variante
Die rem-Einheit hat nicht diese Vererbungsproblematik. Die Berechnung der Schriftgröße ist daher wesentlich einfacher, da die Größen nicht mehr im Verhältnis zur Schriftgröße des Eltern-Elements berechnet werden müssen.
Geht man von der 16-Pixel-Browser-Standardschriftgröße aus, muss man die font-size des root-Elements auf 100% setzen. 1rem entspricht dann umgerechnet 16 Pixeln. Um andere Pixelwerte in rem zu übertragen, muss man den Pixelwert durch 16 teilen:
html { font-size: 100%; } /* Default Font Size, 16px */
h1 { font-size: 2.5rem; } /* 40/16 = 2.5 */
h2 { font-size: 2rem; } /* 32/16 = 2 */
h3 { font-size: 1.5rem; } /* 24/16 = 1.5 */
p { font-size: 1rem; } /* 16/16 = 1 */Im Gegensatz zu em ist diese Berechnung angenehmer, da einfacher. rem ist eine CSS3-Eigenschaft und wird daher nicht von allen älteren Browsern unterstützt. Zur Sicherheit kann man hier einen Fallback definieren, indem die entsprechenden Pixelwerte VOR den rem-werten angegeben werden:
html { font-size: 100%; }
h1 { font-size: 40px; font-size: 2.5rem; }
h2 { font-size: 32px; font-size: 2rem; }
h3 { font-size: 24px; font-size: 1.5rem; }
p { font-size: 16px; font-size: 1rem; }Moderne Browser erkennen die rem-Definition und überschreiben die Pixelwerte. Ältere Browser nehmen die Pixelwerte und ignorieren die rem-Anweisung.
| Wert | Typ | Beschreibung |
|---|---|---|
| px | Absolut | 1 „Viewport Pixel“ |
| pt | Absolut | 1 Punkt beträgt 1/72 eines Inchs |
| pc | Absolut | 1 Pica entspricht 12 Punkt |
| % | Relativ | Relativ zur Schriftgröße des Eltern-Elements |
| em | Relativ | Relativ zur Schriftgröße des Eltern-Elements |
| rem | Relative | (root em) Relativ zur Schriftgröße des html-Elements |
| Schlüsselwort | Relativ | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Relativ | 1/100 der Browserbreite |
| vh | Relativ | 1/100 der Browserhöhe |
| vmin | Relativ | 1/100 Fensterbreite oder -höhe (je nachdem, welche Größe die kleinere ist) |
| vmax | Relativ | 1/100 Fensterbreite oder -höhe (je nachdem, welche Größe die größere ist) |
Wie oben schon angedeutet, lassen sich hier nur Empfehlungen geben. Die Schriftgröße sagt nämlich noch nichts über den optischen Eindruck der Höhe aus. Es gibt daher auch keine Standardgrößen für bestimmte Textelemente.
Mit dem Fließtext beginnen
Am geschicktesten ist es sicherlich mit der Definition des Fließtextes anzufangen, da dieser am häufigsten auf der Seite vorkommen wird. Das kann im body-Element erfolgen, zusätzlich auch im Absatz-Element (Das HTML-Element p wie paragraph).
Erst wenn der Fließtext gut lesbar ist, sollte man die weiteren Elemente gestalten, die ja meistens größer sind. Die Lesbarkeit sollte hier immer VOR der optisch-ästhetischen Wirkung stehen.
Als Richtlinie, bzw. Basiswert kann man mit einer Schriftgröße von ca. 16 – 18 Pixel anfangen. Darunter wird es schon recht klein. Das war zu früheren Zeiten sicherlich so üblich, aber aufgrund der Gerätevielfalt und vielfältigsten Nutzungsszenarien wäre eine Schriftgröße unter 16 Pixeln grenzwertig.
Hat man eine passende Größe für den Fließtext gefunden, kann man nach und nach die weiteren Elemente gestalten. Nicht selten, dass dann die größte Überschrift (meistens die h1) dann bei weit über 30 Pixel liegt.
Zu häufig sehe ich noch zu kleine Texte, also Schriftgrößen die (teils deutlich) unter 16 Pixel liegen. Möchte ich, dass die Texte gelesen werden – und dafür sind sie ja schließlich da – dann sollte ich diese nicht zu klein setzen (Ja, das kann ich hier nicht oft genug wiederholen!).
Dazu solltest du die visuelle Hierarchie beachten: Je wichtiger ein Element ist, umso markanter sollte es auch gestaltet sein.
Je größer ein Text ist, umso bedeutender ist er auch.
Ich habe schon Screendesign-Entwürfe gesehen, da war die Metanavigation größer als die Hauptnavigation oder der Text in der Fußleiste größer als der Text im Inhaltsbereich. Das ist natürlich ungünstig und spiegelt die Bedeutung der Elemente nicht wieder.
Der Schriftschnitt ist die Variation einer Schriftart und wird in CSS mit font-weight definiert. Am bekanntesten sind wohl fett und kursiv. Der Schriftschnitt kann die Schriftstärke, die -breite oder die -lage verändern. Zusammen ergeben die verschiedenen Schriftschnitte eine Schriftfamilie.
Für den umfangreicheren Einsatz auf Websites ist es hilfreich, wenn eine Schriftart mehrere Schriftschnitte besitzt. Durch sie lässt sich besser Abwechslung in die Gestaltung bringen, als beispielsweise mit anderen Schriftarten, -farben oder -größen.
Mit Schriftschnitten lassen sich Texte semantisch kennzeichnen (z.B. durch das strong-Element als wichtig markieren) und optisch hervorheben.
| CSS-Wert | Beschreibung |
|---|---|
| 100 bis 900 | Dicke der Schrift auf einer Skala von 100 bis 900 in Hunderterschritten. Je größer der Wert, umso fetter wird der Text angezeigt. |
| normal | Standardeinstellung, entspricht dem numerischen Wert 400. |
| bold | Fetter Schnitt, entspricht dem numerischen Wert 700. |
| bolder | Stellt die Schrift dicker als der vererbte Wert. |
| lighter | Stellt die Schrift dünner als der vererbte Wert. |
Als wichtigste Faustregel gilt: Der Hell-Dunkel-Kontrast zwischen Textfarbe und Hintergrundfarbe sollte groß genug. Groß genug, um die Buchstaben gut lesen zu können.
Im Print gibt es schwarz auf weiß. Schwarze Schrift auf weißem Hintergrund bildet den größten Hell-Dunkel-Kontrast. Was im Printbereich meistens eingesetzt wird, ist auf Bildschirmen zu kontrastreich. Daher wird gerne entweder ein dunkelgrauer Text (z.B: #333) auf weißem Hintergrund oder schwarzer Text auf sehr hellgrauen (oder sonstige helle Farbtone) Hintergrund (z.B. #f3f3f3) eingesetzt. Das Kontrast wird dadurch leicht abgemildert.
Für farbige Texte oder Hintergründe gibt es verschiedene Tools, mit denen man überprüfen kann, ob der Kontrast ausreichend ist und die die Kombination anhand der Accessibility-Richtlinien auswerten, z.B. den Color Contrast Checker
Farben sind ein tolle Gestaltungselement mit enormer emotionaler und ästhetischer Wirkkraft. Gerade deswegen sollte aber vermieden werden, dass durch den Einsatz von zu vielen Farbtönen oder ungünstigen Farbkombinationen die Lesbarkeit leidet.
So sind Kontraste von Komplementärfarben ungeeignet, da sie zu einem Flimmereffekt führen. Ebenso sollte eine Rot-Grün-Kombination vermieden werden, da die Rot-Grün-Sehschwäche recht weit verbreitet ist.
Der Einsatz von Text auf Bildhintergründen oder Verläufen wird zwar gerne genommen, ist aber mit Vorsicht zu genießen. Wechselnde und irritierende Kontrastverhältnisse erschweren hier die Lesbarkeit.
Um Farben effektiv einzusetzen, gibt es ein paar Empfehlungen:
Linksbündig, rechtsbündig, zentriert oder Blocksatz – das sind die vier Möglichkeiten Text mit Hilfe der CSS-Eigenschaft text-align auszurichten.
Die geläufigste und zu empfehlende Variante ist der linksbündig Text (text-align:left). Zwar wird im Printbereich gerne der Blocksatz (also links- und rechtsbündig) eingesetzt, dort lassen sich aber auch Trennungen und Wortabstände viel feiner einstellen und ausgleichen als im Web.
Linksbündiger Text verursacht zwar schnell einmal am rechten Rand die sog. Treppenstufen, ist aber unter den aktuellen Möglichkeiten noch die beste. Vor allem bleiben beim sog. Flattersatz die Wortabstände gleich.
Blocksatz sieht zwar meistens harmonischer aus, führt im Web aber eher zu unpassend großen Wortabständen.
Rechtsbündiger und zentrierter Text sind nur bei besonderen Einsatzfällen hilfreich, z.B. bei Zitaten. Längerer Lesetext sollte damit allerdings vermieden werden.
Exkurs Silbentrennung
In der deutschen Sprache sind sehr lange Wörter keine Seltenheit. Hier eigene Trennungen mit Trennstrichen und erzwungenen Umbrüchen (<br>) einzusetzen, wäre bei einem so flexiblen Medium wie dem Web unsinnig.
Mit der CSS3-Eigenschaft hyphens (zu deutsch: Trennstrich) lässt sich die automatische Silbentrennung in Webtexten einsetzen:
body { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }Am besten im eigenen Projekt einmal austesten und die Trennungen überprüfen. Diese dürften zwar korrekt sein, aber nicht immer wirken sie passend.
Um bei bestimmten Wörtern die Trennung aktiv zu beeinflussen gibt es das HTML-Sonderzeichen ­. Dies lässt sich in einem Wort einfügen und bestimmt dann, wo bei Bedarf das Wort getrennt werden soll. Gerade bei kleineren Bildschirmen sinnvoll.
Der Aufwand ist natürlich größer, da jedesmal ein Sonderzeichen manuell eingefügt werden muss, so dass sich die Umsetzung meistens auf sehr lange Wörter in einer Überschrift beschränkt.
Mehr zur Silbentrennung findest du im Artikel Dealing with long words in CSS.
Über 8.500 sind schon dabei:
Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps
Die Empfehlungen für eine optimale Zeilenlänge variieren, hängen aber eben auch von der Schriftgröße und der Schriftart ab.
Zu lange Zeilenlängen sind schwerer lesbar. Bei zu kurzen entstehen oft unschöne Trennungen oder größere „Löcher“ am Ende der Zeilen.
Für Desktop-Bildschirme wird meistens eine Länge von 45 bis 80 Zeichen angegeben. Das entspricht gut zweimal den (Klein-)Buchstaben des Alphabets:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd
Die Buchstaben kann man sich gut in sein HTML-Dokument kopieren und die Zeilenlänge austesten.
(Ja, ich weiß, nach der „Rechnung“ sind meine Zeilenlängen hier zu lang. Aber wie gesagt es sind Empfehlungen und die typografische Gestaltung sorgt dafür, dass die Texte hier (trotzdem) gut lesbar sind.)
Bei mobilen Geräten kann die Zeilenlänge kleiner sein, ca. zwischen 30 bis 40 Zeichen.
Die Zeilenlänge des Textes ergibt sich meistens aus der Breite (width) des Eltern-Elements, in dem der Text steht (z.B. in einem DIV-Container). Möchte man die Breite eines Textblockes unabhängig davon begrenzen, bietet sich die CSS-Eigenschaft max-width an, die eine maximale Zeilenlänge ermöglicht.
Der Zeilenabstand hat für die Lesbarkeit und Gesamtwirkung des Textes eine große Bedeutung. Und doch gibt es wohl kaum ein typografisches Mittel, dass im Screendesign so vernachlässigt wird.
Der Zeilenabstand legt den Abstand zwischen zwei aufeinanderfolgenden Zeilen fest, die zu einem HTML-Element gehören, z.B. eine zweizeilige Überschrift.
Mit der CSS-Eigenschaft line-height werden gleichmäßig über und unter der Textzeile Abstände definiert.
Entspricht der Zeilenabstand der Schriftgröße, berühren sich Unterlänge der oberen Textzeilen und Oberlänge der unteren Textzeile.
Der Zeilenabstand kann, wie die Schriftgröße, in den Einheiten px, em oder % angegeben werden. rem als Einheit ist möglich, aber ungünstig, da sich diese ja immer relativ zur Standardbrowsergröße berechnet. Besser ist es aber den Zeilenabstand abhängig von der jeweiligen font-size anzugeben.
Da Pixel wieder ein unflexibler Wert ist, werden meistens % und em-Angaben eingesetzt oder einfach nur ein numerischer Wert. So können Vererbungsprobleme vermieden werden:h1 { font-size: 40px; font-size: 2.5rem; line-height: 1.3; }
h2 { font-size: 32px; font-size: 2rem; line-height: 1.3; }
h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.3; }
p { font-size: 16px; font-size: 1rem; line-height: 1.7; }
Dazu sollten Elemente einen Abstand nach oben und/oder unten bekommen. So dass bspw. zwei aufeinanderfolgende Absätze auch zueinander einen Abstand haben und dadurch erst als zwei getrennte Textblöcke erkennbar sind. In der Praxis kann das folgendermaßen aussehen:p { font-size: 16px; font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
Der Abstand zwischen den Zeilen sollte groß genug sein, damit das Auge gut in der gerade zu lesenden Zeile bleiben kann und danach leicht den Anschluss an die nächste Zeile findet.
Zu groß darf der Abstand aber auch nicht werden, so dass die Zeilen als zusammenhängender Block erkannt werden und nicht wie zwei voneinander getrennte Texteinheiten.
Im Print- und oft auch im Webdesign beträgt der Standard-Zeilenabstand 120% der Schriftgröße. Das ist aber fast immer zu gering. Mit einem Wert, der um ca. 130 bis 160 Prozent der Schriftgröße beträgt, kann man gut anfangen.
line-height in relativen Werten zur Schriftgröße definieren.Dabei immer den Gesamteindruck aller Texte im Auge behalten und den Zeilenabstand auch auf die umliegenden Elemente abstimmen. Nicht dass auf einmal der Zeilenabstand innerhalb eines Absatzes größer ist, als der Abstand zwischen zwei Absätzen.
Mehr Infos zum vertikalen Abstand findest du im Artikel:
Deep dive CSS: font metrics, line-height and vertical-align
Es gibt ein paar typografische Feinheiten, die immer wieder „gerne“ falsch gemacht werden und die ich im folgenden vorstelle:
Dies gibt wohl kein typografisches Detail, das häufiger auf Websites und Printprodukten falsch gemacht wird als die Anführungszeichen. Die „Gänsefüßchen“ meisten nicht korrekt eingesetzt. Das liegt nicht nur an Ahnungslosigkeit, sondern auch an den Tastaturen, die die korrekten Zeichen etwas verstecken.
Generell werden Anführungszeichen bei Zitaten eingesetzt, aber auch um Wörter hervorzuheben, zum Beispiel bei Ironie oder Distanzierung. Fälschlicherweise wird meistens das sogenannte doppelte Kodierungszeichen eingesetzt: „Falsches Zitat“. Ist dieses ja auch über die Tastatur (Umschalt +2) schnell erreichbar.
Richtig wäre aber das sogenannte doppelte Anführungszeichen (Alt + ^ und Alt +2): „So sieht ein Zitat aus.“
Die beiden sind aber auch leicht zu verwechseln, bzw. zu übersehen. Erkennst du den Unterschied zwischen einem Bindestrich – und einem Gedankstrich – auf Anhieb?
Der kürzere der beiden, also der Bindestrich, wird bei Worttrennungen und bei Buchstaben- und Ziffern-Zusammensetzungen eingesetzt.
Der Gedankenstrich ist etwas länger als der Bindestrich und hat eine trennende Funktion, er schafft sozusagen eine Pause im Text. Der Gedankenstrich kann auch einen Zwischensatz – deutlicher als durch Kommata getrennt – hervorheben.
Bei tausenden von Schriftarten ist die Auswahl entsprechend schwierig und langwierig. Zu besseren Übersicht werden die Schriftarten in verschiedene Kategorien eingeteilt, die sich entweder an historischen und/oder gestalterischen Aspekten orientieren.
Während im Printdesign – zumindest seit Beginn der digitalen Produktion – die freie Auswahl herrscht, war man im Webdesign lange auf die Standard-Systemschriften beschränkt, die sich jederzeit einsetzen lassen. Ergänzend und den typografischen Gestaltungsspielraum enorm erweiternd gibt es seit einigen Jahren die Webfonts. Die Google Fonts und die Adobe Fonts sind hier die bekanntesten Vertreter.
Hier bekommst du einen ausführlichen Überblick über die Schriftarten und ihre Einteilung.
Und wenn du auf der Suche nach Fonts-Anbietern bist, dann solltest du in dieser Sammlung schauen.
Die typografische Gestaltung hat vor allem zwei Funktionen:
die optisch-ästhetische Wirkung und die Lesbarkeit. Ähnlich wie mit Farben und Bildern wird auch durch die Schriftgestaltung eine visuelle Botschaft vermittelt und beim Betrachter Emotionen und Assoziationen ausgelöst.
Farben, Bilder, aber auch Grafiken und Videos können diese Emotionen vermutlich stärker hervorrrufen. Aber der eigentliche Inhalt liegt fast immer in den Texten. Daher sollte auch das Hauptaugenmerk eines Designers auf der Leseerfahrung, der Lesbarkeit und ihrer Optimierung liegen.
Daher geht es viel um die feine Ausgestaltung: Texte organisieren, Texte scannbar machen, Texte lesbar machen und Auszeichnungen setzen. Diese „Readability“ ist auch die Aufgabe jeden Webdesigners.
Texte zu erstellen, ist gar nicht so einfach. Wenn du schon einmal Websitetexte schreiben solltest/wolltest, wirst du wissen, wovon ich rede. Und es ist ein Unterschied die Texte zu schreiben und sie dann auch webgerecht zu formatieren. Schauen wir uns diesen Aspekt genauer an:
Zuerst kannst du die Texte kürzen. Und noch einmal kürzen. Und dann nochmal kürzen… Keiner braucht zu lange Texte. Komme auf den Punkt. Lasse nutzlose Wörter weg.
Verwende eine einfache, objektive Sprache (Ausnahmen bestätigen die Regel).
Benutze Schlüsselwörter – die Leser als auch Google freuen sich darüber. Und vermeide Rechtschreib- & Grammatikfehler (jaja, Schande über mein Haupt bei einigen Texten).
Mehr Infos zur Textgestaltung findest du hier: Content Creation – Das musst du bei der Inhaltserstellung beachten.
Text sollten nicht nur inhaltlich organisiert und strukturiert werden, sondern auch visuell. Denn zuerst wird das Layout samt Textgestaltung wahrgenommen, bevor auch nur ein Wort gelesen wurde.
Hierfür gibt es eigentlich nur eine goldene Regel:
Arbeite mit Abständen!
Dieser ist oft als (unnützer) Weißraum verschrien, der nur Platz wegnimmt, bzw. wo noch weitere Inhalte/Texte stehen könnten. Aber der Weißraum ist so wichtig:
Er hilft die Seite und die Inhalte zu strukturieren. Es schafft durch das Gesetz der Nähe werden Zusammenhänge geschaffen. Das, was inhaltlich zusammengehört, steht beisammen. Und zu anderen Inhaltsabschnitten ist ausreichend Abstand vorhanden.
Dadurch kann der User durch die Seite geführt werden, er bekommt eine Orientierung, die Inhalte kommen zur Wirkung und die Seite bekommt Struktur.
Zusammenhänge Elemente sollten also ausreichend Abstand zu den
anderen Inhaltsbereichen bekommen. So z.B. der Inhaltsblock zum Header, zur Seitenleiste und zum Footer. Oder die einzelnen Spalten zueinander. Und gerade auf Desktop-Bildschirmen geht ja der Trend eher dazu größerund großflächiger zu arbeiten.
Abstände und Leerraum schaffen Struktur und Ordnung und erleichtern die Erkennbarkeit.
Think vertical
Abstände und Weißraum…
Neben der Gesamtgestaltung mit Hilfe von Abständen, ist auch die Detailausgestaltung des Textes wichtig und hilfreich. Hier lohnt es mit Textauszeichnungen zu arbeiten – dies ist die Hervorhebung von (einzelnen) Textstellen mit typografischen Mitteln. Das kennt man z. B. aus der wörtlichen Rede (siehe der Abschnitt Anführungszeichen weiter oben).
Gründe für eine optische Hervorhebung gibt es einige:
Das kann die Betonung bestimmter Aussagen sein (siehe den Fettdruck hier im Artikel), man kann Inhaltliches herausstellen, Eigennamen kennzeichnen oder zum schnellen Auffinden bestimmter Inhalte.
Texte lassen sich auf unterschiedlichste Art und Weise auszeichnen.
Textliche Auszeichnungen…
Möglichkeiten der Auszeichnung:
Eine (typografische) Gestaltung lebt ja nicht nur von der Aussage und der ästhetischen Wirkung. Eine effektive Gestaltung schafft auch Hierarchien. Sie schafft Bedeutungen: Was ist besonders wichtig und was ist weniger wichtig.
Ohne eine typografische Hierarchie wird es für den Leser schwierig wichtige Informationen innerhalb des gesamten Design schnell zu identifizieren und die Bedeutungen schon visuell zu erfassen.
Die Hierarchie definiert, wie, bzw. in welcher Reihenfolge Inhalte durchgelesen werden.
Webdesign brauchen ständig Input und Inspirationen, natürlich auch typografische. Daher habe ich hier ein paar kuratierte Typografie-Galerien für dich. Wenn du diese kennst, hast du ausgesorgt 😉
Die Mutter aller Typo-Galerien! Mit vielen typografischen Zusatzinfos.
Ebenfalls schöne Galerie an Websites und deren Fonts.
Und Webdesigner brauchen nicht nur Inspirationen, sondern auch Online-Tools, die uns die Arbeit erleichtern.
Sonderzeichen und Fonts-Icons zur Auswahl und zum einfachen kopieren.
Ein Lorem Ipsum HTML Generator, der HTML-Elemente als Vorlage und zum Testen, der eigenen Formatierungen helfen kann.
Und hier findest du weitere über 95 Typo- und Fonts-Tools für deinen Webdesign-Alltag:
Du musst keine ungeahnten Design-Fähigkeiten besitzen, sondern ein paar einfachen Prinzipien folgen, um die Inhalte leicht(er) lesbar zu machen.
Die vorgestellten typografischen Regeln, Methoden, Tipps und dazugehörigen CSS-Eigenschaften helfen dir dabei eine typografisch anspruchsvolle und hochwertige Gestaltung umzusetzen. Die Intention ist es die Lesbarkeit der Websites im Netz an sich zu erhöhen, in dem du deine Inhalte besser lesbar machst.
Beachte die Infos und Tipps aus diesem Artikel und du hast eine gute Lesbarkeit deiner Inhalte gesichert.
Hierbei gilt: Mit gesundem Menschenverstand an Typografie heran gehen. Sich selber, bzw. den Text stetig hinterfragen:
Sieht dieser nicht nur gut aus, sondern vor allem „Ist dieser gut lesbar?“
Teste mehrere unterschiedliche Varianten aus, um die beste Option für eine gute Lesbarkeit deiner Inhalte zu finden.
Typography is not on the Web, it is the Web.
Mark Boulton, FOWD London 2009
Wer noch nicht genug hat (was ich ja hoffe), dem kann ich diese Artikel und Seiten zum Weiterlesen empfehlen:
A Five Minutes Guide to Better Typography
How to use typography in UI Design
Controlling Typography in CSS
Typography Handbook
Schlechte Typo vs. Gute Typo:
Gute Typografie kann den Unterschied machen zwischen:
Über 8.500 sind schon dabei:
Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.
Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…
Unser Content wird täglich von tausenden Webdesignern genutzt
Webdesign Journal – Webdesign aus Leipzig und Frankfurt am Main
Ein Projekt von hahnsinn – Webdesignagentur aus Leipzig & Frankfurt am Main
Über 8.500 sind schon dabei!
Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps:
