Studium, Ausbildung und Beruf

web uni-protokolle.de
 powered by
NachrichtenLexikonProtokolleBücherForenSamstag, 18. Januar 2020 

Webtypografie


Dieser Artikel von Wikipedia ist u.U. veraltet. Die neue Version gibt es hier.
Die Webtypografie bezeichnet die bei der Webgestaltung relevanten Teile der Typografie und ihre spezielle Anwendung im Web insbesondere die zu beachtenden Regeln bei Verwendung einzelner Zeichen in HTML -Dokumenten. Sie gehört zu den Grundkenntnissen von Webgestaltern .

Nachfolgend soll ein Überblick über wichtige der Webtypografie die jeder Webgestalter beherrschen sollte werden.

Inhaltsverzeichnis

Auszeichnungsarten

Wie auch in anderen Medien gibt auch im Web mehrere Möglichkeiten der Texthervorhebung. werden traditionell als Auszeichnungsarten bezeichnet. Man unterscheidet im Web zwischen und physischen Auszeichnungsarten. Auch wenn Elemente dafür hat physische Textauszeichnung in Textauszeichnungssprachen spätestens seit 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 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.
  • Betonung wird mittels em -Element ausgezeichnet.
  • Starke Betonung wird mittels strong -Element ausgezeichnet.
  • Quelltext wird mittels code -Element ausgezeichnet.
  • Tastatureingaben werden mittels kbd -Element ausgezeichnet.
  • Variablen werden mittels var -Element ausgezeichnet.
  • Zitate werden mittels q -Element ausgezeichnet.
  • Längere Zitate werden mittels blockquote -Element ausgezeichnet.
  • Quellenangaben werden mittels cite -Element ausgezeichnet.

zum Thema Zitate s. a. Abschnitt Anführungszeichen

Darüber hinaus gibt es weitere Elemente. nach Benutzereinstellungen Plattform Webbrowser Schriftarten usw. werden Bereiche unterschiedlich dargestellt. Während HTML nicht dafür werden sollte darauf Einfluss zu nehmen (insbesondere veraltete Elemente aus der Zeit vor CSS wie font nicht mehr benutzt werden) besteht die eine Veränderung der Gestalt mittels CSS herbeizuführen.

Anführungszeichen

Besonders bei den Anführungszeichen werden häufig gemacht. Hier eine Auflistung zur korrekten Verwendung Anführungszeichen wobei beliebte Fehlerquellen hervorgehoben sind. Leerzeichen im Ergebnis der Übersicht halber mit einem 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›

Die korrekte Verwendung von Anführungszeichen von CSS 2 durch die quotes -Eigenschaft unterstützt welche aber nur von aktuellen ausgewertet wird: W3C Recommendation CSS2 quotes

Striche

Auch Striche werden oft verwechselt. Insbesondere der Bindestrich der sich auf der Tastatur neben rechten Shift-Taste befindet für alle möglichen Striche

Bezeichnung Beispiel Ergebnis
Bindestrich Trennstrich (deutsch) E - Mail 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

Sonstiges

Statt der Entität   wäre in den folgenden Beispielen wohl &nnbsp; treffender weil schmaler. Dies wird aber sehr vielen Webbrowsern nicht korrekt dargestellt. Daher hat sich der Webtypografie   durchgesetzt. Leider haben auch manche Browser − noch Probleme. Daher wird dafür stattdessen der Bindestrich verwendet.

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

Siehe auch: Plenk

Weblinks



Bücher zum Thema Webtypografie

Dieser Artikel von Wikipedia unterliegt der GNU FDL.

ImpressumLesezeichen setzenSeite versendenSeite drucken

HTML-Code zum Verweis auf diese Seite:
<a href="http://www.uni-protokolle.de/Lexikon/Webtypografie.html">Webtypografie </a>