Schriftauszeichnungen

Normal (oder: gerade / recte)

Auszeichnung durch normale, nicht-fette SchriftAuch eine normale, gerade Schrift kann eine Schriftauszeichnung sein, wenn sie beispielsweise in einem im übrigen kursiven Text angewendet wird. Das bedeutet, dass Schriftauszeichnungen erst im Kontrast zum sie umgebenden Text entstehen. Denn nur so ist es zu erklären, dass auch ein nicht fett wiedergegebenes Wort hervorgehoben werden kann, wenn der übrige Text fett gesetzt ist (siehe nebenstehendes Beispiel).

Kursiv

Im Druck ist dies die beste Methode, um Textpassagen hervorzuheben. Kursiv gesetzte Textausschnitte sind besser als fette, da die Schriftauszeichnung nicht so aufdringlich ist – dennoch ist die Auszeichnung gut zu erkennen durch den etwas helleren Grauwert.

Jeweils geschrägte (rot) und kursive (grün) Times New Roman    Während serifenlose Schriften in der Regel nur geschrägt werden, gibt es für Schriften mit Serifen einen eigenen Font für die Kursive. Hier sollten Sie unbedingt darauf achten, dass die Schrift nicht vom System geschrägt wird, sondern dass ein echter kursiver Zeichenfont eingesetzt wird. Ob es sich um einen echten kursiven Font handelt oder nicht, überprüft man am besten am Minuskel-a oder Minuskel-f.

Vergrößerter Ausschnitt aus der Majuskel I; rechts: kursiv mit deutlicher Treppenbildung    Im Gegensatz zum Buchdruck sollte jedoch auf Webseiten die Auszeichnung nicht durch Kursivierung erfolgen, da bei der Bildschirmdarstellung gerade bei kursiven Schriften (meistens) Probleme entstehen. So macht sich bei den schräg stehenden Buchstaben der Treppenstufeneffekt besonders unangenehm bemerkbar. Auf Grund dieser Tatsache sollte man Texte im Internet nicht kursivieren, sondern beispielsweise fett auszeichnen oder den Text in einer anderen Farbe wiedergeben (mit Farben sollten Sie jedoch sehr behutsam umgehen).

Fett

Fett ist zwar im Druck nicht sehr schön, aber bei Internetseiten sicherlich die beste Lösung. Zu beachten ist, dass Cascading Stylesheets (CSS) mit der Eigenschaft font-weight (z.B. font-weight: 900 für extra-fette Schrift beziehungsweise font-weight: 100 für dünne Schrift) viele Abstufungen zulässt, dass aber nur das realisiert werden kann, was der jeweils verwendete Font unterstützt.

Gesperrt

Rot: Nicht gesperrt
Grün: Gesperrt Beim Sperren wird der Zwischenraum zwischen den einzelnen Buchstaben vergrößert. Gerade bei Schreibmaschinen war die Sperrung – in Ermangelung einer Alternative – eine beliebte Methode, um einzelne Wörter auszuzeichnen. Eine Grundregel besagt jedoch: Im Antiquasatz wird nicht gesperrt – mit einer Ausnahme: Versalien (Großbuchstaben). Versalien müssen gesperrt werden, damit man sie besser lesen kann. Und es gibt noch eine Ausnahme, nämlich den Satz mit gebrochenen Schriften. Da es bei den gebrochenen Schriften, wie beispielsweise der Fraktur, (eigentlich) keine kursiven oder fetten Zeichen gibt, wurde zu Auszeichnungszwecken im gebrochenen Satz gesperrt.

   Wenn Sie dennoch in einem Text einzelne Wörter sperren möchten, so müssen Sie daran denken, auch vor und nach dem gesperrten Wort einen größeren Abstand einzufügen. Außerdem sollte die Sperrung nicht zu groß sein (also deutlich kleiner als ein Leerzeichen).

   Grober Unfug ist es, als Laie einen ganzen Text zu sperren, wie man dies hin und wieder auf Internetseiten sieht. Die meisten Schriften sind derart konzipiert, dass sie sich auch ohne leichtes Sperren sehr gut lesen lassen. Jeder Eingriff verdirbt die Schrift und macht sie schwerer lesbar.

Beispiel

HTML-Code	HTML-Ausgabe
Beispiel mit<span style="letter-spacing: 0.1em"> Sperrung </span>als Auszeichnung	Beispiel mit Sperrung als Auszeichnung

Unterstrichen

Rot: So ist es falsch
Grün: Zwei korrekte Alternativen für die Unterstreichung Standardmäßig werden Links im Internet unterstrichen. Dies ist auch sicherlich gut so, damit man sie auch sofort als Links erkennt. Im professionellen Druck hingegen wird auf Unterstreichung möglichst verzichtet. Und wenn dies dennoch notwendig ist, so ist darauf zu achten, dass entweder die Unterlängen der Gemeinen (Kleinbuchstaben) nicht durchgestrichen werden oder dass der Strich so weit nach unten versetzt wird, dass er die Unterlängen nicht kreuzt.

   In HTML sollten Sie Unterstreichungen vermeiden und stattdessen lieber eine Rahmenlinie verwenden, deren Abstand Sie festlegen können. Ein Beispiel ist

Beispiel

HTML-Code	HTML-Ausgabe
<span style="border-bottom: 1px solid; padding-bottom: 1px">Beispieltext</span>	Beispieltext
<span style="border-bottom: 1px solid">Beispieltext</span>	Beispieltext
<span style="text-decoration: underline">Beispieltext</span>	Beispieltext

Das Schöne an dieser Lösung ist, dass man damit auch interessante Effekte erzielen kann, wie die folgende Tabelle zeigt.

Effekte mit Unterstreichung

HTML-Code	HTML-Ausgabe
<span style="border-bottom: 10px solid navy; padding-bottom: 1px; letter-spacing: 0.2em;">BEISPIELTEXT</span>	BEISPIELTEXT
<span style="border-bottom: 7px dotted green; padding-bottom: 1px; letter-spacing: 0.2em;">BEISPIELTEXT</span>	BEISPIELTEXT

Kapitälchen

Rot: Unechte, simulierte Kapitälchen
Grün: Echte Kapitälchen Kapitälchen sind ein eigener Zeichensatz und gleichen Versalien (Großbuchstaben) in der Höhe von Gemeinen (Kleinbuchstaben) – mit dem Unterschied, dass sie etwas breiter sind als verkleinerte Versalien, und ihre Strichstärke ist ebenso breit wie die übrige Schrift.

   Wenn man beispielsweise in Word Kleinbuchstaben als Kapitälchen formatiert, erhält man keine echten Kapitälchen, sondern eine Simulation: Dabei werden vom System die Gemeinen durch Versalien ersetzt und diese anschließend einfach verkleinert. Die Folge davon ist, dass diese (unechten, simulierten) Kapitälchen dünner sind im Vergleich zur übrigen Schrift. Wenn man echte Kapitälchen verwenden will, dann muss man sich einen eigenen Kapitälchensatz kaufen, der zur verwendeten Schrift gehört.

   Wie Sie sicherlich bemerkt haben, verwende ich in dieser HTML-Anwendung (unechte) Kapitälchen. Echte Kapitälchen kann ich nicht verwenden, da ich nicht weiß, ob auf Ihrem System Kapitälchen installiert sind und wie diese heißen. Deshalb muss ich diese simulieren, wenn ich nicht stattdessen eine Grafik verwenden möchte. Und so wird’s gemacht:

Kapitälchen

HTML-Code	HTML-Ausgabe
<span style="font-variant: small-caps; letter-spacing: 0.1em">Beispieltext</span>	Beispieltext
<span style="font-variant: small-caps; letter-spacing: 0.1em">Strasse</span>	Strasse
<span style="font-variant: small-caps; letter-spacing: 0.1em">Straße</span>	Straße
<span style="font-variant: small-caps; letter-spacing: 0em">Strasse</span>	Strasse

Wenn Sie jedoch externe Schriften einbinden können, wie z.B. mit Googles Font API, dann können Sie beispielsweise mit der Schrift »IM Fell Great Primer SC« echte Kapitälchen verwenden (Anmerkung: Die relativ schlechte Qualität von »IM Fell Great Primer« hängt damit zusammen, dass wahrscheinlich eine alte Buchtype nachträglich digitalisiert wurde):

Versalien

Bei Versaliensatz und Kapitälchen muss das »ß« durch »SS« ersetzt werden Ein Text, der nur aus Versalien (oder: Majuskeln, oder auch: Grossbuchstaben) besteht, ist nur sehr schwer lesbar. Deshalb sollte man Versalien nur bei sehr kurzen Texten verwenden, wie beispielsweise dem Titel eines Buches. Überhaupt sollten Sie auf Versalsatz im Fließtext verzichten. Bei Überschriften kann Versalsatz jedoch gut wirken, da eine Überschrift in Versalien optisch eine blockbildende Wirkung erzielt.

   Beim Verwenden von Versalien sind insbesondere die folgenden drei Punkte zu beachten:

1. Text in Versalien muss leicht gesperrt werden; gegebenenfalls muss der Abstand zwischen den einzelnen Versalien individuell definiert werden, um optisch (nicht jedoch mathematisch) einen gleichmäßigen Abstand zwischen den Buchstaben zu erzielen.

2. Das »ß« muss – wie auch bei den Kapitälchen – durch »SS« ersetzt werden.

3. Werden einzelne Textpassagen innerhalb eines Fließtextes in Versalien gesetzt, sollten diese minimal (zwischen 5 und 10 Prozent) verkleinert werden, so dass sich der Text in Versalien besser im übrigen Fließtext integriert. Ansonsten sticht er hervor und scheint größer als der umstehende Text zu sein.

In HTML codieren Sie entsprechende Passagen beispielsweise wie folgt:

Versalien

HTML-Code	HTML-Ausgabe
<span style="letter-spacing: 0.1em; font-size: 0.95em; text-transform: uppercase">Beispieltext</span>	Beispieltext
<span style="letter-spacing: 0.1em; font-size: 0.95em; text-transform: uppercase">Strasse</span>	Strasse
<span style="letter-spacing: 0.1em; font-size: 0.95em; text-transform: uppercase">Straße</span>	Straße
<span style="letter-spacing: 0em; font-size: 1em; text-transform: uppercase">Strasse</span>	Strasse