Schriften im Internet – Webserver machen Fonts websafe
\\ Nach der Wahl der «richtigen» Schrift geht es so richtig los. Will man optimale Performance mit einem individuellen Look vermählen und dabei nicht auf den Zugriff von Suchmaschinen verzichten, ist das Laden der Corporate Schriften auf den Webserver die Lösung.
Grundsätzlich gibt es zwei unterschiedliche Arten die Schrift einzubinden. Die klassische Variante wäre, dies via Cascading Style Sheets (CSS) zu tun. Der Nachteil bei dieser Variante ist, dass die beabsichtigte Darstellung davon abhängt, ob der User, der die Webseite anschaut, die benötigte Schrift auf seinem Rechner installiert hat. Ist dies nicht der Fall, greift das System auf eine alternative Schrift zurück. Im Idealfall wurden hier mehrere Schriften als Ersatz (sogenannte Fallback Fonts) vordefiniert damit der visuelle Schaden möglichst klein ist.
Seit CSS3 ist jedoch der Durchbruch gelungen. Nun können Schriften via «@font-face» eingebunden werden. Die Schrift wird auf dem eigenen WebServer hinterlegt und der Pfad in den CSS angegeben. Vorsicht, um die Schrift so zu verwenden muss die Schriftlizenz vom Hersteller gekauft werden, denn auch fürs Internet müssen spezielle Schriftlizenzen gekauft werden. Generell werden Schriften als OpenTypeFonts (OTF) hinterlegt. Jedoch haben verschiedene Versionen vom Internet Explorer mit der Darstellung von OTF noch Mühe. Deshalb sollte besser auf Embedded OpenType (EOT) zurück gegriffen werden.
Einbindung und Lizenzierung von Corporate Schriften im Web. Eine weitere Methode ist, die Schrift mittels JavaScript einzubinden. Diese Variante ist auch bei den Schriftherstellern sehr beliebt. In letzter Zeit sind diese auch vermehrt daran, eigene JavaScripts zu entwickeln, damit die einfache Implementierung und störungsfreie Darstellung gesichert ist. Natürlich ist das Interesse der Schrifthersteller nicht völlig selbstlos. Denn wenn sie eigene Softwarelösungen anbieten, können sie auch die Lizenzierung ihrer Schriften besser kontrollieren. Im Gegensatz zu Arbeitsplatz Lizenzen werden die Rechte für die Verwendung von Schriften im Web periodisch und meist Jährlich verrechnet. Die Höhe der Kosten richtet sich hier nach der Anzahl von Pageviews per 30 Tage und beginnen bei 10$ für bis zu 250000 Pageviews.
Es gibt allerdings auch Anbieter von Lizenzfreien Webfonts auf die via «@font-face» zurückgegriffen werden kann. Eine dieser Open Source Libraries ist «Google WebFonts».
Definition von Fallback Schriften. Doch auch trotz Hochladen der Schrift auf den Server oder Integration via JavaScript, darf nicht vergessen werden, eine alternative Schrift anzugeben. Dies als Backup Lösung falls der Browser keiner der Technologien unterstützt oder sonstige Probleme auftreten sollten. Bei der Wahl der optimalen Fallback Schriften ist es wichtig, die Laufweite, Grösse, Buchstabenbreite und den Charakter der Schriften zu berücksichtigen, damit das Layout konsistent dargestellt wird.
Masseinheiten und weitere Einstellungen. Um eine bessere Skalierbarkeit zu erreichen empfiehlt es sich, bei der Masseinheit auf Pixel zu verzichten und statt dessen auf em umzustellen. Ein em entspricht der Breite eines Gevierts. Mit em wird die Schriftgrösse und auch das Layout dynamisch angegeben. Die Basisschriftgrösse eines Browsers beträgt immer 16px. Dies entspricht also 1em. Sollte die Schrift nun 18px sein, ist diese mit 1.125em anzugeben, für 14px wären es 0.875em. Die doppelte Schriftgrösse, also 32px, wäre dem zu folge 2em, 2mal die Basisschriftgrösse.
Es kann aber auch eine eigene Basisschriftgrösse definiert werden. In der Programmierung erfolgt dies im <body> Tag. Von der gesetzten Basisschriftgrösse werden alle weiteren Schriftgrössen in em abgeleitet.
Selbst Unterschneidungen sind möglich, werden aber nur von neueren Browsern unterstützt.
Wenn man also ein paar grundlegende Designregeln beachtet und aus den hier beschriebenen Technologien die passende einsetzt, lassen sich Webseiten heute nahezu ohne Grenzen auf die eigenen Bedürfnisse zuschneiden.
Für Fragen, Feedbacks und Input zum Thema und auch sonst, nutzen Sie die Kommentar-Boxen oder unser Kontaktformular.