• Text als Bild integrieren
• Text als Flash Film integrieren
• Text mit JavaScript umwandeln

1. Text in Corporate Fonts als Bild darstellen

Das Austauschen von Texten durch Bilder war lange Zeit das “optimal” mögliche und eine weit verbreitete Art, Corporate Fonts im Web darzustellen. Schlagwort hierbei ist “Dynamic Image Replacement”. Der Text wurde, um zum Einen die Auffindbarkeit durch Suchmaschinen nicht zu verschlechtern und zum Anderen trotzdem “zugänglich” zu bleiben, per CSS ausserhalb des Block Elements (also z.B. der Headline <h1>) – oder direkt unsichtbar – gesetzt und das Block Element hat eine Hintergrundgrafik versehen bekommen. Die Technik ist auch unter “Fahrner Image Replacement” (oder FIR, siehe Wikipedia) bekannt.

Ein Beispiel wäre folgendes, es muss nur das jeweilige Headline-Element mit einer bestimmten Klasse versehen werden:

<h1 class=”replace_me”>Meine grafische Überschrift</h1>

Das entsprechende CSS sieht dazu in etwa wie folgt aus:

.replace_me {
text-indent: -9999px;
width: 500px;
height: 80px;
background: url('meineheadline.gif') #ffffff no-repeat;
}

Bei Redaktionssystemen wie z.B. Typo3 kann hierbei der GIFBuilder genutzt werden, der – entsprechend konfiguriert – diese Arbeiten automatisiert für den Redakteur übernimmt.

Ein Nachteil dieser Technik sind u.a. die vielen Requests, die an den Server gesendet werden, sowie die vielen einzelnen Bilder die generiert und abgelegt werden müssen. Weiterhin kann der Text nicht kopiert werden und die Darstellung auf mobilen Endgeräten ist evtl. nicht so wie gewünscht. Der schlimmste Nachteil ist jedoch, dass manche Suchmaschinen die CSS Eigenschaft “text-indent” als Hinweis auf Suchmaschinen-Spamming ansehen und hierdurch eventuell Nachteile im Ranking entstehen könnten.

Bei dem “dynamischen Image Replacement” gibt es natürlich eine Vielzahl von verwandten und ähnlichen Techniken (z.B. die Scalable Inline Image Replacement Technik, s. SIIR oder eine Ersetzung durch PHP, hier besonders erwähnenswert: P+C DTR).

Eine etwas andere Art und Weise ist das Austauschen der Texte durch einen Flash Film:

2. Text als Flash Film integrieren

Da Flash seit Jahren die Integration von Schriftarten ermöglicht, bietet sich Flash natürlich auch als Werkzeug an, Corporate Fonts in Webseiten zu integrieren. Hier hat sich die “Scalable Inman Flash Replacement” Technik (Wikipedia Eintrag) als “Tool” bzw. technischer Ansatz etabliert. Grundsätzlich funktioniert diese so, dass die bearbeitbare FLA Datei einmal geöffnet werden muss (Flash wird also benötigt), dort die jeweilige Corporate Font integriert und eingebettet wird und danach, gemeinsam mit einigen CSS und JavaScript Anweisungen, auf dem Webserver und in der Seite hinterlegt wird.

Wie die Technik integriert werden kann findet sich auf der Projekt-Webseite von SIFR oder in unzähligen, bei Google auffindbaren Tutorials.

Nachteil: Bei der Integration von Flash auf Webseiten können sich unter anderem die Ladezeiten verschlechtern. Weiterhin könnten sämtliche Inhalte durch die steigende Popularität von Ad Blockern im schlechtesten Fall nicht angezeigt werden. Außerdem wird natürlich das Flash Plugin und aktiviertes JavaScript benötigt. Manche Blogs berichten hierbei auch von Performance Problemen, die durch das Flash PlugIn hervorgerrufen werden, sowie von Problemen, dass sich das Flash Kontextmenü und nicht das “reguläre” Browser-Kontextmenü öffnet, was ich aber kaum als Problem ansehen würde.

3. Text mit JavaScript umwandeln

Ebenfalls äußerst im Trend liegt das Ersetzen von Überschriften und ganzen Textblöcken durch JavaScript. Auf unserer Unternehmenswebseite (Online-Agentur Bielefeld) wie auch in diesem Blog nutzen wir hierfür Cufón (in diesem Blog übrigens mithilfe des Cufón WordPress Plugins von Tobias Battenberg). Natürlich gibt es aber auch noch andere Möglichkeiten.

Die Beschreibung der Features auf der Cufón Webseite liest sich wie folgt:

1. No plug-ins required – it can only use features natively supported by the client
2. Compatibility – it has to work on every major browser on the market
3. Ease of use – no or near-zero configuration needed for standard use cases
4. Speed – it has to be fast, even for sufficiently large amounts of text

Nachteil von Cufón ist die Notwendigkeit von aktiviertem JavaScript, da die Font Dateien als JavaScript Vektor-Beschreibungen vorliegen. Diesen Nachteil teilen sich allerdings fast alle anderen Möglichkeiten ebenfalls. Ein Generator für solche Font Dateien wird auf der Cufón Webseite zur Verfügung gestellt – inklusive “rights management”, auf welchen Domains die Fonts integriert sein dürfen.

Ganz neu im Boot der Text / Font-Replacement JavaScript Techniken findet sich auch der Dienstleister TypeKit.

Typekit stellt eine Vielzahl von Fonts als “Software as a service” zur Verfügung, der – in Verbindung mit einem kleinen JavaScript – die verschiedene Schriftarten in eigenen Web-Projekten (kostenpflichtig) nutzbar macht. Mehr zu TypeKit unter anderem bei SitePoint, Techcrunch oder ReadWriteWeb sowie dem TypeKit Blog.

Bei TypeKit gilt es allerdings im Hinterkopf zu behalten, dass viele der modernen Browser es bereits ermöglichen, eigene Fonts per @font-face im CSS zu integrieren und dann in der font-family CSS Anweisung nutzbar machen (bei SELFHTML wird allerdings fälschlicherweise davon gesprochen, dass Mozilla und WebKit Browser dies nicht verstehen würden). Hierbei werden allerdings in “corporate” Projekten evtl. für die Schriftart vorhandene Lizenzbedingungen nicht eingehalten (die Fonts wären ggfls. downloadbar), was bei TypeKit durch deren integriertes Digital Rights Management gegebenenfalls möglich wäre.

Ein Beispiel für eine solche Integration von Schriftarten wären die folgenden CSS Anweisungen (gefunden bei Tobias Otte):

Zuerst müssen wir die Font Familie mithilfe von @font-face deklarieren:

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-Roman.otf') format("opentype");
}

Danach kann sie wie gewohnt als CSS Attributwert für die font-family genutzt werden:

font-family: Delicious, Arial, sans-serif;


Für Corporate Projekte ist die Integration der Schrift mittels “font-face” in meinen Augen aber häufig auch nicht einsetzbar, da viele der Unternehmen noch ältere Browser unterstützen müssen / wollen – dazu kommt die Problematik mit Lizenzbedingungen der Hausschrift, die eine Nutzung in dieser Art und Weise oftmals nicht erlauben.

Eine Übersicht über aktuelle Techniken findet sich unter anderem bei Dr. Web oder dem Smashing Magazine.

Einen fast aktuellen Status zur Unterstützung einzelner Möglichkeiten durch verschiedene Browser findet sich bei Tobias Otte.