Gourt Home::Gourt :: 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 Webdesignern und basiert in Deutschland auf der DIN 5008.''
Anführungszeichen
Üblicherweise werden Anführungszeichen in zwei Fällen angewendet:
- Zur Darstellung wörtlicher Rede.
- Zur Hervorhebung von Ironie.
Unüblich hingegen ist es, Betonungen oder Titel von Büchern, Liedern etc. durch Anführungszeichen darzustellen. Hierfür sollte vielmehr eine betonte Darstellung verwendet werden (s. oben).
Bei der Anwendung von Anführungszeichen werden häufig Fehler gemacht. Hier eine Auflistung der korrekten Verwendung verschiedener Anführungszeichen. Leerzeichen sind im Ergebnis der Übersicht halber mit „␣“ hervorgehoben.
- style="background-color:#B3B7FF" | Bezeichnung | Beispiel | Ergebnis | - | Anführungszeichen (deutsch) | „Beispiel“
| „Beispiel“ | - | Anführungszeichen (englisch) | ‘example’
| ‘example’ | - | Einfache Anführungszeichen (deutsch) | ‚Beispiel‘
| ‚Beispiel‘ | - | Doppelte Anführungszeichen (englisch, im Amerikanischen Standard) | “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› |
|---|
Anführungszeichen werden für Zitate verwendet oder um einzelne Wörter als ironisch zu markieren. Sie werden jedoch nicht zur Betonung verwendet. Auch dies wird oft falsch gemacht. Zur Betonung eignen sich stattdessen die Elemente em und strong.
Die korrekte Verwendung von Anführungszeichen wird von CSS2 durch die quotes-Eigenschaft unterstützt, welche aber nur von aktuellen Browsern ausgewertet wird: W3C Recommendation CSS2, quotes.
Striche
Auch Striche werden oft verwechselt. Insbesondere wird der Bindestrich, der sich auf der deutschen Tastatur links neben der rechten Umschalttaste befindet, für alle möglichen Striche missbraucht.
| Bezeichnung | Beispiel | Ergebnis |
|---|---|---|
| Bindestrich, Trennstrich (deutsch) | H-Milch
| H-Milch |
| Gedankenstrich (deutsch) | Wort1 – Wort2
| Wort1 – Wort2 |
| Gedankenstrich (englisch) | word1—word2
| word1—word2 |
| Gedankenstrich (russisch) | Слово1 — Слово2
| Слово1 — Слово2 |
| 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 |
Bei nicht-proportionalen Schriftarten, zum Beispiel Courier oder bei alten Schreibmaschinen, empfehlen Typografen um den Bis-Strich Leerzeichen zu setzen.
Leerzeichen
Häufig will man einen Umbruch durch ein Leerzeichen vermeiden. So sieht es meist nicht gut aus, wenn in mehrteiligen Abkürzungen ein Zeilenumbruch erfolgt. Daher verwendet man hier das geschützte Leerzeichen.
Statt des normalen geschützten Leerzeichens ( ) wäre in den folgenden Beispielen teilweise ein schmales geschütztes Leerzeichen ( ) treffender, wird aber von vielen Browsern noch nicht unterstützt. Auch mit dem − (−) haben manche Browser Probleme, sodass dafür fast immer der Bindestrich verwendet wird.
- style="background-color:#B3B7FF" | 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 |
|---|
Für mehrteilige Abkürzungen eignen sich jedoch auch Formatierungen mit CSS, die einen direkten Einfluss auf den Zeilenumbruch von Abkürzungen und die Breite des Leerzeichens haben. Beispielsweise lässt sich das abbr-Element global formatieren. Im aktuellen Internet Explorer funktioniert dies zwar nicht, wird dort jedoch anders als die Verwendung von   nicht als störend empfunden. Zudem lässt sich so die Bedeutung einer Abkürzung über das title-Attribut hinterlegen und ggf. formatieren.
Beispiel: z. B..
Einen vergleichbaren Effekt kann man auch für Maßangaben in Verbindung mit span erzielen.
Auslassungspunkte/Ellipse
Auslassungspunkte werden üblicherweise mit der Ellipse (…) dargestellt. Diese wird mit der Entitätenreferenz … (…) dargestellt. Vor ihr steht ein Leerzeichen, wenn das vorhergehende Wort beendet wurde. Wird nur ein Teilwort (z. B. „Teilw…“) abgetrennt, so steht davor hingegen kein Leerzeichen.
Die Ellipse lässt sich unter Windows auch durch Eingabe von „0 1 3 3“ auf dem Ziffernblock bei gedrückter Alt-Taste erzeugen.
Siehe auch: Plenk
Weblinks
- typemotion: Typo-Basics, diverse PDF-Anleitungen zum Thema
- Duden: Regeln für die Textverarbeitung (PDF)
- Typografie für Webautoren
- Typolexikon.de
- W3C Recommendation CSS2
"Webtypografie"