Typografie ist heute ein wichtiger Design- und Gestaltungspunkt geworden. Schon die Auswahl der geeigneten Schriftarten für ein Dokument kann die Erscheinung stark beeinflussen. Dabei ermöglicht Typographie, Design mit Kommunikation zu vereinen, um einer Webseite oder einem Blog ein individuelles Aussehen zu geben. Im Artikel werden einige JavaScript Libraries und Tools vorgestellt, die Ihnen bei der typographischen Gestaltung Ihrer Webseite helfen können.
Ein wesentlicher Bestandteil der Webseiten Typographie ist die Schriftart oder Font. Doch wie binde ich als Webmaster meine eigenen Fonts in meine Webseite ein? In den meisten Fällen werden Texte mit eigenen Fonts als Grafik oder als Flash dargestellt. Doch gerade diese werden von den meisten Suchmaschinen nicht als Content gewertet oder der Besucher der Seite muss einen Flash Player Plugin auf seinem Browser installert haben. Abhilfe schafft JavaScript
Cufón
Bei Cufón wird die gewünschte Schriftart über ein Web-Interface umgewandelt und anschließend per JavaScript eingebettet. Sollte Javascript beim Webseiten Besucher ausgeschalten sein, wird der entsprechende Tag im definierten Zeichensatz dargestellt. Bei Cufón können ttf- bzw otf-Fonts verwendet werden.
Nachteile: Es lassen sich nur drei Schriftstile (normal, fett, kursiv) hochladen und auch die Anzahl der einzubettenden Zeichen ist begrenzt. Ausserdem wird für jedes Wort ein eigenes Span Element generiert, welches den Code aufbläht.
Ein weiterer Vertreter dieser Sparte ist
typeface
Auch mit typeface lassen sich eigene Schriftarten in einer Webseite verwenden. Die Konvertierung erfolgt wie bei Cufón, über ein Webinterface. Typeface.js rendert die konvertierte Schrift ohne Verwendung von Grafiken und Flash. Ist Javascript inaktiv, wird die Schrift wie im CSS festgelegt dargestellt.
Cufón vs Typeface
Der Unterschied zwischen beiden ist sehr gering. Cufón unterstützt mehr Filetypen, Typeface mehr CSS-Eigenschaften. Typeface.js ist einfacher zu verwenden, Cufón ist etwa 40kb kleiner. Bei Typeface.js können transformierte Texte nicht markiert und kopiert werden. Bei beiden kann es zu Problemen bei der Lizenz der verwendeten Truetype-Fonts kommen.
Hyphenator
Mit Hyphenator.js wird eine automatische Silbentrennung erzeugt. Sollte ein langer Text, zum Beispiel durch verkleinern der Auflösung, zu einem Zeilenumbruch gezwungen werden, übernimmt Hyphenator die Silbentrennung. So kann es nicht zu unschönen Blogsätzen führen.
Momentan werden folgende Sprachen unterstützt:
- Englisch
- Deutsch
- Französisch
- Niederländisch
- Schwedisch
- Spanisch
- Malayalam, Tamil, Hindi, Oriya, Kannda, Telugu, Bengali, Gujarati und Panjabi
- Italienisch
Fazit
Wie man sieht, ist die Lösung vom Traum einer Schriftenvielfalt im Netz noch weit entfernt. Auch ältere Lösungen wie das Flash/ JavaScript Tool sIFR, können die Probleme der WebDesigner nur bedingt lösen und schaffen gleich wieder neue.
