5 Tipps | Webschriften

Bei der Gestaltung von Webseiten ist die Auswahl der websicheren Schriften begrenzt, denn im allgemeinen können Browser nur die Schriften ausgeben, die auf dem Rechner des Users installiert sind. Bei Schriften wie Arial, Times, Helvetica, Verdana bleibt das Schriftbild auf den verschiedenen Systemen fast identisch.
Damit aber nicht immer nur auf die gängigen Schriften zurück gegriffen werden muss, haben wir Möglichkeiten für die Verwendung von anderen Schriften im Web zusammengestellt.

 

Tipp 1: @FONT-FACE

Der @font-face-Aufruf kann dazu verwendet werden, „Nicht-Web“-Schriften zu laden. Dabei können neue Schriftarten vom Server aus beim Webseitenbesucher importiert werden um die korrekte Anzeige der Navigation und der Inhaltsüberschriften zu ermöglichen. Der Nachteil dieser Lösung ist, dass der Zeichensatz ungeschützt auf dem Server zur Verfügung gestellt werden muss, sodass die Gefahr besteht, dass dieser auch heruntergeladen werden kann. Je nach Schrift-Lizenz raten wir nur bei kostenlosen Schriftsätzen zu dieser Lösung.

 

Tipp 2: CUFÓN

Mit Hilfe eines Cufón-Generators können „Nicht-Web“-Schriftsätze in ein proprietäres Format umgewandelt werden, das mittels einer Rendering Engine auf Basis von JavaScript im Browser wieder lesbar wird. Dies funktioniert gänzlich ohne Flash oder Bildmaterial und die Schrift kann zudem auch mit dem Cursor markiert und kopiert werden. Der eigentliche Schriftsatz muss hierfür nicht mehr bereitgestellt werden. Falls ein Webseitenbesucher JavaScript in seinem Browser deaktiviert hat, werden die Navigation und die Inhaltsüberschriften in einer alternativen Web-Schrift angezeigt. Suchmaschinen wie Google können ebenfalls mit Cufón generierte Inhalte indexieren.

 

Tipp 3: TYPO3 GIFBUILDER

TYPO3 bietet ebenfalls eine Möglichkeit an, die es erlaubt eigene Schriftsätze zu verwenden. Hierfür wird serverseitig der Dienst „ImageMagick“ benötigt. Der TYPO3 GIFBUILDER übermittelt den gewünschten Schriftsatz und die Inhalte an diesen Dienst, der daraufhin die Zeichen und Wörter in Bilder umwandelt. Mittels Typoscript kann konfiguriert werden, welche Textelemente in Form eines Bildes ausgegeben werden sollen. Somit hat ein Webseitenbesucher auch keine Chance den Schriftsatz herunterzuladen. Diese Lösung ist allerdings nicht Suchmaschinenfreundlich, da die generierten Bilder nicht als Schrift erkannt und somit auch nicht indexiert werden.

 

Tipp 4: TYPEKIT

Auf der Seite https://typekit.com/ werden kostenpflichtig Schriften zur Verfügung gestellt. In einer Online-Bibliothek kann der User seine eigenen Schriften verwalten oder zusätzliche käuflich erwerben und anlegen. Alle benötigten Schriften sind für jeden User der Webseiten nutzbar.
Die Schriften können mit CSS-Befehl @font-face auf den Webseiten oder Blogs eingebunden werden. Der Vorteil ist, dass alle Schriften mit Lizenzen auf den Typekit-Server liegen und deshalb nicht auf den eigenen Servern liegen müssen.

 

Tipp 5: Schriftkombination und Größenwahl

Bei der Auswahl der Schriften ist stets darauf zu achten, nicht zu viele verschiedene Schriftarten zu wählen. Optimal ist eine Schrift für die Überschriften, eine für den Text und eine für die Navigation. Nicht jede Schrift kann aus gestalterischer Sicht mit jeder anderen kombiniert werden. Sie sollten sich nicht zu ähnlich sein, aber zu unterschiedlich sollten sie auch nicht sein.
Bei der Auswahl der Schriftgröße sollten Sie sich auch auf circa drei beschränken. Zu viele unterschiedliche Schriftgrößen erschweren die Lesbarkeit der Seite.

Sag es weiter...
  • Facebook
  • Twitter
  • StumbleUpon
  • MySpace
  • del.icio.us
  • MisterWong
  • RSS
  • Add to favorites
  • email
  • PDF
Dieser Beitrag wurde unter Allgemein veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>