Tipps zum Thema Typografie und Sonderzeichen im Webdesign

Abstände zwischen Buchstaben

Um Abstände zwischen Buchstaben zu verändern nutzt man üblicherweise  . Ein gutes Beispiel ist hier die Abkürzung „z. B.“ wo man gleich sieht das der Abstand zu groß ist und bei „z.B.“ zu gering. Ideal ist hier „z. B.“ mit einem halben Abstand.
Zu den Abständen kann man noch sagen das man im allgemeinen bis zu vier Ziffern ohne Abstand setzt und bei Postleitzahlen gleich gar keine Abstände. Telefonnummern werden von hinten beginnend in Zweiergruppen zusammengefasst. Kontonummern und Bankleitzahlen jedoch in Dreiergruppen ebenfalls von hinten beginnend.

Zeilenabstände

Den Zeilenabstand verändert man am besten über die CSS Formatierung. In der Regel wählt man einen 120-150% größeren Zeilenabstand der Schrifthöhe. Also bei einer Schriftgröße von 10 Punkten wählt man 12 Punkte für den Zeilenabstand. Alles was über 150% liegt zerreist den Text und wirkt unschön. Die CSS Formatierung erfolgt mittels der Anweisung „line-height: xx;“.

Sonderzeichen per HTML Entity oder Unicode

Im Web hat hat sich inzwischen der Unicode Zeichensatz durchgesetzt, welcher so gut wie alle Zeichen der Schriftkulturen auf der Welt umfaßt. Unicode Zeichen lassen sich in HTML Dokumenten per &#xxxx; Notation anzeigen. Damit der Browser nun die Zeichen auch korrekt darstellt, muß man noch angeben in welcher Kodierung er diese lesen soll. Dies passiert dann im Kopf Bereich der Webseite.
Für westliche Länder bietet sich zum Beispiel ISO-8859-1 an, welche von sich aus schon Umlaute darstellen kann. Eine weitere Zeichenkodierung die man öfter findet ist UTF-8, welche mehr Zeichen versteht. XHTML Dokumente sind sogar schon per Default in UTF-8 kodiert. Gibt man also nichts anderes an wird UTF-8 angenommen.
Damit man mittels des Unicodes die Sonderzeichen nutzen kann, muß man natürlich darauf achten das die gewählte Schriftart auf der Webseite, auch die gewünschten Sonderzeichen enthält.

Zeichen   HTML Entity   Unicode
Deutsche Anführungszeichen „ „
Deutsche Anführungszeichen “ “
Schweizer/franz. Anführungszeichen » » »
Schweizer/franz. Anführungszeichen « « «
Einfache Anführungsz. (Zitat im Text) ‘ ‘
Einfache Anführungsz. (Zitat im Text) ’ ’
Euro Zeichen € €
Kaufmännisches Und (Ampersand) & & 
Umlaut ä ä
Umlaut Ä Ä
Umlaut ö ö
Umlaut Ö Ö
Umlaut ü ü
Umlaut Ü Ü
Scharfes S ß ß
Promille ‰ ‰
Paragraf § § §
Copyright © © ©
Kleines als < &lt;
Größer als > &gt;
Potenzzahl ² &sup2; &#xB2;
Potenzzahl ³ &sup3; &#xB3;
Einfacher Bruch ½ &frac12; &#xBD;
Einfacher Bruch ¼ &frac14; &#xBC;
Einfacher Bruch ¾ &frac34; &#xBE;
Pfeil &larr; &#x2190;
Pfeil &uarr; &#x2191;
Pfeil &rarr; &#x2192;
Pfeil &darr; &#x2193;
Pfeil &harr; &#x2194;
Pfeil &rArr; &#x21D2;
Auslassungspunkte &hellip; &#x2026;
Bindestrich ohne Umbruch i‑Punkt &#x2011;


nach oben