Mit der sorgfältigen Auswahl der Schriftart [1] kann das Aussehen von Inhalten im Web beeinflusst und gestaltet werden. In diesem Tipp wird betrachtet, wie eine Schriftart eingebunden und verwendet wird.

1. Standardschrift

Der Inhalt einer Webseite ist in der Hypertext Markup Language (HTML) kodiert und wird z.B. in HTML-Dateien auf einem Webserver gespeichert. Solcher Inhalt wird mit einem Webbrowser vom Webserver abgerufen und dargestellt. Eine einfache HTML-Datei sieht beispielsweise wie folgt aus:

Eine einfache HTML-Seite
<html>
  <head>
    <title>Startseite</title>
  </head>
  <body>
    <h1>Überschrift</h1>
    <p>Inhalt</p>
  </body>
</html>

Ist wie oben keine Schriftart ausdrücklich angegeben, erfolgt die Darstellung der Webseite in einer Standardschrift, die in der Konfiguration des Browsers voreingestellt und wählbar ist. Die Standardschrift ist eine Schriftart, die als Teil des Betriebssystems geliefert wird, auf dem der Browser läuft.

2. Schrifteinstellung über CSS

Zur Darstellung in einer fest vorgegebenen Schriftart wird die Webseite um Angaben zur Gestaltung erweitert. Dies geschieht mit Hilfe eines Cascading Style Sheets (CSS), das zu diesem Zweck mit einem link-Element in der Webseite angegeben wird.

Verweis auf ein Cascading Style Sheet in einer HTML-Seite
<html>
  <head>
    <!-- Metadaten -->
    <link rel="stylesheet" href="stile.css">
  </head>
  <body>
    <!-- Seiteninhalt -->
  </body>
</html>

Im Stylesheet, hier in der Datei stile.css, kann mit Hilfe des Attributs @font-face eine Schriftart eingebunden werden.

Einbinden einer Schriftart über CSS
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meiner/schrift.ttf') format('truetype');
}

Mit diesem Eintrag kann nun die Schrift meine-schrift den Elementen einer Webseite zugewiesen werden. Das geschieht abermals im Stylesheet. Sollen beispielsweise alle Elemente einer Webseite in der selben Schriftart erscheinen, kann die Schriftart dem body-Element zugewiesen werden.

Zuweisen einer Schriftart über CSS
body {
  font-family: 'meine-schrift';
}

2.1. Darstellungstechnik

In der Informationstechnik wird jede auf einem Rechner oder einem angeschlossenen Gerät digital vorliegende Schriftart als Font bezeichnet [4]. Je nach vorgesehener Darstellung kann ein Font entweder in einem rasterorientierten Format als Bitmap oder als frei skalierbarer Vektorfont vorliegen. Im Gegensatz zu Rasterfonts können Vektorfonts wie auch Vektorgrafiken unabhängig von der Auflösung des Ausgabegerätes in beliebiger Größe ohne Qualitätsverluste ausgegeben werden.

Bekannte Outline-Fontformate sind jeweils das TrueType-Format, diverse PostScript-Formate und das OpenType-Format. Eine Besonderheit unter den Outline-Formaten bildet das Scalable-Vector-Graphics-Format. Dieses ist ausschließlich für Bildschirmanzeigen konzipiert, nicht für das Drucken.

Für eine frei skalierbare, scharfe Abbildung von Zeichen in hoher Qualität über alle Geräte hinweg bis zur gedruckten Ausgabe sollte also darauf geachtet werden, für Webseiten stets Outline-Fonts einzusetzen.

3. Schriftart beschaffen

Damit eine Schriftart verwendet werden kann, muss sie für den Browser zugänglich sein. Sie muss zuerst beschafft und auf dem Webserver hinterlegt oder aus dem Web eingebunden werden. Viele Schriftarten werden von ihren Herstellern frei zugänglich gemacht, eine gute Quelle für solche Schriftarten ist Google Fonts [3].

Eine Schriftart kann direkt von dort eingebunden oder heruntergeladen werden. Der Vorteil des Herunterladens von Schriftarten ist, dass die Schriftart dann wie beschrieben vom eigenen Webserver aus in die Webseite eingebunden werden kann. Der Browser muss dann nicht bei jeder Anzeige einer Webseite die Schriftart von Google laden sondern holt sie sich vom Webserver, von dem auch die jeweilige Webseite geladen wird.

4. Schlussbemerkungen

HTML und CSS bieten eine große Zahl an Möglichkeiten zur Schriftgestaltung von Web-Inhalten. Dafür ist der hier beschriebene Einsatz von Schriftarten eine elementare Voraussetzung.

Dieser Tipp zeigt die wenigen Handgriffe zur Verwendung einer individuellen Schriftart. Darüber hinaus hat beispielsweise das SelfHTML-Projekt mehr Informationen zur Schriftformatierung [2].

5. Verweise

[1] Schriftarten im Wiki des SelfHTML-Projekts.

[2] Schriftformatierung im Wiki des SelfHTML-Projekts

[3] Google Fonts

[4] Font auf Wikipedia