Bis vor kurzem hat dem Internet-Publishing, bezogen auf die HTML-Sprache, ein wichtiges Element hinsichtlich der Typografie gefehlt — die Darstellung von Text mit den vom Autor gewählten Schriften. Web Designer und Autoren, waren auf die Benutzung einiger wenigen Standardschriften angewiesen (z.B. ‚Arial‘, ‚Times‘, ‚Geneva‘, usw.), die von den Komputerherstellern mit den Systemen geliefert werden oder im Web kostenlos zur Verfügung stehen. Es blieb also nichts weiter übrig, als die gewünschten Textteile — meistens handelte es sich dabei um Headlines — als Bilder zu speichern (GIF oder JPEG Dateien), um sie in der gewünschten Schriftart darzustellen. Wie schon früher erwähnt (-> Kapitel 1.1), kommt es wegen dieser engen Verbundenheit zwischen Wort und Bild, zu einer bildorientierten Textdarstellung. Einige der Eigenschaften des HTMLs sollen auf den folgenden Seiten betrachtet werden.
Die Headline- und die Schriftwahl-Problematik
Durch die Umwandlung von Text in Bilder verlieren diese Wörter ihre lesbare ASCII-Texteigenschaft. Dadurch können diese Textteile weder von Suchmaschinen erfaßt werden, noch mit Indizes versehen oder kopiert werden. Sie sind somit gewissermaßen ein totes Element. Um diesem vorzubeugen, wird beim HTML der <ALT> Tag benutzt, wobei für die Textdarstellung (Schriftart und -größe) der vom User in den Browser-Einstellungen ausgewählte Font benutzt wird. Ohne den <ALT> Tag, bzw. ohne automatisches Laden von Bildern ist die Headline nur ein Bild-Icon.
Die ‚Bild-Headline‘
Vorteil: Die Headline hat eine definitive Größe und kannmit Anti-Aliasing dargestellt werden.
Nachteil: Die Bilder müssen immer geladen werden, um gelesen werden zu können. Die Bündigkeit der Headline zum Rand und zum Text hängt vom Bild selbst ab. Die Standard-Tags des HTML für Überschriften <H1></H1> — mit Werten von 1 (groß) bis 7 (klein) — haben engen Bezug auf den Schriftgrad des restlichen Textes. Wird also die Schriftgröße in den Browser-Einstellungen geändert, ändern sich auch die Größen der Headlines proportional (Abb. 4.9-3). Bei der bildorientierten Wortdarstellung ist dies nicht möglich — das Bild bleibt so groß wie vom Gestalter erstellt. (Abb. 4.9-2)
...
____________________
Abb. 4.9-2
Links die Browser-Einstellung: Font - ‚Georgia, Größe - 10 pt
Rechts die Browser-Einstellung: Font - ‚Georgia, Größe - 14 pt
Vorteil: Kein Unterschied in der Headline- bzw. der Bildgröße, wodurch auch ihre Position, unter bestimmten Voraussetzungen, gleich bleibt.
Nachteil: Bei unterschiedlichen Browser-Einstellungen verändert sich der Textteil proportional, wodurch sich der (Zeilen-) Abstand zur Headline ändert.
Die ‚HTML-Headline‘
____________________
Abb. 4.9-3
Links die Browser-Einstellung: Font - ‚Georgia, Größe - 10 pt
Rechts die Browser-Einstellung: Font - ‚Georgia, Größe - 14 pt
Vorteil: Der gesamte Text inklusive der Headline ist nach dem Aufrufen sofort lesbar. Unterschiedliche Headline-Größen bewirken, daß sich alle Textteile proportional vergrößern.
Nachteil: Es erscheint möglicherweise nicht die gewünschte Schrift für die Headline. Der ‚normale‘ Schriftschnitt der Headline wird verfettet.
Mittlerweile ist es im HTML möglich, auch die vom Autor gewünschte Schrift anzugeben. Dabei muß jedoch bedacht werden, daß diese Fonts auf den Rechnern der Autoren und der User installiert sein müssen, um dargestellt zu werden.
Die ‚HTML-Headline‘ mit Schriftvorgabe
...
____________________
Abb. 4.9-4
Links die Schrift-Einstellung: Font - ‚Georgia, Größe - 10 pt
Rechts die Schrift-Einstellung: Font - ‚Georgia, Größe - 14 pt
Vorteil: Mit der Veränderung der Schriftgrößen, ändern sich alle Textteile proportional. Die Qualität des Ausdrucks hängt vom Ausgabemedium ab.
Nachteil: Die Position aller Textteile verändert sich in Abhängigkeit von der Schriftgröße. Die Headlines erscheinen ohne Anti-Aliasing (hierfür bietet Microsoft den ‚FontSmoother‘ an). Die Headline wird ‚verfettet‘.
Wird für die Headline eine Grafik/ein Bild (GIF/JPEG) mit einem bestimmten Font (z.B. ‚Comic Sans MS‘) erstellt, wird sie in dem Schnitt auch dargestellt. (Abb. 4.9-1, 4.9-2) Im Gegensatz hierzu verdoppelt der HTML-Tag <H1></H1> den Schriftgrad der Headlines automatisch (in den Abbildungen 4.9-3, 4.9-4: bei einer Textgröße von 10 pt auf 20 pt, bzw. von 14 pt auf 28 pt). Hinzu ‚verfetten‘ diese Tags die Headline was typografisch gesehen einer doppelten Auszeichnung gleichkommt. (Abb. 4.9-3, 4.9-4)
Meine Headline
(Comic Sans MS 20 pt ohne <H1></H1> ausgezeichnet)
Meine Headline
(Comic Sans MS 20 pt mit <H1></H1> ausgezeichnet)
Meine Headline
(Comic Sans MS 28 pt ohne <H1></H1> ausgezeichnet)
Meine Headline
(Comic Sans MS 28 pt mit <H1></H1> ausgezeichnet)
Wird der Überschriften-Tag benutzt (<H7></H7> ausgenommen), muß weder der Zeilenwechsel-Tag <BR> noch der Absatz-Tag <P> für den nachkommenden Text hinzugefügt werden — es wird ein Zeilenabstand in der Größe des Absatz-Tags automatisch generiert.
Um die ‚Verfettung‘ der Headlines zu vermeiden, gleichzeitig aber die Vergrößerung des Schriftgrades zu erzielen, muß folgender Font-Tag benutzt werden: <FONT SIZE=+3></FONT>. Dabei unterscheiden sich Werte von +4 bis -2 in ihren Größen. Dabei muß jedoch auf die Überschriften-Tags verzichtet werden.
...Bei einem Browser mit der Schriftgrößen-Einstellung von 10 pt, ergeben sich folgende Werte bei der Benutzung des Schriftgrößen-Tags:
Meine Headline
(<FONT SIZE=+1> Comic Sans MS 12 pt)
Meine Headline
(<FONT SIZE=+2> Comic Sans MS 15 pt)
Meine Headline
(<FONT SIZE=+3> Comic Sans MS 20 pt)
Meine Headline
(<FONT SIZE=+4> bis +7 Comic Sans MS 30 pt)
Um die ‚Vergrößerung‘ der Headlines zu vermeiden, gleichzeitig aber den fetten Schriftstil zu erzielen, muß einer der folgenden Font-Tags benutzt werden: <B></B> oder <STRONG></STRONG>. Auch hier muß auf die Überschriften-Tags verzichtet werden.
...Es besteht die Möglichkeit auf alternative Fonts zuzugreifen. Im unteren Beispiel bestimmt der Autor die Headline-Darstellung mit den Schriften ‚Comic Sans MS‘, ‚Verdana‘, ‚Helvetica‘. findet der Browser keine ‚Comic Sans MS‘, sucht er nach ‚Verdana‘, findet er keine ‚Verdana‘, sucht er nach ‚Helvetica‘. Wird keine der vorgeschlagenen Schriften gefunden, wird der vom User in den Browser-Einstellungen ausgewählter Font benutzt.
...
<I></I> - Kursivschnitt;
<U></U> - Unterstreichen. Sollte möglichst vermieden werden, da die Browser Links standardmäßig unterstreichen, wodurch es zu Verwechslungen kommt;
<TT></TT> -
Grundsätzlich beeinflußt der Schriftgrad, bzw. die ausgewählte Schrift in den Browser-Einstellungen den Zeilenabstand. Vergleichbar ist dies mit dem Kompress-Satz im Hand- bzw. Bleisatz. Man stelle sich vor, daß die Schriftkegel einfach aufeinander liegen. Der Zeilenabstand kann somit nicht verändert werden (zumindestens nicht bei allen der älteren Browser). Auf der anderen Seite wird der Zeilenabstand durch die Benutzung der oben erwähnten Tags beeinflußt. In vielen Fällen ist das Resultat ein unregelmäßiger Zeilenabstand. Einige dieser Tags beeinflussen direkt den Zeilenabstand. Tags wie <SMALL> und <BIG> verkleinern bzw. vergrößern ihn. Auch hoch- bzw. tiefgestellte Textteile <SUP> und <SUB> beeinflussen den gleichbleibenden Zeilenabstand.
____________________
Abb. 4.09-5
Links sichtlich unregelmäßiger Zeilenabstand
Rechts etwas ausgeglichenerer Zeilenabstand
Um den unregelmäßigen Zeilenabstand etwas (wenn auch nicht ganz) zu verbessern, schlage ich vor, die Tags zum Hoch- bzw. Tiefstellen (<SUP> und <SUB>) durch den Tag zur Verkleinerung des Schriftgrades (<SMALL>) zu ergänzen. Der Zeilenabstand ist dadurch zwar nicht durchgehend gleichbleibend, wirkt jedoch ausgeglichener.
...HTML erlaubt nur drei Ausrichtungsmöglichkeiten — links-, rechtsbündig und zentriert. Bisher unterstützt HTML noch keine Worttrennungen, weshalb ein normaler Rausatz nicht möglich ist. In den meisten Fällen entsteht somit nur ein Flattersatz. Die Anmutung eines Rausatzes entsteht nur durch Zufall in Abhängigkeit der Schriftgröße, der Wortlänge und der Fenstergröße des Browsers.
____________________
Abb. 4.9-6
Flatter- oder Rausatz — der gleiche ‚Text‘ bei unterschiedlicher Fenstergröße des Browsers
Kapitälchen
Der Begriff bezeichnet verkleinerte Großbuchstaben/Versalien, die für die Auszeichnung von Textteilen (z.B. Autorennamen, Abkürzungen usw.) genutzt werden. ‚Echte‘ Kapitälchen entstehen jedoch nicht durch einfache Verkleinerung der Versalien — vielmehr werden sie separat erstellt. Dadurch ist es möglich, die Strichstärke dieser Buchstaben zu den restlichen gleich zu halten. Ein weiteres Merkmal der Kapitälchen ist, daß sie etwas breiter gestaltet werden, um optisch ausgeglichen zu wirken.
Da viele vorhandene Fonts keine ‚echte‘ Kapitälchen zur Hervorhebung beinhalten, nutzt ein Trick, um diese Anmutung trotzdem zu erzielen. Bei einigen Publishing-Programmen kann ein prozentualer Wert zur Verkleinerung des Schriftgrades angegeben werden. Im HTML wird dies durch Angabe des Tags zur Schriftgrößen-änderung erzielt: <FONT SIZE=+/-n></FONT> oder <SMALL></SMALL> bzw. <BIG></BIG>. Die Vergrößerung, bzw. Verkleinerung der Schriftgröße um eine Einheit, ist jedoch nicht gleichzustellen mit der Veränderung des Schriftgrades um einen Punkt (-> Seite 91)
...oder
K<SMALL>APITÄLCHEN</SMALL>? und Gemeine.
| Darstellung auf dem Bildschirm und | ... im Ausdruck |
| |
Der Erfolg bzw. die Qualität der Kapitälchen-Nachahmung hängt von mehreren Faktoren ab: der Qualität des Screen-Fonts, der Schriftart, dem ausgewählten Schriftgrad in den Browser-Einstellungen, der Auflösung des Ausgabemediums (Bildschirm, Drucker oder Belichter) und von den benutzten HTML-Tags. Insbesondere bei kleineren Schriftgraden ist es bei der Bildschirmdarstellung möglich, gute ‚Kapitälchen‘ zu erzielen.