Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » Webdesign verstehen und anwenden » Schriften und Webdesign » Typografie
Typografie für das Internet

Typografie im Internet

Für alle, die aus dem klassischen Druckbereich kommen - Internet ist etwas komplett anderes, und wenn der "klassische Drucker" sich nicht von seiner Welt lösen kann, ist er als Webdesigner völlig fehl am Platz!

Anbei ein paar Hinweise, die auf Webseiten weder üblich und oft nicht gangbar sind.

exaktes Layout

vergessen (und zwar sofort) - allein durch die unterschiedlichen Browser und Plattformen (Windows, Mac, Unix) gibt es immer Unterschiede. Zum Beispiel werden auf dem Mac i. d. R. die Schriften kleiner dargestellt.

Unterschneidungen

haben durchaus ihren Sinn, sind allerdings nicht in der aktuellen Browsergeneration integriert - also vergessen.

erzwungene Satzumbrüche zwecks Design

macht wegen der Relativität der Darstellung eigentlich keinen Sinn und wird von manchen Webdesignern meistens nur gemacht, damit der Kunde nicht weiter nervt. Wir sprechen hier nicht von Absätzen, die den Text gliedern!

Trennstrich, Gedankenstrich, Geviertstrich (englisch hyphen)

Trennstrich -

Trennstriche (Divis, Bindestriche) werden nur zwischen Kuppelwörtern verwendet. Auf keinen Fall, um ein Wort für einen Umbruch auf die nächste Zeile zu trennen. Das ist eine Todsünde!

Der Trennstrich muss nicht speziell eingegeben werden - es wird das Minuszeichen verwendet.

Gedankenstrich –

Auf den meisten Internetseiten nicht besonders üblich, da die meisten Menschen keinen Unterschied sehen und durch die Gewohnheit meiner Meinung nach dieser Unterschied auch mehr und mehr verschwinden wird.

Ein Gedankenstrich ist korrekt ein Halbgeviertelstrich - er hat genau die halbe Breite eines Gevierts. Vor und nach diesem ist ein Leerzeichen üblich. Am besten ein geschütztes Leerzeichen (wird nicht getrennt - als HMTL-Tag )

Als HTML-Tag muss er gesondert ausgezeichnet werden mit dem HTML-TAG – und mit den geschützten Leerzeichen sieht das dann so aus: – (viel Spaß dabei :)

Geviertstrich —

Noch unüblicher im Netz - hat die Breite eines vollen Gevierts. Wird als Auslassungszeichen für Centbeträge direkt nach dem Komma gesetzt, also € 12,—

Korrekte Gänsefüßchen (An- und Abführungszeichen)

Auch wer hier nach typo korrekte Zeichen haben will, darf mehr arbeiten. Dabei gilt immer zu bedenken, dass je nach Land die Anführungszeichen anders gehandhabt werden :)

Anführungszeichen nach Land:
„in Deutschland“
‚in Deutschland‘

und mehr davon - andere Länder andere Sitten
«Frankreich, Italien, Schweiz»
»Schwedisch«

und sollten Sie noch motiviert sein, dies umzusetzen, die entsprechenden HTML-Tags dazu:

“ doppeltes Anführungszeichen
” doppeltes Abführungszeichen
‘ einfaches Anführungszeichen
’ einfaches Abführungszeichen
« « angewinkelte Anführungszeichen links
» » angewinkelte Anführungszeichen rechts

Leerzeichen

Ein Leerzeichen ohne Umbruch wird über   erstellt. Dadurch wird verhindert, dass ein Zeilenumbruch an dieser Stelle erfolgen kann.

Die übliche Breite eines Leerzeichens beträgt ein Viertelgeviert (Abhängigkeit zum Schriftdesign besteht!).

schmales Leerzeichen

Ein schmales Leerzeichen wird bei zusammengehörende Texteinheiten verwendet - hier ist das beste Beispiel die Abkürzung „z. B.“ oder „i. d. R.“ - dies wird in HTML erreicht über   bzw. hexadezimal über  

Noch besser ist es in der Form als schmales umbruchgeschütztes Leerzeichen - dies kann nur hexadezimal angegeben werden über  

Auch wenn es leider üblich ist, dass kaum noch jemand auf diese Feinheiten achtet, hier der direkte Vergleich in großer Schrift von der Verwendung:

z. B. (falsch)
z. B. (korrekt)
z.B. (ohne)

Leerzeichen mit der Breite n und m

Die Zeichenfolge   steht für ein Leerzeichen von der Beite n
Die Zeichenfolge   steht für ein Leerzeichen von der Beite m

Zahlen richtig gesetzt

Als Vereinfachung empfiehlt sich, zwischen den Zahlen ein geschütztes Leerzeichen zu setzen, also als HTML-Tag

Telefon- und Faxnummern:
werden jeweils von rechts ausgehend in Zweiergruppen aufgeteilt:
Bsp: Telefon (0 70 73) 9 10 16 10

IBAN (International Bank Account Number) nach ISO-Norm ISO 13616-1:2007 in Viererschritten von links üblich:
IBAN: DE64 1234 0000 1234 1234 12
Die IBAN in Deutschland hat 22 Stellen, in der Schweiz 21 und in Österreich 20.

BIC (Business Identifier Code) wird ungegliedert angegeben:
BIC: DEUTDEFF123

Bankleitzahlen:
werden von links nach rechts in 3er Gruppen aufgeteilt (also 3 3 2)
Bsp: BLZ 300 902 22

Kontonummern:
von rechts nach links in 3er Gruppen
Bsp: Konto 8 412 564 324

größere Zahlen
können zwecks Übersichtlichkeit in 3er Gruppen von rechts gruppiert werden.
Bsp:
8 300 000 Pageviews
340 000 Stammkunden
1 500 Neuanmeldungen

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details