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.
Table of contents |
2 Anführungszeichen 3 Striche 4 Sonstiges 5 Weblinks |
Wie auch in anderen Medien, gibt es auch im Web mehrere Möglichkeiten der Texthervorhebung, die als Auszeichnungsarten bezeichnet werden. 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 sollten statt des
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 veraltete Elemente aus der Zeit vor Cascading Style Sheets (CSS) wie
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:
Auszeichnungsarten
i
- das em
-Element und statt b
besser strong
verwendet werden). Nachfolgend sind daher nur die logischen Auszeichnungsarten in HTML aufgelistet:
zum Thema Zitate s. a. Abschnitt Anführungszeichenabbr
-Element ausgezeichnet.
acronym
-Element ausgezeichnet.
samp
-Element ausgezeichnet.
dfn
-Element ausgezeichnet.
em
-Element ausgezeichnet.
strong
-Element ausgezeichnet.
code
-Element ausgezeichnet.
kbd
-Element ausgezeichnet.
var
-Element ausgezeichnet.
q
-Element ausgezeichnet.
blockquote
-Element ausgezeichnet.
cite
-Element ausgezeichnet.font
sollten nicht mehr verwendet werden), besteht die Möglichkeit, eine Veränderung der Gestalt mittels CSS herbeizuführen.Anführungszeichen
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› |
Die korrekte Verwendung von Anführungszeichen wird von CSS22 durch die quotes-Eigenschaft unterstützt, welche aber nur von aktuellen Browsern ausgewertet wird: W3C Recommendation CSS2, quotes.
Auch Striche werden oft verwechselt. Insbesondere wird der Bindestrich, der sich auf der Tastatur neben der rechten Umschalttaste befindet, für alle möglichen Striche missbraucht.
Striche
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 |
Strich bei Währungsangaben | 42,– EUR
| 42,–_EUR |
Statt der Entität Sonstiges
wäre in den folgenden Beispielen wohl  
treffender, weil schmaler, doch leider wird dies von den meisten Browsernn nicht korrekt dargestellt. Daher hat sich in der Webtypografie
durchgesetzt. Leider haben auch manche Browser mit −
noch Probleme, sodass dafür 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 × 1 = 6 ⁄ 2 −2 + 5 × 1 = 6 ÷ 2
| ⋅ −2_+_5_*_1_="_6_-_2 ⋅ −2_+_5_*_1_=_6_./._2 |
Zahlen | 1 234,567 89
| 1_234,567_89 |
Siehe auch: Plenk
Weblinks