TypographieWer ein Auge für korrekte Typographie hat, hat es heutzutage schwer. Durch die Verbreitung des Computers ist inzwischen jeder in der Lage, Drucksachen zu produzieren, auch ohne typographische Vorbildung. Dies treibt mitunter merkwürdige Blüten wie in Word verfasste, 100-seitige Arbeiten mit zehn verschiedenen Schriftarten, seitenindividuellen Rändern und Abständen und wild umherfliegenden Abbildungen. Während sich im wissenschaftlichen Bereich LaTeX als Quasi-Standard für den Textsatz etabliert und bei Wissenschaftlern ein Bewusstsein für Typographie erzeugt hat, fehlt dieses Bewusstsein in großen Teilen des Webs völlig. Aber warum sollte man im Web auf das Jahrhunderte alte Wissen der Typographen verzichten? Natürlich lassen sich einige typographische Regeln nicht einfach auf ein dynamisches Medium wie eine Webseite übertragen. Nichtsdestotrotz gibt es einige einfache Regeln für die Typographie im Web, die jeder Webautor beherzigen kann und sollte.

Schriftart und -grad

Web-SchriftartenDie Wahl der richtigen Schriftart ist eine wichtige, jedoch bei weitem nicht die einzige Entscheidung, die ein Webautor zu treffen hat. Grundsätzlich wird zwischen Schriftarten mit und ohne Serifen unterschieden. Serifen sind die kleinen Füßchen, die bei gedruckten Texten häufig zum besseren Erkennen der Zeilenhöhe angebracht sind. Die geringe Auflösung von Computerbildschirmen kann eine serifenhafte Schrift allerdings schwer lesbar machen, besonders bei kleinen Schriftgraden. Die nebenstehende Abbildung zeigt verschiedene Standard-Schriftarten mit und ohne Serifen. Schriftart und -grad werden über CSS-Attribute wie folgt festgelegt:

body {
	font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
	font-size: 14px;
}

Die Reihenfolge der genannten Schriftarten stellt dabei eine Hierarchie dar. Wird die erste Schriftart auf dem anzeigenden Computer nicht gefunden, wird nach der nächsten gesucht usw. Die Angabe sans-serif bezieht sich auf die Gruppe aller serifenlosen Schriftarten und wird verwendet, wenn keine der vorher genannten Schrifitartne gefunden werden kann. Dieser Link bietet einen guten Überblick über die gebräuchlichsten Schriftarten auf Windows- und Mac-Computern. Mit aktuellen Browsern ist es sogar möglich, nicht vorhandene Schriftarten automatisch während des Seitenaufrufs herunterzuladen. Leider kann man sich als Webdesigner aber noch nicht auf das Vorhandensein dieses Features bei jedem Besucher verlassen.

Der Schriftgrad sollte gerade bei längeren Texten nicht zu klein gewählt sein. Eventuell sollte man auch über einen Button nachdenken, mit dem der Besucher per CSS den Schriftgrad auf seine Bedürfnisse anpassen kann. Ein Zoomfeature bieten übrigens auch alle modernen Browser.

Schriftformat

Vorsichtig sein sollte man mit außergewöhnlicher Formatierung. Unterstreichungen sind üblicherweise ein Hinweis auf Links. MAJUSKELN LASSEN SICH NUR ÜBER KURZE STRECKEN BEQUEM LESEN. Zur Kursivschrift gibt es inzwischen zwei verschieden HTML-Tags, die abhängig von der Bedeutung zu setzen sind. Soll ein Wort nur kursiv geschrieben werden, wird es in i-Tags gesetzt. Wird es zusätzlich betont ausgesprochen, werden em-Tags gesetzt. Das gleiche gilt für Fettschreibungen. Normale Fettschrift wird über das b-Tag erreicht, während eine zusätzliche Betonung durch das strong-Tag ausgedrückt wird.

Farben

KontrastBei der Wahl der Farben ist für eine gute Lesbarkeit auf einen möglichst hohen Kontrast zwischen Hintergrund- und Textfarbe zu achten. Dies sollte allein schon deshalb geschehen, weil jeder Monitor Farben anders darstellt und auch jeder Mensch sie anders wahrnimmt. Rosa Schrift auf rotem Grund verbietet sich also nicht nur aus ästhetischen Gründen. Das gute alte Schwarz auf Weiß oder auch andersrum ((fast)wie in diesem Blog) ist immer eine gute Wahl.

body  {
	color: #FFFFFF;
	background: #000000;
}

Zeilenlänge

Die Erfahrung hat gezeigt, dass Zeilen nicht länger als 70 Zeichen lang sein sollten, um es dem Benutzer nicht zu schwer zu machen, den Anfang der nächsten Zeile zu finden. Da es sich bei einer Webseite um ein dynamsches Medium handelt, muss dies auch bei verschiedenen Browsergrößen berücksichtigt werden. Es empfiehlt sich daher, den Content in einem Div-Element fester Breite unterzubringen.

In Zeitungen, Zeitschriften und Büchern wird nicht umsonst Blocksatz verwendet. Dieser lässt sich leichter lesen und sieht auch ordentlicher aus als der gemeine Flattersatz.

Da die Zeilenumbrüche bei jedweder Textausrichtung dynamisch generiert werden, ist es sinnvoll, an bestimmten Stellen Zeilenumbrüche zu verbieten, zu erzwingen oder Angaben zur korrekten Trennung langer Wörter zu machen.

Verhindert werden können Zeilenumbrüche mit sogenannten geschützten Zeichen. Das bekannteste ist sicherlich das geschützte Leerzeichen (non-breaking space), das in HTML durch die Zeichenfolge   dargestellt wird, meistens jedoch ausschließlich zur Layout-Gestaltung misshandelt wird. Es findet beispielsweise bei großen Zahlen Verwendung (1 234 567). Bei Einheiten verwendet man am besten das schmale geschützte Leerzeichen (14 kg), das allerdings nur von modernen Browsern unterstützt wird und auch nicht in allen Schriftarten verfügbar ist. Des weiteren gibt es auch den geschützten Bindestrich , der jedoch nur verwendet wird, wenn der Teil vor dem Zeilenumbruch ansonsten sehr kurz werden würde (i‑Punkt).

Einen Zeilenumbruch erzwingen kann man in HTML mit dem Tag <br> bzw. in XHTML mit dem Tag <br />.

Wenn ein langes Wort bei der Erzeugung eines Blocksatzes Probleme macht, kann man dem Browser Hinweise geben, wie das Wort zu trennen ist (falls es nicht schon im Wörterbuch des Browsers enthalten ist). Dies geschieht mit Hilfe des weichen Bindestrichs &shy;. Dieser wird nur gesetzt, wenn an der entsprechenden Stelle ein Zeilenumbruch erfolgen soll. Ein gutes Beispiel für ein solches Wort ist das Rind­fleisch­eti­kett­ie­rungs­über­wa­chungs­auf­ga­ben­über­tra­gungs­ge­setz (Rind&shy;fleisch&shy;eti&shy;…).

Zeilenabstand

Lasst den Zeichen Platz zum Atmen, produziert aber auch keinen Lattenzaun. 120 bis 150 % des Schriftgrads ist der Zeilenabstand der Wahl.

Zeichen

Zu guter letzt möchte ich noch einen kleinen Überblick über Zeichen geben, die häufig falsch gesetzt werden. Sie sind übersichtlich in einer Tabelle dargestellt. Eine sehr gute Übersicht mit vielen Erläuterungen bietet auch diese Seite.

Name Zeichen HTML-Code
Deutsches Anführungszeichen unten &bdquo;
Deutsches Anführungszeichen oben &ldquo;
Einfaches Anführungszeichen links &lsquo;
Einfaches Anführungszeichen rechts &rsquo;
Schweizer/französisches Anführungszeichen links bzw. rechts (Guillemets) » &raquo;
Schweizer/französisches Anführungszeichen links bzw. rechts (Guillemets) « &laquo;
Kaufmännisches Und & &amp;
Euro-Zeichen &euro;
Promille &permil;
Paragraf § &sect;
Copyright © &copy;
Handelsmarke &trade;
Einfache Potenzzahlen ² &sup2;
Einfache Brüche ½ &frac12;
Minuszeichen &minus;
Plusminus ± &plusmn;
Kreuzprodukt × &times;
Multiplikation · &middot;
Division ÷ &divide;
Wurzel &radic;
geschütztes Leerzeichen &nbsp;
schmales Leerzeichen &thinsp;
schmales, geschütztes Leerzeichen
geschützter Bindestrich
weicher Bindestrich ­ &shy;
Gedankenstrich, Bis-Strich, Halbgeviertstrich, en-dash &ndash;
breiter Gedankenstrich, em-dash &mdash;
Auslassung &hellip;

Ich freue mich auf Eure Kommentare (keine Anmeldung erforderlich)!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.