Zum Inhalt springen

Webtypografie

aus Wikipedia, der freien Enzyklopädie
Dies ist eine alte Version dieser Seite, zuletzt bearbeitet am 25. Oktober 2005 um 01:54 Uhr durch Steschke (Diskussion | Beiträge) (siehe Wikipedia:Löschkandidaten/15. Oktober 2005). Sie kann sich erheblich von der aktuellen Version unterscheiden.

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 basieren in Deutschland auf der DIN 5008.

Auszeichnungsarten

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 i- das em-Element und statt b besser strong 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 (ab XHTML 2.0 ersetzt durch das abbr-Element).
  • Beispiele werden mittels samp-Element ausgezeichnet.
  • Definitionen des umgebenden Elements werden mittels dfn-Element ausgezeichnet.
  • Betonung wird mittels em-Element ausgezeichnet.
  • Starke Betonung wird mittels strong-Element ausgezeichnet.
  • Quelltext wird mittels code-Element ausgezeichnet (ab XHTML 2.0 längere Quelltextabschnitte auch mit dem blockcode-Element).
  • Tastatureingaben werden mittels kbd-Element ausgezeichnet.
  • Variablen werden mittels var-Element ausgezeichnet.
  • Zitate werden mittels q-Element ausgezeichnet (ab XHTML 2.0 ersetzt durch das quote-Element).
  • Längere Zitate werden mittels blockquote-Element ausgezeichnet.
  • Quellenangaben werden mittels cite-Element ausgezeichnet.
zum Thema Zitate siehe auch Abschnitt Anführungszeichen

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 font sollten nicht mehr verwendet werden), besteht die Möglichkeit, eine Veränderung der Gestalt mittels CSS herbeizuführen.

Anführungszeichen

Üblicherweise werden Anführungszeichen in zwei Fällen angewendet:

  1. Zur Darstellung wörtlicher Rede.
  2. 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 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›

Einfache Anführungszeichen werden normalerweise nur innerhalb bereits in Anführungszeichen stehender Bereiche verwendet.

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) Wort1 — Wort2 Wort1_—_Wort2
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

Der deutsche Gedankenstrich (Halbgeviertstrich) lässt sich – bei Verwendung der richtigen Kodierung – unter Windows auch bei gedrückter Alt-Taste und Eingabe der Tastenfolge „0, 1, 5, 0“ auf dem Nummernblock (!) erzeugen, unter Mac OS X durch gleichzeitiges Drücken der Alt-Taste und der Bindestrich-Taste.

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 der Entitätenreferenz   ( ) wäre in den folgenden Beispielen teilweise   ( ) treffender, weil schmaler, doch wird dies von den meisten Browsern nicht korrekt dargestellt. Daher hat sich in der Webtypografie   durchgesetzt. Auch mit dem − (−) haben manche Browser Probleme, sodass dafür fast immer 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

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.

Siehe auch: Plenk

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Webtypografie&oldid=10259300“