CSS3: So erstellen Sie eigene Webfonts - zum Beispiel mit Ihrer Handschrift

Dank CSS3 Gestaltungsfreiheit für echte Schriftarten: So gestalten Sie Ihre individuelle Webtypographie

Für Webseiten war die Auswahl an Standardschriften lange eingeschränkt – doch dank CSS3 steht einer individuellen, kreativen Webtypographie nichts mehr im Wege. Gestalten Sie Ihren eigenen Webfont!

∅ 5 / 3 Bewertungen

Im Printbereich gibt es unzählige Schriften. Für Webseiten war die Auswahl an Standardschriften lange Zeit stark eingeschränkt – doch mit der Einführung von CSS3 steht nun auch einer individuellen und kreativen Webtypographie nichts mehr im Wege.

Standardschriften mit font-family

Für die Darstellung der Schrift wird in CSS die Eigenschaft font-family verwendet. Der Browser greift zur Darstellung von Schriften auf die installierten Standardschriftsysteme des Betriebssystems zurück. Die Standardschriftarten unterscheiden sich jedoch erheblich von Betriebssystem zu Betriebssystem. Was bei Windows Arial ist, heißt bei Apple (Mac) Helvetica. Und für viele der Betriebssystem-spezifischen Schriften, wie z.B. Comic Sans MS, existieren keinerlei Entsprechungen auf anderen Betriebssystemen, wodurch die Auswahl geeigneter Schriftarten auf Webseiten äußerst begrenzt ist. Um dennoch systemübergreifend beispielsweise eine serifenlose Schrift darstellen zu können, verwendet man in CSS Fallback-Lösungen.

Ein Beispiel:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Dieser CSS-Befehl besagt, das sämtlicher Text im body des HTML-Dokuments (also alles) in einer serifenlosen Schriftart dargestellt werden soll. Dabei prüft der Browser zunächst, ob die Schriftart Verdana zur Verfügung steht. Ist dies nicht der Fall, wird geprüft, ob Arial bzw. Helvetica vorhanden ist. Ist keine der angegebenen Schriftarten auf dem PC-System vorhanden, so wird eine serifenlose Standardschrift zur Darstellung des Textes verwendet. Das heißt, der Browser prüft von links nach rechts das Vorhandensein der angegebenen Schriftarten.

Verdana, Arial, Helvetica

Verdana ist eine serifenlose Linear-Antiqua-Schrift, die im Hinblick auf eine optimale Bildschirmdarstellung bei kleinen Schriftgrößen von dem Schriftdesigner Matthew Carter für Microsoft 1996 entwickelt wurde. Arial ist die serifenlose Standardschriftart auf Windows-Systemen; Helvetica das Arial-Gegenstück auf Mac OS.

Webfonts mit @font-face einbetten

Mit CSS3 wurde die @font-face-Eigenschaft eingeführt. Mit dieser CSS-Regel ist es nun möglich, eigene, systemfremde Schriften in eine Webseite einzubinden. Dort, wo man früher auf Grafiken – z.B. für Überschriften mit exotischen Schriftarten – zurückgreifen musste, lassen sich nun echte Schriften einsetzen. Das bringt Vorteile hinsichtlich der Zugänglichkeit (Barrierefreiheit) von Webseiten und hilft natürlich auch bei der Suchmaschinenoptimierung, da nun die Keywords in der Überschrift nicht länger unsichtbar für den Such-Robot in einer Bilddatei stecken, sondern direkt indiziert werden können. Außerdem sind echte Schriften skalierbar, d.h. auch bei starker Vergrößerung (Zoom) scharf und nicht verpixelt.

Wollen Sie weiterlesen?

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen und verwenden.

Wollen Sie mehr über die Mitgliedschaft erfahren?

Wenn Sie schon Mitglied sind, loggen Sie sich bitte ein.