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".

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

Schmuck- und Zierschriften, generische Schriftart fantasy wie das voranstehende Beispiel: auch für die Schmuck- und Zierschriften gilt, dass jedes Betriebssystem seine eigenen Schrift dieser Gruppe aufweist, dass aber auch hier die systemeigenen Schriften über die Betriebssysteme hinweg nicht ähnlich sind.

Schriften aus Webfont-Repositories (Google, Adobe oder eigene Downloads) einbinden

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.
Heutzutage ist das zwar prinzipiell auch noch eine Möglichkeit, aber man nimmt davon Abstand, da so zum Beispiel Textlogos und Überschriften mit wichtigen Suchstichworten/Keywords von den Suchmaschinen nicht augelesen werden können.

Heute ermöglichen es 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. Auch, wenn Sie die Schriften selbst hosten, erfolgt die Einbindung per HTML und/oder CSS (ein Beispiel zeigt der 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. Je nach dem, was man wünscht - 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. Sie sollten dennoch nach wie vor zudem auch Standard-Systemschriften und generische Schriftarten mit angeben, falls die angebotene Schriftart aus irgend einem Grund doch nicht angezeigt werden kann.

Adressen einiger wichtiger Font-Repositories:

Rechtliche Probleme beim Verlinken von Schriften aus Font-Repositories

Google Fonts bietet als CDN viele kostenlose Schriften an, die mit einer Zeile HTML bequem in jede Webseite eingebunden werden.
Beachten Sie, dass auf diese Weise auch Google selbst von den Besuchen auf Ihren Seiten erfährt und Daten Ihrer Gäste erhält.
Das Landgericht München hat geurteilt (20.01.2022, Az. 3 O 17493/20), dass die Bereitstellung eines Google Fonts auf eine Weise, die die IP des Seitenbesuchers ohne seine Einwilligung an Google übermittelt, einen Schadenersatz begründet.

Schriften von Google-Fonts lassen sich einfach und kostenfrei herunterladen und im Gedenken an den Schutz der Privatsphäre aller User auch selbst hosten. Das erspart zudem rechtliche Hinweise in den Angaben zum Datenschutz.

Wie das geht, zeigt der hier verlinkte Artikel aus dem SelfHTML-Wiki. (Quelle)

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*

 Textbeispiel für die generische Schriftart

cursive

Zierschrift

Textbeispiel für die generische Schriftart*

Papyrus*

 Textbeispiel für die generische Schriftart

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. Für die generische Schriftart fantasy (Zierschrift) scheint es unter Windows keine Festlegung zu geben (siehe Beispiel oben).

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.

Wenn Sie diese nicht einsetzen können, kann folgende Auflistung eine Hilfe sein: die nachfolgend genannten Schriftartenfamilien bietet der schon etwas ältere WYSYWIG-Editor "Microsoft Expression Web" an, zusätzlich zu den oben genannten:

Schriftarten-Typ

Schriftartenfamilie font-family

serifenlos

'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

serifenlos

'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

serifenlos

'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

serifenlos

'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

serifenlos

'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

serifenlos

Verdana, Geneva, Tahoma, sans-serif;

serifenlos

Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

serif

Cambria, Cochin, Georgia, Times, 'Times New Roman', sans-serif;

serif

Georgia, 'Times New Roman', Times, sans-serif;

Beachten Sie: Sie können die Schriftartenfamilien hier aus der Tabelle auskopieren und direkt in Ihrem Editor in den Quellcode einfügen.

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. Tatsächlich interpretieren auch die aktuellen Browser den Tag <font> mit seinen HTML-Attributen korrekt.

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, war früher letztendlich abhängig von den Einstellungen des Besuchers in seinem Browser. Benutzer*innen des MS Edge Browsers stehen im Browser in den Einstellungen unter "Einstellungen > Darstellung: Schriftarten > 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.

So war es früher. Bei Webseiten, deren Schriftgröße mit CSS und absoluten Größenangaben definiert ist, kann der Benutzer bestenfalls dadurch die Schriftgröße ändern, indem er die ganze Seite zoomt oder verkleinert.

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 Browser MS Edge in den Einstellungen unter: "Darstellung > 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 size="2" 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 es, den 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>

Dieser Text trägt wieder die Eigenschaften des ersten font-Tags. (Allerdings musste ich für die gewollte "richtige" Darstellung tricksen und die font-Tags abschnittsweise einfügen und schließen, da das CSS auf der Seite die eigentlich korrekte, gewünschte Darstellung nicht zuließ. Dass zutrifft, was ich hier schreibe, können Sie in der perfect-nesting.htm sehen.)

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

Quellen:

Klaus Gölker www.webweavers.de © 2014-2024