Webfonts

Schriften im Internet sind lange Zeit nicht einfach gewesen. Man hatte am Anfang überhaupt nicht an Gestaltung gedacht, oder an die Lesbarkeit, da es ja nur darum ging stumpfe Informationen zu vermitteln. Mittlerweile wird viel gestaltet, viele neue Funktionen wurden implementiert und im Großen und Ganzen ist das Internet zu einer riesen Stadt mutiert, die nur vor Reizüberflutung schreit.

Web-Typografie & websichere Schriften

Nun geht es darum, dass wir Informationen richtig vermitteln wollen. Also: was machen wir mit unserer Schrift? Anfänglich war es wie gesagt etwas schwierig, da man nur Schriften verwenden konnte, die mit Sicherheit auf JEDEM Rechner installiert sind. Nennen wir ein paar Kinder beim Namen: Times, Arial, Helvetica, Verdana, Georgia, Comic Sans (kommt bitte niemals auf die Idee, diese Schriftart zu verwenden) und noch ein paar andere. Wir haben also nur eine handvoll an Schriftarten gehabt, die wir verwenden konnten. Nun ging die Gestaltung los. Wir wollen also Schriftarten verwenden, die zum Corporate Design der jeweiligen Firma etc passt. Es wurden also Überschriften, kleinere Textpassagen usw als Grafik eingebunden. Der große Nachteil bei dieser Methode ist, dass kein Bot der das Internet nach Informationen durchforstet diesen Text lesen kann und die Ladezeit der Webseite unnötig in die Höhe getrieben wird. Also haben wir eigentlich nichts dabei gewonnen. Webdesigner hatten stehts das Problem, dass diese nur an diese websicheren Schriften gebunden waren und dadurch manches Design an Qualität verlor.

Folgende Schriften sind auf ca. 98% aller Rechner auf der Welt vorhanden und gelten als websichere Schriften:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Romans
  • Trebuchet MS
  • Verdana

Diese Schriften wurden jetzt via HTML & CSS eingebunden – sollten diverse Schriften nicht richtig dargestellt erscheinen, wissen Sie als Leser zumindest, welche von den normalerweise überall vorhandenen Schriften nicht auf Ihrem System installiert ist.

Die Ära der Webfonts

Gott sei Dank, hat diese Ära ein Ende gefunden. Wie ein wachsames Auge eventuell bemerkt haben sollte, verwende ich hier auch keine sogenannten „websicheren Schriftarten“, da es nicht mehr nötig ist. Man hat die Möglichkeit jede erdenkliche Schriftart, zur Webfont konvertieren zu lassen. Natürlich bietet Google auch eine riesen Ansammlung an Webfonts, die man sich kostenlos herunterladen kann, oder einfach über den Google-Server in den Head einbinden kann.

Fonts zu Webfonts konvertieren

Hat man aber nur beispielsweise eine TTF-Datei, ist dies auch kein Problem: es gibt eine Seite, auf der man online eine beliebige Schriftdatei hochladen kann, welche dann komplett mit allen nötigen Dateien + CSS ausgegeben wird:

http://www.font2web.com/

Es ist echt nicht schwer zu handhaben und jeder Browser, den ich damit getestet hatte stellte ein zufriedenstellendes Ergebnis dar und auch die Suchmaschinen-Bots sind glücklich.

Tipps für Webfonts

Da durch diverse Bildschirmauflösungen Webfonts nicht optimal gerendert werden können und diese pixelig erscheinen, muss man an manchen Stellen ein wenig nachhelfen. Oberstes Ziel in der Webtypografie ist eine optimale Lesbarkeit zu erreichen, aber auch eine individuelle Gestaltung präsentieren zu können. Schriften sollen „wie gedruckt“ aussehen, was bei Bildschirmen nur mit einer Auflösung von 600/Inch, oder noch besser 1200/Inch realisierbar wäre. Real liegt die Auflösung bei 80-120/Inch. Deswegen erscheinen manche Schriften pixelig und weisen Treppenstufen bei schräg verlaufenden Strichen und Bögen auf.

An dieser Stelle können wir mit CSS3 eine Art „Antialiasing“ erzwingen:

.Schriftklasse { font-shadow: 0 0 1px #ccc;}

Dies ist die CSS Deklaration für eine schwarze, oder graue Schrift auf hellem Grund. #ccc ist ein relativ helles neutrales Grau, welches einen Mittelton zwischen Schrift- und Hintergrundfarbe bildet, sodass der Übergang weicher erscheint. Dies müsste je nach Schrift- und Hintergrundfarbe entsprechend angepasst werden.

1 Kommentar

  1. Und aus dieser schier endlosen Anzahl von Möglichkeiten der Gestaltung entsteht auch eine endlose Anzahl von Webseiten, welche den Fokus eher auf tolle Gestaltung legen, statt auf Informationen. Der eigentliche Sinn des Internets war von vornherein, Informationen zu verbreiten, weshalb es wohl seinen Grund hatte, die Anzahl der möglichen Schriftarten zu begrenzen.

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Time limit is exhausted. Please reload CAPTCHA.