Grenzenlose Schriften

Image-Replacement

Fonts verleihen einem Design ein individuelles Gesicht. Doch Webdesigner stecken in einem engen Korsett, das aus nur wenigen systemübergreifend verfügbaren Schriften besteht.

Image-Replacement

© Archiv

Image-Replacement

An einem Webdesign lässt sich so gut wie alles beeinflussen. Nur bei den Schriftarten stößt der Designer immer wieder an enge Grenzen. Gerade eine gute Handvoll verschiedene Schriften sind es, auf deren browserübergreifende Unterstützung er sich verlassen darf.

So richtig kreativ lässt es sich aber nicht arbeiten, wenn die Auswahl letztlich nur aus Arial, Tahoma oder Verdana besteht. Und Kunden, die auf die Übernahme ihrer Hausschrift in ihr Webdesign drängen, lassen sich so auch nicht zufrieden stellen. Mit Sifr 3 zeigen wir Ihnen eine Lösung, die Ihnen mit minimalem Mehraufwand neue Freiräume erschließt.

Image Replacement

Viele Designer flüchten sich in grafische Lösungen, erzeugen beispielsweise jede Überschrift im gewünschten Font in Photoshop. Angesichts immer größerer und oft auch mehrsprachiger Websites und sich immer häufiger verändernder Inhalte artet das in riesigen Mehraufwand aus. Zudem steigen Ladezeiten durch das größere Dateivolumen und höhere Request-Zahlen sprunghaft an.

Nur ein scheinbarer Ausweg liegt in der Automatisierung der Grafikerzeugung, beispielsweise mit PHP. Die Skriptsprache bietet mit ImageMagick und imagegetttftext() einschlägige Methoden, die sich aber nur schwer integrieren lassen und Schwächen beim Umgang mit nichtproportionalen Schriften zeigen. Und das (ohne geeigneten Caching-Algorithmus) bei jedem Seitenaufruf notwendige Rendering schlägt sich in erhöhter Serverlast und Ladezeit nieder.

@font-face und EOT

Auch ein Hilfe suchender Blick in die CSS-Spezifikationen führt zu keiner Lösung. Zwar hat das W3C mit @font-face schon 1998 einen Weg beschrieben, auf dem sich Fonts für Browser verlinken lassen. Doch erst seit wenigen Monaten steht mit Safari 3 ein Browser bereit, der sich TrueType-Fonts auf diesem Weg unterjubeln lässt. Sieht man einmal über den geringen Verbreitungsgrad von Safari hinweg, dann birgt @font-face doch auch große lizenzrechtliche Probleme, setzt es doch Schriftdateien voraus, die ungeschützt auf Webservern liegen und sich von jedermann abgreifen lassen.

Um dieses Problem zu lösen, hat Microsoft sein vormals proprietäres EOT (Embedded Open Type) dem W3C kürzlich zur Standardisierung vorgelegt. Damit können Rechteinhaber ihre Schriften gezielt für einzelne Domains lizenzieren beziehungsweise technisch freischalten.

Sifr 3

In der Zwischenzeit bildet Sifr 3 den besten Ausweg aus der Misere. Diese frei verfügbare Technik verwendet Javascript, um HTML-codierten Text durch Flash-Filme zu ersetzen, die TrueType-Fonts beinhalten. Dabei hat Sifr mehrere Vorteile. Außer der Integration des Javascripts sind keine Veränderungen des HTML-Codes notwendig. Ist die Funktion erst mal integriert, können Sie Seiten wie gewohnt codieren und dürfen sich dabei darauf verlassen, dass Ihre Texte ohne weiteres Zutun dynamisch mit True-Type-Fonts ersetzt werden.

Auch hinsichtlich Usability und Accessibility hat Sifr seinen Reiz. In Browsern, die Sifr nicht unterstützen und gegenüber Suchmaschinen erscheint ganz normaler HTML-Code. Die Flash-Texte hingegen lassen sich wie gewöhnlicher Text mit dem Mauszeiger markieren und auch als Link stylen - inklusive Hover-Effekt. Lediglich die Anzeige des Link-Ziels in der Statuszeile des Browsers bleibt Sifr schuldig.

Wirklich negativ fällt Sifr einzig durch sein Download-Gewicht auf, das je nach Schriftart zwischen 50 und 100 KByte liegt. Obwohl es sich noch in der Beta-Phase befindet, empfehlen die Entwickler Sifr 3 bereits für den produktiven Einsatz, da es gegenüber der Vorgängerversion deutliche Vorteile bietet. Sifr unterstützt Internet Explorer ab Version 6, Firefox und Safari jeweils ab Version 2 und Opera ab Version 9.5. Auf den Rendering- Engines Gecko und Webkit basierende Browser werden ab den Versionen 1.8 bzw. 412 der beiden Engines unterstützt. Konqueror kann nicht mithalten, bietet er doch keine Kommunikationsmöglichkeit zwischen Javascript und Flash.

zm_timkaufmann

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…