Artikel

Was ist mit cufón, typeface.js oder lettering.js?

Last modified: Oktober 23, 2011

Schriftmanipulation lettering.js

Screenshot: Schriftmanipulation lettering.js - Vorlage

Schriftersetzung ist noch immer aktuell, wenn es sich um Lizenz- oder Darstellungsfragen dreht. Leider möchte man aus mehreren Gründen sagen: Zum einen sind mit dem verstärkten Einsatz von font-face alternative Schriftersetzungs-Lösungen fast obsolet geworden und, entwickelt man im Hinblick auf Barrierefreiheit, waren diese alternativen Lösungen nie wirklich eine Option.

War früher in Sachen Schriftersetzung sIFR Marktführer, übernahmen später Javaskript-basierte Lösungen die Führung. Die bekanntesten sehen wir uns nun im Hinblick auf Barrierefreiheit genauer an: cufón, typeface.js und eine Methode der Schriftmanipulation –  lettering.js.

Technik

Im BIK-Test des Monats März 2011 spielt die Schriftersetzung mit Hilfe von cufón eine nicht unbedeutende Rolle: Das Bundesministerium für Gesundheit setzt in großen Teilen auf diese Schriftersetzung, setzte muss man nun sagen. Das problematische Testergebnis, am dem cufón einen nicht unbeträchtlichen Anteil hat, scheint Wirkung gezeigt zu haben. Es befinden sich zwar noch Code-Reste mit dem Verweis auf cufón im Quellcode oder in Skripten, aber cufón erzeugt keine Ersetzung mit Hilfe des canvas-Elements mehr.

Vorlage Schriftersetzung Cufon

Screenshot Schriftersetzung Vorlage Cufon

Damit sind wir schon beim technischen Stichwort: Sowohl cufón als auch typeface.js nutzen die Möglichkeiten des Browsers, Vektorgrafiken zu rendern. Die Ausgangsschrift wird mit Hilfe eines Konverters in eine Javaskript-Datei umgewandelt. Der Browser stellt den Text dann entsprechend seiner Möglichkeiten mit Hilfe des canvas-Elements oder als Internet Explorer vor Version 9 als VML dar.

Bei lettering.js liegt der Fall etwas anders: Hier wird mit Hilfe von Javaskript um jeden Buchstaben eines Wortes ein span-Element gesetzt, damit man jeden Buchstaben per CSS einzeln manipulieren kann. Dieses Verfahren kann man auch auf größere Einheiten ausweiten, etwa einzelne Wörter manipulieren oder ganze Zeilen. Hier handelt es sich auch nicht um eine Schriftersetzung, sondern um eine -manipulation.

Barrierefreiheit

Sicherlich sind die beiden Schriftersetzungsmethoden im Vergleich etwa zu sIFR ein Gewinn gewesen. Lange gab es zur  Darstellung von sIFR kaum Alternativen. Freilich blieb die Lizenzfrage die gleiche, längst haben die Schriftenhersteller in ihren EULAs nachgezogen und legen die Lizenzen auch explizit für sIFR oder cufón fest. Wie für sIFR gilt, sieht man sich die Barrierefreiheit solcher Lösungen an, kann es ganz schnell unschön werden.

Wir sehen uns daher alle drei Methoden unter folgendem barrierefreien Blickwinkel an:

  • Kommen Screenreader damit klar?
  • Wie sieht es mit der Skalierbarkeit aus?
  • Was passiert im Kontrastmodus oder bei benutzerdefinierten Farben?
  • Der ewige Knackpunkt all dieser Techniken: Verlinkungen

Für den Test haben wir einen einfachen Text ausgewählt: eine Überschrift und einen Absatz.

<h1>Überall dieselbe alte Leier.</h1>

<p>Das Layout ist fertig, <a href=”http://sprungmarker.de” title=”weiter zum sprungmarker Projekt”>der Text</a> lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>

Schriftersetzung Vorlage typeface.js

Screenshot Schriftersetzung Vorlage typeface.js

Nur bei typeface.js wird die Überschrift durch einen Absatz ersetzt, da keine Überschriften unterstützt werden – zumindest keine semantischen Überschriften. Die Webseite von typeface.js arbeitet mit visuellen Überschriften, die aber nur mit Hilfe von div-Elementen und CSS hergestellt sind. Im Grunde hat sich typeface.js damit schon für eine weitere barrierefreie Prüfung disqualifiziert.

Ein Gedanke zu “Was ist mit cufón, typeface.js oder lettering.js?

  1. Pingback: Webentwicklung: Deutsche Umlaute und cufón | Das Örtchen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit dem Hinweis "(Pflicht)".

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>