HTML: Schriftarten

normale | proportionale | präformatierte | exotische

 
Als "normal" werden hier Schriftarten bezeichnet, auf die der jeweilige Browser eingestellt ist. Wenn keine andere HTML-Anweisung vorliegt, zeigt der Browser den Text in der voreingestellten Schriftart an.

Generell gilt: Kein Textverarbeitungsprogramm und kein Browser kann eine Schriftart darstellen, die nicht auf dem lokalen PC installiert ist. Die auf Ihrem PC installierten Schriften können Sie in Windows-Systemen in der "Systemsteuerung" und dort unter "Schriftarten" einsehen. Sie sind normalerweise im Windows-Verzeichnis im Ordner "Fonts" abgelegt.

Es wird in proportionale (= unterschiedliche Breite der einzelnen Buchstaben) und nicht proportionale (= einheitlicher Zeichenabstand) Schriftarten unterschieden.

Ein weiteres Unterscheidungsmerkmal der Schriften sind Serifen, also die Abschlußstriche der einzelnen Zeichen:
Eine klassische Serifenschrift ist Times, die auch häufig für Zeitungen verwendet wird.
Dagegen sind Arial, Helvetica und Verdana serifenlose Schriftarten, die z.B. auf dem Monitor besser gelesen werden können.

Beachten Sie bitte außerdem, daß die Schriftarten in der Größe der Zeichen ziemliche Unterschiede aufweisen können. Dies hat dann erheblichen Einfluß auf das Layout einer Seite.

 
Proportonale Schriften zeichnen sich durch unterschiedliche Breite der einzelnen Buchstaben aus. Man kann eine solche Schriftart mit der HTML-Anweisung

<FONT FACE="Schriftname">...weiterer Text...</FONT> einstellen.

Dies ist ein kurzer Beispieltext mit der Schrift Times New Roman bzw. Times (meistens voreingestellt)

Dies ist ein kurzer Beispieltext mit der Schrift Arial

Dies ist ein kurzer Beispieltext mit der Schrift Helvetica

Dies ist ein kurzer Beispieltext mit der Schrift Verdana

Dies ist ein kurzer Beispieltext mit der Schrift Comic Sans MS

Dies ist ein kurzer Beispieltext mit der Schrift Lucida Sans

Was macht der Browser nun, wenn er z.B. mit der Schrift Lucida Sans überhaupt nichts anfangen kann, weil diese nämlich nicht auf Ihrem Rechner installiert ist? Nun, dann nimmt er einfach die oben als "normal" bezeichnete Schriftart.

Es besteht aber auch die Möglichkeit, den Browser aus einer Liste von Schriftarten eine ihm bekannte auswählen zu lassen. Und das funktioniert so:

<FONT FACE="Lucida Sans,Verdana,Comic Sans MS,Arial,Times New Roman">
Dies ist ein kurzer Beispieltext mit einer wählbaren Schriftart
</FONT>

Die Schriftarten werden von links nach rechts durchforstet. Trifft der Browser auf eine ihm bekannte, also auf dem lokalen PC installierte, so zeigt er den Text entsprechend an. Verdana dürfte übrigens auf Windows- und Apple-Plattformen gleichermaßen erkannt und dargestellt werden. Helvetica wird von Windows-Systemen als Arial-Schrift abgebildet.

 
Im Gegensatz zu den gerade behandelten proportionalen Schriften haben die nichtproportionalen Schriften einen einheitlichen Zeichenabstand. Das bedeutet, daß z.B. ein kleines i genauso viel Platz einnimmt wie ein großes M. Man kann diese Schriftarten für Zitate, Programmiercodes u.ä. verwenden.

Einen sichtbaren Unterschied zwischen KBD-, SAMP- und XMP-Befehl habe ich aber nicht feststellen können. Sie erzeugen beim Einsatz automatisch einen neuen Absatz! Das machen CODE und TT nicht. CITE fällt durch eine kursive und vor allem proportinale (?!) Schrift auf. LISTING kommt (eventuell) als besonders kleine Mini-Schrift daher.

Dies ist ein kurzer Beispieltext mit dem KBD-Befehl

Dies ist ein kurzer Beispieltext mit dem SAMP-Befehl

Dies ist ein kurzer Beispieltext mit dem CODE-Befehl

Dies ist ein kurzer Beispieltext mit dem TT-Befehl

Dies ist ein kurzer Beispieltext mit dem CITE-Befehl

Interessant ist auf jeden Fall der PRE-Befehl, weil dieser Leerzeichen und Abstände aus dem Editortext übernimmt. Normalerweise entfernt der Browser nämlich "überflüssige" Leerzeichen. Das Ergebnis kann übrigens browserspezifisch unterschiedlich aussehen. Außerdem spielen Einstellung von Schriftart und -größe eine Rolle.

Mit dem PRE-Befehl können ganz problemlos
mehrere      Leerzeichen      hintereinander und


                          untereinander eingegeben werden.
               Der Browser übernimmt das anstandslos.

Mit dem PRE-Befehl können ganz problemlos mehrere Leerzeichen hintereinander und untereinander eingegeben werden. Der Browser übernimmt das anstandslos.

Allerdings fällt meine Netscape-Version mal wieder negativ auf, weil es zu unerwarteten Ergebnissen kommen kann.

So können mit dem PRE-Befehl auch problemlos Grafiken ausgerichtet werden. Einfach einige Leerzeichen einfügen und am vorgesehenen Platz die normale Anweisung für den Aufruf einer Grafikdatei notieren.

Bitte beachten Sie, daß innerhalb der PRE-Anweisungen kein automatischer Zeilenumbruch erfolgt. Wenn also die Zeile zu lang ist, wandert der Text rechts aus dem Fenster. Das ist besonders beim Ausdrucken problematisch.

Es soll nicht verschwiegen werden, daß die PRE-Anweisung einen großen Nachteil aufweist: Da vor <PRE> und nach </PRE> automatisch eine Leerzeile erzeugt wird, hat es keinen Sinn, einzelne Zeichen oder Textabschnitte innerhalb eines Absatzes mit dieser Anweisung zu formatieren. Ich selbst weiche dann auf den TT-Befehl aus.

Wie üblich sind die entsprechenden Texte von den Anweisungen zu umklammern. Also zunächst beispielsweise <PRE> oder <TT> eingeben, dann den Text (und eventuell weitere HTML-Anweisungen - auch Formatierungen für die Schrift und sogar proportionale Schriftarten sind möglich) und abschließend </PRE> oder </TT>. Der Opera-Browser besteht übrigens darauf, daß eventuelle Formatierungsanweisungen innerhalb der <TT> und </TT> gegeben werden müssen, ansonsten werden sie ignoriert.

Etwas merkwürdig benimmt sich der weitgehend unbekannte PLAINTEXT-Befehl. Wird er eingesetzt, so erscheint im Internet Explorer alles danach als Quelltext(!). Bei Netscape wurde eine komplette Tabelle, in der er zum Einsatz kam, nicht mehr angezeigt und bei Opera erschien ebenfalls der Quelltext, aber rechts neben der Tabelle. Schade, gerade die einfache Darstellungsmöglichkeit des Quellcodes könnte sicher von Nutzen sein. An diesem Beispiel zeigt sich aber mal wieder, wie wichtig Tests mit verschiedenen Browsern sind.

Präformatierte Schriftarten bieten insgesamt gute Voraussetzungen, um einen Webmaster in den Wahnsinn zu treiben.

Eventuell sind ja Courier-Schriftarten u.ä. eine Alternative. Die müssen dann allerdings nicht nur bei Ihnen, sondern auch beim User installiert sein.

Dies ist ein kurzer Beispieltext mit der Schrift Courier

Dies ist ein kurzer Beispieltext mit der Schrift Courier New

Das funktioniert, wie oben schon beschrieben, mit der Anweisung

<FONT FACE="Schriftname">...weiterer Text...</FONT>.

 
Wie wir festgestellt haben, ist es absolut sinnlos, kaum verbreitete Schriftarten im Browser anzeigen zu lassen, wenn diese nicht installiert sind. Da kann man böse reinfallen, wenn das ganze Layout auf solch einer Schrift aufgebaut ist - weil bei Ihnen zeigt der Browser ja alles wunderbar an.

Wenn Sie ihre Lieblingsschrift unbedingt unters Volk bringen wollen, versuchen Sie mal diesen Ausweg: Erstellen Sie doch eine Grafik, die Sie mit der gewünschten Schrift betexten. Es liegt auf der Hand, daß Sie größere Abhandlungen auf diese Weise den Usern lieber nicht zumuten sollten. Diese würden nämlich an den Ladezeiten verzweifeln. Auch Suchmaschinen hätten ihre Probleme damit, weil sie ja nur Texte indexieren können.

Nun gut, für kurze Texte, Überschriften und einzelne Zeichen ist das vielleicht ein durchaus interessantes Stilmittel. Hier also ein Beispiel:

Natürlich können Sie die Grafik auch mit farbiger Schrift, anderem Hintergrund oder transparent erstellen. Ein Nachteil der "grafischen" Methode ist, daß Suchmaschinen den Text nicht erkennen und in ihren Datenbanken ablegen können.