Startseite aufrufen
« Zurück
Vor »

Kommentar schreiben | Drucken

Mini-Exkurs in Web-Typografie

-- 19.September 2005 (#40)

Typografie ist ein weites Feld und beschäftigt sich mit ausschweifenden Dingen wie Schriftart, Schriftgröße, Zeilenlänge etc. und das auch noch auf unterschiedlichsten Medien mit unterschiedlichen Formaten – ich beschränke mich lediglich auf die richtige Verwendung von Sonderzeichen, die man beim Webdesign beachten sollte. In diesem kleinen Crash-Kurs wird man sicher ein paar nützliche Dinge erfahren, um seiner Seite den richtigen Feinschliff zu geben. Inbesondere in den neumodischen Blogs sind Sonderzeichen allgegenwärtig.


Anführungsstriche

Am Computer und vor der Schreibmaschine hat sich das Sekunden- bzw. Zoll-Zeichen (") etabliert. Typografisch gesehen ist das allerdings nicht korrekt, da im Deutschen zum einen die Anführungsstriche zu Beginn unten stehen und zum anderen, weil dem Zoll-Zeichen die charakteristischen Häkchen fehlen. Das Zeichen für Zoll sind zwei gerade Striche, während Anführungsstriche einen leichten Schwung haben. Beispiel: „Das Wetter ist schön!“, sagte Peter.
Neben den normalen doppelten Anführungsstrichen gibt es noch die einfachen Anführungsstriche, welche am Anfang eines Zitats ebenfalls unten stehen und ein kleines Häkchen besitzen. Einfache Anführungsstriche werden bei Zitaten innerhalb von Zitaten verwendet. Beispiel: „Richtig, ‚Ein kleiner Schritt für mich, aber ein großer Sprung für die Menschheit’, sagte Armstrong, als er den Mond betrat“, antwortete Peter.

Die HTML/XHTML-Entities für Anführungsstriche sind:
„ („)
“ (“)
‚ (‚)
‘ (’)

Da Netscape 4.x leider Probleme hat, die Entities für Anführungstriche darzustellen, wäre es sinnvoller, stattdessen die Unicode-Schreibweise zu bevorzugen:
„ („)
“ (“)
‚ (‚)
’ (’)


Apostroph

Apostrophe werden eingesetzt, sobald ein Buchstabe weggelassen wird. Das kann z.B. passieren, wenn zwei Wörter zusammengefasst werden oder ein Wort nicht ausgeschrieben wird. Beispiel: „Wie wird’s Wetter heute wohl?’, „Was soll’s?“, „Wie geht’s dir heute?“, „Hast du ’n Computer?“, „Heut’ war ich Schuhe kaufen“. Das Apostroph taucht fast nur in der Umgangssprache auf; im Papierdeutsch wird man es hingegen nur sehr selten antreffen.
Auch der Apostroph wurde auf Schreibmaschine und Computer gegen das Zoll-, oder besser gesagt durch das Minuten-Zeichen (') ersetzt und wird somit meist als gerade Strich dargestellt, jedoch hat auch der Apostroph ein kleines Häkchen. Der Apostroph ist typografisch sogar mit dem einfachen abschließenden Anführungsstrich identisch, also kann man auch hier ‘, oder besser ’ verwenden.
Fälschlicherweise wird häufig auch das Akut- (`) oder Gravis-Akzentzeichen (´) anstelle des richtigen Apostrophs verwendet. Akzentzeichen gehören allerdings fast immer über einen Buchstaben und sollten nicht als Apostroph-Zeichen missbraucht werden. Akzentzeichen haben einen breiten Abstand als der richtige Apostroph und führen dazu, dass eine unschöne sichtbare Lücke entsteht.


Guillemets

Guillemets sind sozusagen die französischen Anführungsstriche. Guillemets sind zwei Spitze Klammern, die nach Außen zeigen. Beispiel: «Hallo Freunde!», sagte Peter.
Im Deutschen hingegen können Guillemets alternativ zu den normalen Anführungsstrichen eingesetzt werden, der Unterschied ist allerdings, dass die spitzen Klammern nach Innen zeigen. Beispiel: »Hallo Freunde!«, sagte Peter.
Die spitzen Klammern werden bevorzugt im Buchdruck und im Internet benutzt, Gänsefüßchen hingegen werden vorwiegend in handschriftlichen Texten, Zeitungen und allen anderen Schriftdokumenten eingesetzt.

Auch bei Guillemets gibt es, wie bei unseren Gänsefüßchen, einfache und doppelte Guillemets. Einfache Guillemets werden hier ebenfalls bei Binnenzitaten eingesetzt. Beispiel: »Richtig, ›Ein kleiner Schritt für mich, aber ein großer Sprung für die Menschheit‹, sagte Armstrong, als er den Mond betrat«, antwortete Peter.

Die HTML/XHTML-Entities für Anführungsstriche sind:
» (»)
« («)
› (›)
‹ (‹)

Guillemets sind übrigens nicht zu verwechseln mit den spitzen Klammern, die man in HTML/XHTML verwendet. Guillemets sind wesentlich schmaler und dezenter.


Geviertstrich (Bindestrich, Gedankenstrich)

Der Geviertstrich ist ein waagerechter Stricht und hat unverschiedliche Funktionen. Er wird als Bindestrich, Gedankenstrich, Streckenstrich, Minuszeichen, Kommandostrich, Bis-Strich, Auslassungsstrich und noch einigen anderen Dingen verwendet. Seinen Namen hat der Geviertstrich durch die Maßeinheit Geviert erhalten. Welche Funktion er hat, hängt maßgeblich von seiner Länge ab.

Viertelgeviertstrich: -
Ein Viertelgeviertstrich ist meist ein Bindestrich, kann aber auch ein Ergänzungsbindestrich, Datumstrennstrich oder Telefonnummerntrennstrich ein. Ein Viertelgeviertstrich wird ganz normal über die Minus-Taste bzw. Bindestrich-Taste auf der Tastatur erzeugt.

Halbgeviertstrich: –
Ein Halbgeviertstrich wird überwiegend als (kurzer) Gedankenstrich benutzt, weitere Funktionen sind: Streckenstrich, Kommandostrich, Strich bei Währungsangaben, Bis-Strich, Gegen-Strich, Auslassungsstrich, Anstrich. Die HTML-Entity für den Halbgeviertstrich ist –. Aus Gründen der Abwärtskompatibilität zu Netscape 4.x, wäre es besser, den Unicode – zu verwenden. Der Halbgeviertstrich hat im Englischen auch den Namen „n-Dash“ und rührt daher, dass er so lang wie der Buchstabe n ist.

Geviertstrich: —
Ein normaler Geviertstrich wird im Englischen als (langer) Gedankenstrich verwendet. Im Deutschen wird er nur selten verwendet, manchmal trifft man ihn aber als Spiegelstrich an. Die HTML-Entity für den Geviertstrich ist —, jedoch sollte man auch hier besser die Unicode-Schreibweise wählen, welche für den Geviertstrich — ist. Der Geviertstrich hat im Englischen auch den Namen „m-Dash“. Analog zum n-Dash hat der m-Dash den Namen daher, dass er so lang ist wie ein m.

Zusätzlich gibt es noch das Minus-Zeichen. Das Minus-Zeichen ist so lang wie ein Halbgeviertstrich, allerdings etwas tiefer als andere Geviertstriche.


Der häufigste typografische Fehler ist, dass für den Gedanken- und Minusstrich der Viertelgeviertstrich verwendet wird.


Ellipse

Ellipsen oder Auslassungszeichen werden verwendet, wenn ein Teil eines Wortes oder eine ganze Wortgruppe ausgelassen wird. Wenn nur ein Teil eines Wortes ausgelassen wird, so wird kein Leerzeichen vor der Ellipse gesetzt. Beispiel: „Ich fühle mich heute be…“, sagte Peter.
Wenn ein ganzes Wort oder mehrere Wörter ausgelassen werden, dann wird ein Leerzeichen eingefügt. Beispiel: „Ich gestehe dir, dass ich dich unendlich …“, überwand sich Peter.

Die HTML-Entity für die Ellipse ist …. Da ältere Browser Probleme mit der Darstellung dieses Entities haben, sollte der Unicode … eingesetzt werden.

Im Unterschied zu normalen Punkten ist die Ellipse etwas breiter.


Mathematische Zeichen

Bei den mathematischen Sonderzeichen beschränke ich mich auf die vier Grundrechenarten, also Addition, Subtraktion, Multiplikation und Division.

Das Pluszeichen wird ganz über das Plus-Zeichen auf der Tastatur erzeugt. Etwas irritierend ist, dass die Bindestrich-Taste bzw. Minus-Taste auf der Tastatur leider kein richtiges Minus-Zeichen ist. Die Darstellung des Minus-Zeichens kann man über die HTML-Entity − erreichen; es ist so lang wie ein Bindestrich, jedoch an Zahlen und andere Rechenzeichen angepasst und daher etwas tiefer. Da aber leider nicht alle Browser − anzeigen können, ist es vielleicht doch empfehlenswert, wieder auf die Minus- und Bindestrich-Taste auf der Tastatur zurückzugreifen.

Für Multiplikation und Division gibt es verschiedene Darstellungen. Die Darstellung über die Tastatur per * und / ist eher unbefriedigend und gleicht auch nicht der Darstellung, die man aus seiner Grundschulzeit und der Fachliteratur (Mathematik-Büchern) kennt.
Es gibt allerdings Alternativen, welche man sich nach Gutdünken aussuchen kann.

Für die Multiplikation gibt es Varianten (inkl. Entities):
× (×)
∗ (∗)
∙ (∙) (kein Entity für dieses Sonderzeichen verfügbar)

Für die Division gibt es Varianten (inkl. Entities):
÷ (÷)
(:) (kein Entity nötig, Eingabe über Tastatur)


Geschrieben von
Magdalena (anonym)
-- 12.April 2010 (#6)

Ich finde es toll, dass hier wirklich versucht wird, auf die Mikrotypographie ein wenig Acht zu geben (was leider viel zu selten gemacht wird). Ein großes Lob dazu! Jedoch würde ich gerne ein paar Anmerkungen/Korrekturen machen:

1. Anführungszeichen:
Im Grunde ja fast richtig – leider stimmen die einfachen Abführungen in der „deutschen“ Version nicht ganz. Die sind nämlich genau verkehrt. Dazu gibt es eine einfache Merkhilfe: Anführungen sehen (im deutschen) aus wie die Zahl 99, Abführungen wie die Zahl 66 (bzw. bei einfachen wie die Zahlen 9 und 6). Also am Anfang steht immer die 9, am Ende die 6. Leider weiß ich den Unicode nicht dazu. Ich hoffe jemand anders kann dazu weiterhelfen. :)

2. Apostroph:
Bezogen auf meinen Punkt 1. muss man natürlich hier auch die Bemerkung, dass das Apostroph genauso wie die einfache Abführung aussieht, revidieren, da das Apostroph wie eine hochgestellte 9 (oder wie ein hochgestellter Beistrich) aussieht.

3. kleine Beispiele zur genaueren Erläuterung/Verwendung des Gedankenstriches (damit man sich etwas unter den angegeben Begriffen vorstellen kann) ;)
Verwendung als Gedankenstrich: vor und nach dem Strich wird ein Leerzeichen gesetzt (Er war schon lange nicht mehr hier gewesen – alles hatte sich verändert.)

Bei allen anderen Verwendungen wird er OHNE Leerzeichen verwendet (im Grafikdesign wird dann der Abstand links und rechts optisch angepasst, damit er nicht zu dicht an anderen Buchstaben sitzt etc. was ja leider im Web nicht gemacht werden kann).
Beispiele: 12–16 Uhr, 19,– (statt 19,--), –12 °C, Rapid–Austria, …

Der Streckenstrich kommt im Deutschen so gut wie gar nicht vor. Wird (wie der Name sagt) nur als Streckenstrich bzw. als Tabellen-Unterführung verwendet (um fehlende Einträge anzuzeigen). Im Englischen wird er (wie richtig erwähnt) an Stelle des Gedankenstriches verwendet – und da OHNE LEERZEICHEN (Bsp: She has—and this more than once—kept him from being stupid).

4. Ich hätte noch eine Anmerkung bezüglich einem Zeichen, das auch oft falsch gesetzt wird:
Das °-Zeichen. Hier ist vielleicht erwähnenswert, dass die Leerzeichen dafür variieren können. So wird z.B. 12 °C mit einem Leerzeichen zw. der Zahl und der Einheit °C gesetzt, zwischen 180° jedoch nicht! Das ist auch ganz einfach erklärt: Das Leerzeichen wird je nach Sinnhaftigkeit gesetzt. Beim ersten Beispiel ist °C die Einheit (Grad Celsius) und wird daher von der Ziffer getrennt, die ja eine eigene Sinneinheit ist. Bei 180° beschreibt das Grad-Zeichen einen Winkel, gehört also unweigerlich zur Zahl dazu (wenn man so will). Ich habe da auch sehr lange damit gekämpft, wie das denn nun geschrieben wird, und daher wäre es sicher nicht schlecht, das vielleicht auch zu erwähnen. :)

Ich hoffe diese kleine Erläuterung/Korrektur hilft ebenfalls weiter. :)
Wie gesagt, ich finde es einfach klasse, dass doch immer wieder versucht wird, das Niveau im Web zu heben. Es freut mich (als Grafikerin) riesig zu sehen, dass sich viele Leute doch noch Gedanken darüber machen, richtige Sonderzeichen zu verwenden, und nicht einfach irgendwas, das halt so ähnlich aussieht.
DANKE DAFÜR!! :)

glg


Geschrieben von
Dirk
-- 03.Januar 2006 (#3)

Hallo,

entschuldigen Sie, dass ich so lange keine Kommentare abgerufen haben. Ich nehme an, dass Sie mittlerweile selbst eine Antwort auf die Frage gefunden haben.

In der Mathematik ist es der Betragsstrich oder Determinante, in der Informatik die Pipe, in der Programmierung ist dieser Strich manchmal äquivalent zu dem Operator „OR“ und sonst einfach „vertical bar“ oder „vertical line“ (bzw. im Deutschen halt senkrechter Strich).


Geschrieben von
Uschi Ronnenberg (anonym)
-- 16.November 2005 (#2)

Danke für die Mühe!

Ich suche verzweifelt danach, wie dieser beliebte senkrechte Strich | korrekt heißt, wissen Sie das zufällig auch?


Geschrieben von
joesi (anonym)
-- 01.November 2005 (#1)

danke, das war sehr hilfreich!


Geschrieben von
julius (anonym)
-- 22.September 2009 (#4)

eine schöne auflistung, gefällt mir.


Das Hinzufügen von Kommentaren wurden deaktiviert.


Menü
Beitragsübersicht
Kontakt & Impressum
Über mich
Linkempfehlungen/Linkpartner

Letzte Kommentare
»Vorstellungsgespräch: E…
»Die Krux mit den Hinter…
»Bewerbung: Standard-Abs…
»Glossar: Quirks-Modus (…
»Glossar: Quirks-Modus (…

Meta
RSS 2.0
XHTML-Validierung
CSS-Validierung

Backlinks
»Spam vermeiden
»Internetagentur Ulm
»Bruststraffung
»Achterbahn & Freizeitpark
»Fernstudium
»TuS Graf Kobbo Tecklenburg