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.
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:
- Abkürzungen werden mittels
abbr-Element ausgezeichnet. - Akronyme werden mittels
acronym-Element ausgezeichnet. - Beispiele werden mittels
samp-Element ausgezeichnet. - Definitionen werden mittels
dfn-Element ausgezeichnet. - Emphatische Betonung wird mittels
em-Element ausgezeichnet. - Quellenangaben werden mittels
q-Element ausgezeichnet. - Quelltext wird mittels
code-Element ausgezeichnet. - Starke Betonung wird mittels
strong-Element ausgezeichnet. - Tastatureingaben werden mittels
kbd-Element ausgezeichnet. - Variablen werden mittels
var-Element ausgezeichnet. - Zitate werden mittels
cite-Element ausgezeichnet.
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
|
|
| 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 Entität 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
- typemotion: Typo-Basics, diverse PDF-Anleitungen zum Thema
- Duden: Regeln für die Textverarbeitung (PDF)
- Typographie für Webautoren
- Typolexikon.de