Typografie für HTML

Typografie für HTML
Redundanz Die Artikel Webtypografie, Typografie für HTML, Typografie für digitale Texte und Typografie für den Webtext überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne diesen Baustein erst nach vollständiger Abarbeitung der Redundanz. Holger Thölking 01:04, 3. Nov. 2006 (CET)
Dieser Artikel oder Abschnitt bedarf einer Überarbeitung. Näheres ist auf der Diskussionsseite angegeben. Hilf mit, ihn zu verbessern, und entferne anschließend diese Markierung.

Dieser Artikel erläutert, wie typografische Regeln in HTML-Dokumenten umgesetzt werden können.

Inhaltsverzeichnis

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. unten).

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.

Bezeichnung Beispiel Ergebnis
Anführungszeichen (Deutschland, Österreich) „Beispiel“ „Beispiel“
Anführungszeichen (englisch) ‘example’ ‘example’
Einfache Anführungszeichen (Deutschland, Österreich) ‚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›

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) Слово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

Der deutsche Gedankenstrich (Halbgeviertstrich) lässt sich – bei Verwendung der richtigen Kodierung – unter Windows auch durch Eingabe von 0150 auf dem Ziffernblock bei gedrückter Alt-Taste erzeugen, unter Mac OS X durch gleichzeitiges Drücken der Wahltaste und der Bindestrich-Taste. Bei vielen MS-Windows-Programmen funktioniert auch die Kombination Strg-Taste und „–“ vom Ziffernblock.

Bei nicht-proportionalen Schriftarten, zum Beispiel Courier oder bei alten Schreibmaschinen, empfehlen Typografen, Leerzeichen um den Bis-Strich 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.

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
Versionsnummern
Abkürzungen, Paragraphen
CSS 2, XHTML 2.0
S. 48: § 11 Abs. 9
CSS 2, XHTML 2.0
S. 48: § 11 Abs. 9

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: <abbr title="zum Beispiel" style="white-space:nowrap; word-spacing:-0.1em;">z. B.</abbr>.

Einen vergleichbaren Effekt kann man auch für Maßangaben in Verbindung mit span erzielen.

Auslassungspunkte

Auslassungspunkte (…) werden mit der Entitätenreferenz &hellip; (&#8230;) 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 Auslassungspunkte lassen sich unter Windows auch durch Eingabe von „0 1 3 3“ auf dem Ziffernblock bei gedrückter Alt-Taste erzeugen.

Weblinks


Wikimedia Foundation.

Игры ⚽ Нужно сделать НИР?

Schlagen Sie auch in anderen Wörterbüchern nach:

  • Typografie für den Webtext — beschreibt die praktische Umsetzung der Webtypografie auf konkrete Gestaltungselemente. Die Webtypografie ist nicht zwingend an die Informationsübertragung über das Internet gebunden; dies ist nur der häufigste Fall. Die identische Situation… …   Deutsch Wikipedia

  • Typografie für digitale Texte — beschäftigt sich unter typografischen Gesichtspunkten mit der Umsetzung menschlicher Sprache in eine Kette digital kodierter Schriftzeichen. Typografie bezweckt, Texte lesbar und verständlich sowie optisch ansprechend zu präsentieren. Hierfür… …   Deutsch Wikipedia

  • HTML-Entity — Die Artikel Entitäten in Auszeichnungssprachen und Zeichen Entität Referenz überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen …   Deutsch Wikipedia

  • HTML-Entität — Die Artikel Entitäten in Auszeichnungssprachen und Zeichen Entität Referenz überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen …   Deutsch Wikipedia

  • Pica (Typografie) — Bleiletter (Schema) Details: 1. Punze 2. Schriftbild 3. Fleisch 4. Konus 5. Achselfläche 6. Schriftkegel 7. Signatur 8. Gießrille Abmessungen: a Kopf b Schulterhöhe a+b Schrifthöhe c Dickte d Kegelhöhe Der Schriftgrad, das Schriftsatzmaß oder die …   Deutsch Wikipedia

  • Typografische Zeichen in HTML — Dieser Artikel erläutert, wie typografische Regeln in HTML Dokumenten umgesetzt werden können. Inhaltsverzeichnis 1 Anführungszeichen 2 Striche 3 Leerzeichen 4 Auslassungspunkte …   Deutsch Wikipedia

  • Mediengestalter für Digital- und Printmedien — Mediengestalter Digital und Print ist ein Ausbildungsberuf, der in Deutschland die Nachfolge traditionsreicher Berufe wie etwa Schriftsetzer oder Notenstecher antritt. Durch die fortschreitende Digitalisierung wurden diese Berufsbilder… …   Deutsch Wikipedia

  • Sächsischer Staatspreis für Design — Der Sächsische Staatspreis für Design ist ein Designpreis, den der Freistaat Sachsen seit 1992 verleiht. Träger ist das Sächsische Staatsministerium für Wirtschaft, Arbeit und Verkehr. Die Bedingungen für die Nominierung sind, das die Unternehmen …   Deutsch Wikipedia

  • Ligatur (Typografie) — Bleiletter und Druckbild einer ſi Ligatur (langes s, i) in 12p Garamond Eine Ligatur (auch Buchstabenverbund, Mittellateinisch ligatura „Verbindung“, nach lat. ligarī „(ver)bunden werden“) ist in der Typografie die Verschmelzung zweier oder… …   Deutsch Wikipedia

  • Slanted – Das Gefühl Typografie — Slanted Beschreibung Blog und Magazin für Typografie, Gestaltung, Illustration und Fotografie Verlag Slanted, c/o MAGMA Brand Design GmbH Co KG Erstausgabe 2005 …   Deutsch Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”