Webtypografie

Die Webtypografie bezeichnet die bei der Webgestaltung relevanten Teile der Typografie und ihre spezielle Anwendung im Web, insbesondere die zu beachtenden Regeln bei der Verwendung einzelner Zeichen in HTML-Dokumenten. Sie gehört zu den Grundkenntnissen von Webgestaltern.

Nachfolgend soll ein Überblick über wichtige Elemente der Webtypografie, die jeder Webgestalter beherrschen sollte, gegeben werden.

Table of contents
1 Auszeichnungsarten
2 Anführungszeichen
3 Striche
4 Sonstiges
5 Weblinks

Auszeichnungsarten

Wie auch in anderen Medien, gibt es auch im Web mehrere Möglichkeiten der Texthervorhebung. Diese werden traditionell als Auszeichnungsarten bezeichnet. Man unterscheidet im Web zwischen logischen und physischen Auszeichnungsarten. Auch wenn Elemente dafür existieren, hat physische Textauszeichnung in Textauszeichnungssprachen spätestens seit der Einführung von CSS keinen Platz mehr (insbesondere sollte statt i-Element das em-Element und statt b-Element das strong-Element verwendet werden). Nachfolgend sind daher nur die logischen Auszeichnungsarten in HTML aufgelistet:

Darüber hinaus gibt es weitere Elemente. Je nach Benutzereinstellungen, Plattform, Webbrowser, Schriftarten usw. werden ausgezeichnete Bereiche unterschiedlich dargestellt. Während HTML nicht dafür missbraucht werden sollte, darauf Einfluss zu nehmen (insbesondere sollten veraltete Elemente aus der Zeit vor CSS wie font nicht mehr benutzt werden), besteht die Möglichkeit eine Veränderung der Gestalt mittels CSS herbeizuführen.

Anführungszeichen

Besonders bei den Anführungszeichen werden häufig Fehler gemacht. Hier eine Auflistung zur korrekten Verwendung verschiedener Anführungszeichen, wobei beliebte Fehlerquellen hervorgehoben sind. Leerzeichen sind im Ergebnis der Übersicht halber mit einem Unterstrich hervorgehoben:
Bezeichnung Beispiel Ergebnis
Anführungszeichen (deutsch) „Beispiel“ „Beispiel“
Anführungszeichen (englisch) “example” “example”
Einfache Anführungszeichen (deutsch) ‚Beispiel‘ ‚Beispiel‘
Einfache Anführungszeichen (englisch) ‘example’ ‘example’
Guillemets (deutsch) »Beispiel« »Beispiel«
Guillemets (französisch) « exemple » «_exemple_»
Guillemets (schweizerisch) «Beispiel» «Beispiel»
Einfache Guillemets (deutsch) ›Beispiel‹ ›Beispiel‹
Einfache Guillemets (französisch) ‹ exemple › ‹_exemple_›
Einfache Guillemets (schweizerisch) ‹Beispiel› ‹Beispiel›

Striche

Auch Striche werden oft verwechselt. Insbesondere wird der Bindestrich, der sich auf der Tastatur neben der rechten Shift-Taste befindet, für alle möglichen Striche missbraucht.
Bezeichnung Beispiel Ergebnis
Bindestrich, Trennstrich (deutsch) E-Mail E-Mail
Gedankenstrich (deutsch) Wort1 – Wort2 Wort1_–_Wort2
Gedankenstrich (englisch) word1—word2 word1—word2
Streckenstrich (deutsch) Kiel–Berlin Kiel–Berlin
Gegen-Strich (deutsch) Schalke – HSV Schalke_–_HSV
Bis-Strich (deutsch) 1979–2010 1979–2010
Bis-Strich (englisch) 1979/2010 1979/2010

Sonstiges

Statt der Entity   wäre in den folgenden Beispielen wohl theoretisch &nnbsp; treffender, weil schmaler. Dies wird aber in sehr vielen Webbrowsern nicht korrekt dargestellt. Daher hat sich in der Webtypografie   durchgesetzt. Leider haben auch manche Browser mit − noch Probleme. Daher wird dafür stattdessen häufig der Bindestrich verwendet wird.
Bezeichnung Beispiel Ergebnis
Abkürzungen z. B. z._B.
Maßangaben 100 km, 98 % 100_km, 98_%
Rechenzeichen −2 + 5 = 3 −2_+_5_=_3
Zahlen 1 234,567 89 1_234,567_89

Weblinks