Logo

Pixelbande Webdesign

Webfonts für Designer

Lesezeit: 1 Minute, 39 Sekunden

Warum werden Webfonts immer populärer?

Sorgfältig gestalteten und typografisch gut gesetzten Screendesigns drohte in der Vergangenheit leider oft eine Verunstaltung, sobald dieses in HTML, CSS und JavaScript umgesetzt wurde. Typografie wurde oft stiefmütterlich behandelt: entweder man setzte nur die wenigen, sogenannten "websicheren" Schriftarten ein (gähn!), oder der Webentwickler half sich mit umständlichen Lösungen mittels Flash, JavaScript oder gar Bildern. Das sah natürlich oft genug so aus wie im Screendesign erdacht, war aber nicht im Sinne des Designers; auf die nicht vorhandene Auffindbarkeit in Suchmaschinen gehe ich gar nicht erst weiter ein.
So muss es aber nicht sein - Webfonts sind da!

Was sind Webfonts?

Die meisten der digital erstellten Schriftarten wurden für den "physikalischen" Druck erschaffen oder für die Verwendung in PDF-Dokumenten. Webfonts hingegen sind speziell für Webseiten und die Verwendung mittels "@font-face" opti- und konzipiert. Diese recht neue CSS-Deklaration verlinkt die Schriften mit den Inhalten der Webseite und macht diese dem Browser zugänglich. Jeder Besucher einer Webseite kann sie also sehen!

  • Webfonts ermöglichen Webseiten, Text indizierbar, editierbar und vergrößerbar in dynamisch erstelltem HTML-Code darzustellen
  • Webfonts funktionieren ausschließlich auf Webseiten, nicht auf Desktop-Betriebssystemen
  • gute Webfonts laden aufgrund der geringen Dateigröße schnell und beinhalten auch osteuropäische, griechische und kyrillische Zeichensätze
  • Webfonts sind für Bildschirme gefertigt und werden idealerweise mit der gesetzten Betriebsystem-Option "ClearType" dargestellt

Webfonts werden normalerweise in 3 Dateiformaten geliefert: Embedded OpenType Format (.eot), TrueType (.ttf), Opentype (.otf) sowie SVG/Canvas (.svg).

Dateigrößen

Wie lässt sich die Dateigröße gering halten? Zunächst einmal sollte der Webentwickler auch wirklich nur die unbedingt benötigten Schriftarten und Schnitte einbinden. Wird nur eine "regular" benötigt, braucht man keine "bold" einzubinden. Auch durch einschränken des Zeichensatzes lässt sich etwas Bandbreite sparen.

Ausblick

In einem nächsten Blogartikel möchte ich kurz auf die Bezugsmöglichkeiten von kostenlosen und lizenzpflichtigen Webfonts eingehen. Dort werde ich auch gute Schriftsammlungen auflisten und verlinken.

Die Pixelbande:
Webdesigner aus Leidenschaft

Wir freuen uns auf Ihre
Projektanfrage. Schreiben Sie uns eine E-Mail!

Über uns

Wir erstellen Websites und Blogs für Unternehmen oder Privatpersonen. Wir überarbeiten Ihre bereits bestehende Webseite hinsichtlich eines modernen User Interface (UI) oder einer schlüssigen User Experience (UX). Wir unterstützen Sie gerne auch bei Ihrer Suchmaschinenoptimierung (SEO).