Typographie in HTML

Schriftarten

Schriftarten-Typen

Serifenlose Schriften wie Arial, Avant Garde, Verdana oder Helvetica. Diese Schriften wirken klar, nüchtern, markant, eignen sich jedoch nicht gut für lange Lesetexte.

Serifenschriften. Serifen sind die Schweife und Ausweitungen an Schriften wie Times New Roman oder Garamond, sie machen die Schrift eingängiger, halten das Auge des Betrachters besser in der Zeile. Erfahrungsgemäß lassen sich diese Schriften leichter, ermüdungsfreier lesen, sie sind Standard-Druckschriften von Zeitungen oder Büchern. Solche Schriften werden auch als Brotschriften bezeichnet.

Eine weitere Unterscheidung von Schriften bezieht sich auf die Zwischenräume zwischen den Buchstaben:

Proportionalschriften: Alle bisher genannten Schriften sind Proportionalschriften, das heißt, der Zwischenraum zwischen den einzelnen Zeichen ist stets gleich. In der Regel werden Proportionalschriften im Web wie beim Druck eingesetzt, da sie dem Auge ein leichteres Lesen ermöglichen – das Schriftbild wirkt gleichmäßiger, ruhiger.

Nicht proportionale Schriften werden auch Schreibmaschinenschriften (teletyper, siehe <tt>-Tag) oder diktengleiche Schriften genannt. Bei ihnen hat jedes Zeichen etwa die gleiche Größe, Breite, dafür variieren die Abstände der Zeichen. Sie werden in Dokumenten und Webseiten gerne verwandt, um Quellcode zu kennzeichnen. Hier das Beispiel "Courier New".

Schreibschriftenschriften (generische Schriftart cursive)sind Schriften wie Comic Sans MS oder Daupin, die eine Handschrift nachahmen. Zwar bietet jedes Betriebssystem verschiedene Schreibschriften (generische Schriftart cursive) und Schmuck- oder Zierschriften (generische Schriftart fantasy), jedoch keine, die ähnlich genug sind, um über die Betriebssysteme hinweg ein gleiches, ähnliches Schriftbild zu gewährleisten.

Früher galt: Benötigen Sie eine Schmuckschrift für Ihre Website, z.B. wegen der Corporate Identity Ihres Kunden, so haben Sie die Möglichkeit, wesentliche Textelemente der Seite wie Logo, Überschriften und Navigationsmenüs in der gewünschten Schrift als Bilder zu erstellen und längere Textpassagen in einer einfacheren Schrift zu setzen.

Heute ermöglichen es auch rechtlich frei verfügbare Open-Source-Schriftarten oder die Webfont-Repositories von Google, Adobe und anderen Anbietern, unabhängig vom Betriebssystem auch Schmuck- und Schreibschriften einzusetzen. Hier im Beispiel die Schrift Lobster aus den Google Webfonts. Die Einbindung erfolgt per HTML und/oder CSS (siehe Quellcode dieser Seite).

Am vorausgehenden Text lässt sich erkennen, dass Schmuckschriften für längere Lesetexte weniger geeignet sind und auch dazu führen können, dass die Seite überladen wirkt. Heute ist man nicht mehr an die Standardschriften des Betriebssystems gebunden, da auch andere Standardschriften (Brotschriften), serifenlose und Serifenschriften, frei als Webfonts oder Open-Source Fonts angeboten werden. Doch lassen sich nach wie vor auch Standard-Systemschriften einsetzen, was nach wie vor einfach und sicher ist.

Adressen einiger wichtiger Font-Repositories:

Schriftartenfamilien und die Standardschriften der Betriebssysteme

Wie bereits erwähnt, verwenden verschiedene Computersysteme verschiedene installierte Schriftarten, sogenannte Systemschriften. So besitzt beispielsweise Windows die Schrift "Arial", das Betriebssystem Unix hingegen nicht. Unix besitzt eine Schrift, die der "Arial" ähnlich ist, die "Helvetica". Diese gibt es auch unter Linux und Mac OS. Damit Ihr Dokument in jedem Browser korrekt angezeigt werden kann, sollten Sie mehrere Schriftarten angeben, sogenannte Schriftartenfamilien. Die Namen der Schriftarten trennen Sie durch Kommata. Besteht ein Font-Name aus mehreren Worten wie z.B. ’Times New Roman’, setzen Sie den Namen in (einfache) Hochkommas.
Der Browser versucht, die erste angegebene Schriftart zu laden. Ist diese nicht vorhanden, sucht er die nächste im System usw. Ist keine der angegebenen Schriftarten auf dem Computersystem vorhanden, stellt der Browser den formatierten Textabschnitt in der im Browser eingestellten Standardschrift dar.

Bedenken Sie bei der Wahl einer Schriftart den Einsatzzweck der Schrift: Lange Lesetexte, markante Hinweistexte oder Texte mit besonderer gestalterischer Absicht. Entscheiden Sie sich entsprechend für Schrifttyp und –art.

Hier eine Liste der Standardschriften unter Windows mit ihren Entsprechungen in anderen Betriebssystemen. Alle Schriften sind in der nominell selben Schriftgröße gesetzt. Wie zu sehen ist, die verschiedenen ähnlichen Schriftarten erscheinen zum Teil unterschiedlich groß. Dies hat gegebenenfalls Auswirkungen auf das Layout Ihrer Seiten. Gleiches gilt, falls der Benutzer nicht über zumindest eine der aufgerufenen Schriftart verfügt.
Die letzte Spalte zeigt die sog. generischen Schriftarten. Jedes Betriebssystem besitzt eine entsprechende generische Schriftart, jedoch sind die eingesetzten Schriftarten von System zu System zum Teil sehr unterschiedlich in Aussehen und anderen Eigenschaften (siehe cursive und fantasy).

Schriftart Typ

Windows

MacOS

Linux

Generisch

serifenlos

Arial*, Verdana*

Helvetica*

Helvetica*

sans-serif

serif

Times New Roman*

Times*

Times*

serif

diktengleich

Courier New*

Courier*

Courier*

monospace

Schreibschrift

Comic Sans MS*, Lucida Calligraphy*

Apple Chancery*

n.a.

cursive

Zierschrift

Impact*

Papyrus*

n.a.

fantasy

* System-Schriftart des jeweiligen Betriebssystems. In Windows und Mac OS X sind teilweise auch Schriften von konkurrierenden Betriebssystemen enthalten. Dies hängt z.B. von der Installation von Office-Programmen ab. Wird z.B. auf einem Mac Microsoft Office installiert, so werden gleich Windows-Systemschriften mitgeliefert.
Die hier zu sehenden generischen Schriftarten entsprechen den Standardschriften des aktuell verwendetenen Betriebssystems.

Hier der Link auf eine Website, die das Ergebis einer Untersuchung (nicht representativ) aufzeigt, bei der das Vorkommen verschiedener Schriftarten auf Rechnern mit den Betriebssystemen Windows, Mac OS und Linux untersucht wurde: http://www.visibone.com/font/FontResults.html.

Aus den Standardschriften der Betriebssysteme ergeben sich drei Schriftartenfamilien, die sich auf Grund der Ähnlichkeit der Schriften sinnvoll einsetzen lassen. Die im Folgenden genannten Standardschriftartenfamilien gelten auch heute noch für die entsprechende Angabe font-family in CSS.

Schriftarten-Typ

Schriftartenfamilie font-family

serifenlos

Arial, Verdana, Helvetica, sans-serif

serif

'Times New Roman', Times, serif

diktengleich

'Courier New', Courier, monospace

Wenn Sie erwägen, eine bestimmte Schriftart bzw. Schmuckschrift aus Windows einzusetzen: Sie finden die installierten Schriftarten im Ordner C:\Windows\Fonts. Geben Sie immer den Schriftnamen so an, ggf. in Hochkommas, wie er erscheint, wenn Sie das Beispiel der Schrift im Schriftartenordner aufrufen. Verwenden Sie nicht den Dateinamen der Schrift. Geben Sie immer auch ersatzweise eine Schriftartenfamilie aus den oben genannten an, zumindest die entsprechende generische Schriftart. Da das Betriebssystem Windows auf rund 90% aller PCs eingesetzt wird, erreichen Sie so etwa 90% aller Seitenbesucher. Aber vergewissern Sie sich, dass die von Ihnen gewählte Schrift tatsächlich eine Windows-Systemschrift ist.

Beispiel mit CSS:

<p style="font-family: 'Segoe Script', 'Comic Sans MS', cursive;">Auf Windows-Rechnern sollte dieser Absatz in der Schreibschrift Segoe Script erscheinen.</p>

100% gleiche Schriftendarstellung lässt sich nur mit Webfonts erreichen.

Schriftgestaltung in HTML mit HTML-Mitteln: der font-Tag (Veraltet)

Schrifteigenschaften mit dem Tag <font> zuweisen

Ältere HTML-Versionen enthielten den Tag <font>, der es mit den Attributen size (Schriftgröße), face (Schriftartenfamilie) und color (Schriftfarbe) ermöglichte, einem Text die entsprechenden Eigenschaften mit HTML-Mitteln zuzuweisen. Der font-Tag wurde bereits in HTML 4.01 (1997) als veraltet gekennzeichnet, es wurde angeraten, statt dessen CSS-Eigenschaften zu verwenden. In HTML5 ist dieser Tag nicht mehr enthalten bzw. zulässig und Schrifteigenschaften werden in der Regel mit CSS zugewiesen.
Dennoch wird dieser Tag und seine Möglichkeiten, Schrifteigenschaften anzugeben, auch heutzutage noch bei HTML-Emails und HTML-Newslettern eingesetzt.

Schriftgrösse size im font-Tag in HTML angeben (bis HTML4)

In HTML bis HTML4 selbst lassen sich Schriftgrößen nur relativ angeben:

<font size="zahl">zu formatierender Text</font>

Die relative Größe "Zahl" kann dabei auf zwei Arten angegeben werden:

 

Sehr kleine Schrift

 

Standard-Schriftgröße

 

 

 

Sehr große Schrift

relative Schriftgröße

1

2

3

4

5

6

7

relative Schriftgröße in Bezug auf die Standardschriftgröße

-2

-1

(keine Angabe)

+1

+2

+3

+4

Die Schriftangaben <font size="+1"> und <font size="4"> erzeugten also das selbe Ergebnis. Da die Standardschriftgröße dem Wert 3 entspricht, ergibt + 1 gleich 4. Dem zufolge ist auch die Angabe size="-1" mit der Angabe size="2" gleichzusetzen. Ausgangsgröße ist in beiden Fällen die im Browser, ggf. vom Benutzer vordefiniere Standardschriftgröße, in der Regel 12pt.

Die Schriftgröße, die als Standard angezeigt wird, ist letztendlich abhängig von den Einstellungen des Besuchers in seinem Browser. Dem Benutzer des Internet Explorers stehen im Browser im Menüpunkt "Ansicht > Schriftgrad" 5 Größen zur Auswahl. Default ist „Mittel“. Diese Einstellung wird wohl auch von den meisten Benutzern verwandt.
Vergleichbares gilt für die übrigen Browser, Firefox, Safari etc.

In der Regel wird eine Seite ohne Vorgabe der Schriftgröße mit size="3" angelegt (default-Einstellung der meisten Browser: 12pt). Hat ein Benutzer eine andere Standard-Schriftgröße gewählt, verändert sich auf allen Seiten die zu Grunde liegende Schriftgröße und damit das Layout.

Angabe der Schriftgrösse in CSS

CSS, die ergänzenden Formatierungssprache zu HTML, bietet schon seit CSS2 (und damit seit HTML4) wesentlich mehr Schrifteigenschaften, die sich gestalterisch einsetzen lassen, siehe das SelfHTML-Wiki: http://wiki.selfhtml.org/wiki/CSS/Eigenschaften.

Mit Hilfe von Cascading Style Sheets lassen sich sowohl relative als auch absolute Schriftgrößen angeben, da CSS die Angabe mit Zahlen auch in Punkt (pt) und pica (pc)erlaubt. Weitere absolute Maßangaben sind in (inch), mm (Millimeter) und cm (Zentimeter). Bei solchen absoluten Angaben lässt sich die Schriftgrösse nicht vom Benutzer beeinflussen.
Die Größenangabe pt (point, typografischer Punkt) ist vom englischen Inch (in) abgeleitet, das dem deutschen Zoll mit einer Länge von 2,54 cm entspricht.
1pt=1/72 in
Von der Standardschriftgröße für Lesetext 12pt leitet sich das pc (Pica) ab:
1pc=12pt=1/6in

Relative Größenangaben erfolgen in px (Pixel), % (Prozent), bzw. em oder ex (elementeigene Mittelhöhe der Buchstaben m oder x (m ist etwas höher als die reguläre Mittelhöhe eines Zeichens, x entspricht genau der Mittelhöhe. Der Unterschied ist marginal, ex ergibt etwas geringere Zeilenhöhen als em.

Die Schriftart face im font-Tag In HTML angegeben (bis HTML4)

<font face="Arial,Helvetica,sans-serif">zu formatierender Text</font>

Das Attribut face (=Art) legt die Schriftart eines Textes fest. Die Angabe der Schrift erfolgt immer innerhalb der Anführungszeichen. Mehrere Schriftarten werden durch Kommata voneinander getrennt. Bei solch einer Angabe spricht man von einer Schriftarten-Familie.

Ohne eine Angabe von font face verwendet der Browser die eingestellte Standardschriftart. Diese ist in der Regel eine Serifenschrift, unter Windows z.B. die Schriftart: Times New Roman. Der Benutzer kann im Browser auch selbst eine Standard-Schriftart wählen, im Internet Explorer unter dem Menüpunkt: "Extras > Internetoptionen > Allgemein:  Schriftarten..."

Die Schriftfarbe color im font-Tag in HTML festlegen (bis HTML4)

<font color="red">roter Text</font> (zulässiger Farbname) oder

<font color="#ff0000">roter Text</font> (Hexadezimalzahl als Farbangabe).

CSS-Beispiel: <p style="fontsize:1.2em">Textabsatz mit einer Schriftgröße des 1,2fachen der im CSS vordefinierten Standardschriftgröße</p>

Mehrere Schrifteigenschaften in einem font-Tag zuweisen - Tags ineinander verschachteln

Quellcode-Beispiel:

...

<body>

<font size="4" color="black" face="'Times New Roman', Times, serif">Mit dem font-Tag gleich nach dem öffnenden body-Tag werden die Schrifteigenschaften für die ganze Seite festgelegt. Dementsprechend wird dieser font-Tag erst vor dem schließenden body-Tag beendet.

...

<p><font color="navy" face="Arial, Helvetica, sans-serif">Tags, auch font-Tags lassen sich schachteln. Somit lassen sich einzelnen Seiteninhalten eigene Schrifteigenschaften zuweisen, wie hier diesem Absatz mit blauem Text in einer serifenlosen Schriftart.
Beim Schachteln von Tags, englisch nesting, gilt der Grundsatz des "perfect nesting" (dt.: wohlgeformter Quelltext) unbedingt zu beachten: der (font-)Tag, der als Letzter eröffnet wurde, muss als Erster wieder geschlossen werden.
</font></p>

...

</font>
</body>
</html>


Quellen: