Advertisement
  1. Web Design
  2. Typography

Das Web Designer-Handbuch zu Methoden zum Ersetzen von Schriftarten

by
Read Time:18 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Haben Sie genug von Arial? Sind Sie müde von Times New Roman? Die Methoden zum Ersetzen von Schriftarten haben sich in den letzten 2 Jahren dramatisch verbessert, aber es kann oft schwierig sein, die verschiedenen Methoden zu sortieren, wenn Sie nicht ständig darüber lesen. In diesem Artikel werden verschiedene Techniken zum Ersetzen von Schriftarten beschrieben, die derzeit verfügbar sind.

Neu veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im November 2010 veröffentlicht.

Wir werden uns die Vor- und Nachteile der einzelnen Schriftarten, die Ausgabe von Schriftlizenzen und die besten Schriftartenressourcen im Web ansehen, damit Sie sie in Ihren eigenen Webdesigns verwenden können.


Einführung: Methoden zum Ersetzen von Schriftarten

"Seit Beginn des Web sind Designer auf eine begrenzte Anzahl von Schriftarten beschränkt."

Die Möglichkeiten des Designs im Web scheinen von Tag zu Tag zuzunehmen. Die Anwendung von Technologien wie HTML5, CSS3 und Javascript hat zu vielen aufregenden und innovativen Website-Designs geführt. Das Web scheint seit den Tagen des Nur-Text-Browsers einen langen Weg zurückgelegt zu haben. Trotzdem gibt es einen Aspekt des Webdesigns, der relativ stagniert.

Typografie und Schriftauswahl sind integrale Bestandteile jedes Designer-Arsenals, um das Erscheinungsbild einer Website zu verbessern. Leider waren Designer seit Beginn des Web auf eine begrenzte Anzahl von Schriftarten beschränkt. Helvetica, Arial und Georgia sind drei der wenigen ansprechenden Schriftarten (nicht zu vergessen Comic Sans), auf die sich Designer verlassen können, um für die Mehrheit der Webbenutzer korrekt angezeigt zu werden.

Die traditionelle Methode für Designer, solche Einschränkungen zu umgehen und Kreativität mit Schriftarten auszudrücken, besteht darin, Text in Bilder zu integrieren. Diese Methode weist jedoch zahlreiche Nachteile auf. Es treten verschiedene Probleme mit der Barrierefreiheit auf, und die Leistung der Website wird auch durch längere Ladezeiten beeinträchtigt.

In diesem Artikel werden verschiedene aufregende Methoden zum Einfügen nicht standardmäßiger Schriftarten in Ihre Webseiten ohne Verwendung von Bildern beschrieben. Wir werden die Vor- und Nachteile jeder Methode, die Probleme bei der Verwendung von Schriftarten und die Bedeutung dieser Technologie für Webdesigner untersuchen.


Cufón

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Cufón ist eine unglaublich einfache und effektive Methode zum Einfügen nicht standardmäßiger Schriftarten in eine Webseite, bei der die Funktionalität nicht von serverseitigen Sprachen oder Plug-Ins abhängt. Cufón arbeitet ausschließlich mit wenigen Zeilen Javascript-Code und verwendet eine Kombination aus VML (Vector Mark-up Language) für Internet Explorer und der Canvas-Funktion von HTML5, um die Schriftarten zu rendern.

Cufón bietet auf seiner Homepage ein Werkzeug zum Konvertieren von Schriftarten, mit dem Sie die ausgewählte Schriftart in SVG konvertieren und eine Javascript-Datei erstellen können, auf die Sie in Ihrem HTML-Code verweisen können. Jeffrey Way, Herausgeber von Nettuts+, hat zuvor eine hervorragende Schritt-für-Schritt-Anleitung zur Integration von Cufón in Ihre Webseite verfasst.

Cufón ist aufgrund seiner vielen Vorteile und relativ wenigen Nachteile eine beliebte Wahl für viele Webdesigner. Da es nicht auf andere Skriptsprachen oder Plug-Ins angewiesen ist, ist es für ein sehr breites Publikum zugänglich und wird auch von aktuellen Versionen aller gängigen Browser, einschließlich IE 9, unterstützt. Sie können das CSS-Styling auch direkt auf durch Cufón ersetzten Text anwenden, einschließlich neuerer CSS 3-Funktionen wie Farbverläufe. In Bezug auf die Geschwindigkeit ist es viel schneller als sIFR und weniger intensiv, sollte aber dennoch nicht für große Textkörper verwendet werden.

Cufón hat jedoch einige Nachteile. Es funktioniert immer noch mit Javascript, was einige Webbenutzer möglicherweise ausgeschaltet haben. Enttäuschenderweise kann der von Cufón ersetzte Text auch nicht ausgewählt und daher kopiert und eingefügt werden.

Vorteile:

  • Großartige Unterstützung für verschiedene Browser
  • Möglichkeit, den spezifischen Zeichensatz (ABC, 123 usw.) auszuwählen, der in Ihre Schriftart aufgenommen werden soll, um die Dateigröße zu verwalten.
  • Das CSS-Schriftstil wird in allen Browsern beibehalten (Farbe, Größe, Textschatten...).

Nachteile:

  • Text ist nicht auswählbar
  • Leistung: Am besten passt für Überschriften, Titel und Untertitel.
  • Spezielles Styling (Textdekoration, Schwebeflug usw.) kann ein wenig zusätzliche Arbeit erfordern.

@font-face

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

"@font-face ist im Wesentlichen die ultimative Lösung für Schriftarten im Web."

@font-face hat wahrscheinlich die größte Aufmerksamkeit von allen Methoden zum Ersetzen von Schriftarten erhalten, aber es gibt einen sehr guten Grund dafür. @font-face ist im Wesentlichen die ultimative Lösung für Schriftarten im Web, bei der alle anderen darauf hofften, sie zu replizieren, bevor sie vollständig realisiert wurden. @font-face war tatsächlich in der CSS2-Spezifikation enthalten, hat aber bisher eine breite Akzeptanz gefunden.

@font-face verwendet keine andere Webtechnologie als CSS, um benutzerdefinierte Schriftarten auf einer Webseite zu implementieren. Dies bedeutet, dass keine Abhängigkeit mehr von Flash, PHP oder sogar Javascript besteht. Der tatsächliche Typ wird gerendert, wenn @font-face anstelle von Vektorobjekten oder Bildern verwendet wird. Daher kann der Text mithilfe von CSS ausgewählt, skaliert und gestaltet werden.

Leider haben, wie bei vielen anderen Problemen im Zusammenhang mit dem Web, in erster Linie die Browser (zusammen mit Lizenzproblemen, die wir weiter unten erläutern werden) den Fortschritt von @font-face behindert. Jeder der dominierenden Browser unterstützt unterschiedliche Schriftformate. Internet Explorer verwendet .EOT (Embedded Open Type), während neuere Versionen von Firefox, Chrome, Safari und Opera .ttf (True Type Format) unterstützen. Das Open Type Format wird auch von einer Mischung aus Browsern unterstützt und SVG (Scalable Vector Graphics) wird für iPhone und iPad benötigt. Es kann alles ziemlich verwirrend sein und manchmal kann es viele Leute davon abhalten, es zu benutzen. Zum Glück ist jedoch Licht am Horizont. Das Web Open Font Format (.WOFF) wird zum Standardformat für Web-Schriftarten und wird derzeit vom W3C standardisiert. Firefox unterstützt das Format seit Version 3.6, Chrome seit 5.0 und es wurde kürzlich bekannt gegeben, dass Internet Explorer 9 das Format ebenfalls unterstützt. Hoffen wir, dass Opera und Safari bald der Party beitreten.

Das einzige andere kleine Problem mit @ font-face ist, dass einzelne Browser und Betriebssysteme es etwas anders rendern, da es als tatsächlicher Typ dargestellt wird. Einige Web-Font-Dienste, auf die wir weiter eingehen werden, zielen darauf ab, diese geringfügigen Abweichungen mithilfe von Font-Hinweisen zu korrigieren, die den Umriss der Schrift in Browsern glätten und eine ästhetisch ansprechendere Schrift erzeugen.

Wenn Sie weitere Informationen zur Implementierung von @ font-face auf Ihrer Website wünschen, hat Jeffrey Way erneut ein nützliches Tutorial dazu bereitgestellt.

Vorteile:

  • Die Zugänglichkeit bleibt erhalten - was bedeutet, dass sie sich gut verschlechtert.
  • Unicode-Unterstützung
  • CSS-Unterstützung (Font Styling)

Nachteile:

  • Einige Schriftarten können schwer herunterzuladen sein.
  • Kein gemeinsames Schriftdateiformat in allen Browsern.
  • Die Verbreitung ist (unseres Wissens nach) nicht gestattet. Dies bedeutet, dass Sie diese nicht in Vorlagen oder Designs verwenden können, ohne Ihre eigene Vertriebslizenz zu sichern.

Die nächste Handvoll Lösungen basiert auf @ font-face, um die Waren zu liefern - jede davon ist mehr oder weniger ein "Service" - was bedeutet: Alle verwenden dieselbe Basistechnologie, bieten jedoch unterschiedliche Schriftbibliotheken, Lizenzoptionen und Zahlungspläne; Ja, für die meisten von ihnen müssen Sie bezahlen, um sie zu verwenden, aber es besteht die Möglichkeit, dass dies für alle Schriftarten im Web der Weg der Zukunft ist.


Font Squirrel @ font-face Kits

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Font Squirrel ist derzeit möglicherweise die beliebteste Ressource zum Ersetzen von Schriftarten. Mit Font Squirrel können Sie sich keine Sorgen über Schriftlizenzen machen, da alle bereitgestellten Schriftarten für kommerzielle Zwecke frei verfügbar sind. Die Website bietet Hunderte von Schriftarten zur Auswahl, von serifenlosen bis zu neuartigen Schriftarten.

Wie oben erläutert, benötigen Sie verschiedene Schriftformate, um sicherzustellen, dass @ font-face in allen Browsern funktioniert. Für diese Schriftart hat Squirrel eine Lösung. Die Website bietet @ font-face-Kits, die Ihnen alle benötigten Formate bieten und auch das benötigte HTML und CSS enthalten. Wenn Sie das @ font-face-Kit für die gewünschte Schriftart nicht finden, wird ein Generator bereitgestellt, der Ihre Schriftartdatei in die verschiedenen Formate konvertiert, die Sie kostenlos benötigen. Wenn Sie den Generator verwenden, müssen Sie sicherstellen, dass Sie über die richtige Lizenz verfügen, mit der Sie die Schriftart auf Ihrer Website verwenden können.

Vorteile:

  • Verwendet @font-face, erleichtert aber die Implementierung erheblich.
  • Sie behandeln alle Lizenzprobleme.
  • Hunderte von Schriftarten zur Auswahl.
  • Enthält mehrere Formate (TrueType, EOT, WOFF, SVG, Cufon usw.)
  • Sie können sogar Ihr eigenes Kit erstellen, wenn es keines hat.

Nachteile:

  • Wie @font-face... aber zum größten Teil ist dies eine großartige Lösung.

Google Fonts API

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Die Schriftarten-API von Google wird in Verbindung mit einem eigenen Schriftartenverzeichnis verwendet, in dem alle Schriftarten Open Source sind und allen zur Verfügung stehen. Das Verzeichnis wächst und wächst ständig und enthält derzeit über 200 Beispiele.

Es könnte wirklich nicht einfacher sein, Schriftarten aus dem Verzeichnis in Ihre Website zu integrieren. Sie müssen lediglich die Schriftart auswählen, die Sie verwenden möchten, die Varianten der gewünschten Schriftart auswählen und Google stellt Ihnen die eine Zeile Javascript-Code zur Verfügung, die Sie benötigen. Passen Sie Ihr CSS an, um die verwendete Schriftart aufzulisten, und Sie können loslegen. So einfach ist das wirklich!

Vorteile:

  • Open Source-Lizenzierung bedeutet, dass sie kostenlos verwendet werden können!
  • Schriftarten werden von Google bereitgestellt. Möglicherweise befindet sich Ihre Schriftart bereits im Browser-Cache.

Nachteile:

  • ähm ..

Typekit

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Typekit war einer der ersten Abonnement Web-Font-Dienste und ist nach wie vor äußerst beliebt. Typekit und andere ähnliche Dienste lösen das Problem der Schriftlizenzierung, indem sie Benutzern gegen eine jährliche Abonnementgebühr Zugriff auf eine Vielzahl von benutzerdefinierten Schriftarten gewähren. Diese Methode ermöglicht es den Schriftgießereien, als Gegenleistung für ihre harte Arbeit etwas zu erhalten, und schützt auch vor Produktpiraterie, da alle Schriftarten zentral auf den geschützten Servern von Typekit gehostet werden. Benutzer des Dienstes hosten die Schriftarten nicht in ihrem eigenen Webspace, sondern verlinken einfach auf sie.

Typekit hat sich mit einigen der weltweit größten Schriftgießereien zusammengetan, um Ihnen eine breite und unterschiedliche Auswahl an Schriftarten anzubieten. Typekit bietet Ihnen viele Optionen und Kontrolle über die von Ihnen verwendeten Schriftarten. Wählen Sie verschiedene Schriftvarianten, Gewichte und Glyphen aus. Sie können auch CSS-Stapel erstellen und Fallback-Schriftarten auswählen, die verwendet werden sollen, wenn @ font-face nicht unterstützt wird. Sie müssen auch die spezifischen HTML-Tags oder CSS-Klassen auswählen, auf die die benutzerdefinierte Schriftart angewendet werden soll. Sobald Sie mit der von Ihnen getroffenen Auswahl zufrieden sind, wird ein Stück Javascript-Code generiert, den Sie auf Ihrer Website verwenden können.

Ein weiterer Vorteil von Typekit besteht darin, dass die Abweichungen im Umgang verschiedener Browser mit Text und Schriftarten mithilfe von Hinweisen kontrolliert werden sollen.

Typekit bietet verschiedene Preispakete an, um unterschiedlichen Anforderungen gerecht zu werden. Es steht ein kostenloses Paket zur Verfügung, mit dem Sie zwei Schriftarten aus der Testbibliothek auf einer Website verwenden können. Die Website kann bis zu 25.000 Seitenaufrufe pro Monat ausführen. Außerdem müssen Sie auf der Website das Typekit-Abzeichen anzeigen, das auf Informationen zu den von Ihnen verwendeten Schriftarten verweist. Am anderen Ende der Skala befindet sich das Leistungspaket, mit dem Sie auf die gesamte Palette der verfügbaren Schriftarten zugreifen können, die auf einer unbegrenzten Anzahl von Websites verwendet werden können, ohne die Anzahl der Seitenaufrufe zu begrenzen. Die Performance bietet all diese Funktionen für eine jährliche Abonnementgebühr von 99,99 Pfunde.

Vorteile:

  • Große Auswahl an Schriftarten.
  • Schriftarten werden auf Typekit-Servern bereitgestellt.

Nachteile:

  • Jahresgebühr.
  • Anti-Aliasing ist noch nicht perfekt... einige Schriftarten können in einigen Browsern/Betriebssystemen "jagged" und nicht aliasiert erscheinen.

Fonts.com Web Fonts

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Die beliebte Schriftartressource fonts.com hat außerdem einen speziellen Web-Schriftarten-Service gestartet, der über 8000 Schriftarten bietet, die Sie auf Ihren Websites verwenden können. Ähnlich wie bei Typekit handelt es sich um einen abonnementbasierten Dienst, der jedoch monatlich angeboten wird. Im Vergleich zu Typekit ist es zwar teurer, aber die Schriftarten unterliegen weitaus weniger Einschränkungen. Das kostenlose Paket ist sehr günstig und bietet uneingeschränkten Zugriff auf 8000 Schriftarten, die Sie auf so vielen Websites verwenden können, wie Sie möchten. Mit dem Professional-Paket können Sie außerdem bis zu 50 Schriftarten herunterladen und auf Ihrem Computer installieren, um sie in Ihren Designs zu verwenden.

Fonts.com Web Fonts bietet einige wirklich großartige Schriften als Teil seiner Sammlung - wie Helvetica, Univers und Franklin Gothic.

Vorteile:

  • Große Auswahl an Schriftarten und Stilen.
  • Exklusive Heimat von Helvetica®, Frutiger®, Univers® und anderen berühmten Schriften.
  • Sprachunterstützung.

Nachteile:

  • Jährliche Gebühr, wenn Sie mehr als das wünschen, was der kostenlose Service bietet.
  • Beschränkt auf ihre Bibliothek (die eigentlich ziemlich groß ist).

Fontdeck

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Das renommierte Webdesign-Unternehmen Clear Left, das für einige der weltweit größten Unternehmen gearbeitet hat, hat sich mit OmniTI zusammengetan und Font Deck veröffentlicht. Font Deck ist ein weiterer abonnementbasierter Dienst, außer dass Sie nur eine jährliche Gebühr für jede einzelne von Ihnen verwendete Schriftart zahlen. Dies ist ideal für diejenigen, die nur eine oder zwei Schriftarten für ihr persönliches Blog verwenden möchten.

Die Preise für Schriftarten beginnen bei 2,50 USD pro Jahr und Domain und sind unbegrenzt für Seitenaufrufe zulässig. Die gesamte Schriftartenauswahl kann auch für einen beliebigen Zeitraum kostenlos getestet werden, obwohl nur zwanzig eindeutige IP-Adressen sie anzeigen können. Dieses kostenlose Paket soll die Tatsache kompensieren, dass Sie keine Schriftarten auf Ihren lokalen Computer herunterladen und während der Entwurfsphase verwenden können. Da Font Deck in der Szene nur relativ neu ist, ist die Auswahl an Schriftarten derzeit nicht sehr groß.

Vorteile:

  • Zahlen Sie nur für das, was Sie brauchen.
  • Vorschau von Schriftarten auf Ihrer Website kostenlos.
  • Sprachunterstützung.

Nachteile:

  • Es kostet immer noch Geld.
  • Beschränkt auf ihre Bibliothek (die eigentlich ziemlich groß ist).

Schrift Frühling

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

Font Spring verfolgt einen etwas anderen Ansatz als die abonnementbasierten Dienste und kehrt zur herkömmlichen Art des Kaufs von Schriftarten zurück. Schriftarten werden einzeln gekauft und müssen heruntergeladen und auf Ihrem eigenen Webserver gehostet werden. Font Spring schlägt vor, dass 99,9% der verfügbaren Schriftarten mit @font-face verwendet werden können.

Jede einzelne Schriftart kann im Preis variieren und Sie müssen eine zusätzliche Gebühr für die Lizenz zahlen, um die Schriftart mit @font-face zu verwenden. Die @font-face-Lizenz enthält die OpenType-Desktopversion der Schriftart und die verschiedenen Formate, die Sie für die Verwendung im Web benötigen.

Diese Methode bietet viele Vorteile. Wenn Sie wirklich nur eine bestimmte Schriftart bevorzugen, ist dies möglicherweise die billigere Alternative zu Abonnementdiensten. Sie können die Schriftart in beliebig vielen Domains verwenden, sofern Sie die direkte Kontrolle über diese Domains haben und die Anzahl der Seitenaufrufe unbegrenzt ist.

Als zusätzliche Warnung ist es Ihnen untersagt, die Schriftart mit anderen Technologien wie sIFR oder Cufón zu konvertieren oder einzubetten.

Vorteile:

  • Wie Font Squirrel verwaltet es die Lizenzierung für Sie.
  • Eine weitere großartige Bibliothek verschiedener Gießereien.

Nachteile:

  • Der Pay-per-Font-Ansatz kann teuer werden.
  • Sie müssen Ihre eigenen Schriftarten hosten.

Andere Lösungen zum Ersetzen von Schriftarten

Dies sind nur einige der verfügbaren Schriftarten, es gibt viele weitere wie Typotheque und Webtype. Jeder hat seine eigenen Vor- und Nachteile, und Ihre Wahl sollte auf Ihren persönlichen Bedürfnissen beruhen. Einige mögen die Benutzerfreundlichkeit eines Abonnementdienstes genießen, während andere den Gedanken nicht mögen, die Kontrolle über ihre Website an Dritte abzugeben. In letzterem Fall ist es möglicherweise besser, Ihre eigenen Web-Schriftarten mithilfe von Websites wie Font Squirrel herunterzuladen und zu hosten.

Die nächsten beiden (sIFR und FLIR) werden im Allgemeinen als "alte Schule" bezeichnet, weil sie einen angemessenen Anteil an Problemen haben, aber es lohnt sich, darüber zu diskutieren und darüber Bescheid zu wissen.


sIFR

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

sIFR gibt es schon seit einiger Zeit. Als es herauskam, bot es eine effektive Methode zum Einfügen von nicht standardmäßigen Schriftarten, wenn es wirklich keine andere Option als Bilder gab. sIFR oder Scalable Inman Flash Replacement verwendet eine Kombination aus Flash und Javascript, um Text auf Webseiten in ein Flash-Element umzuwandeln. sIFR bietet viele Vorteile: Der Text bleibt für Bildschirmleser zugänglich und kann weiterhin ausgewählt werden.

Der Begriff „skalierbar“ im Namen kann jedoch zu Verwirrung führen. sIFR ist in dem Sinne skalierbar, dass das Flash-Element auf die Größe des ursprünglichen Browsertextes skaliert wird. Auf diese Weise kann der gesamte Text in der größtmöglichen Größe innerhalb einer bestimmten Dimension angezeigt werden. Text, der durch ein Flash-Element ersetzt wurde, kann jedoch nicht angepasst werden, wenn ein Benutzer die Größe von Text auf einer Seite ändert. was offensichtlich ein Problem mit der Zugänglichkeit verursacht. Für sIFR müssen außerdem sowohl Flash als auch Javascript auf dem Computer eines Benutzers aktiviert sein, damit es funktioniert.

Mike Davidson, einer der Entwickler von sIFR, erkennt auch die Grenzen der Technologie. Mike hat offen erklärt, dass sIFR nicht für große Textmengen verwendet werden sollte, da es sich spürbar auf die Leistung der Website auswirkt. Mike erkennt auch, dass seine Technologie nicht die endgültige Lösung für Typografie im Web ist und bezeichnet sie einfach als „Notlösung“.

Vorteile:

  • Keine großen Profis... außer es war die erste Methode zum Ersetzen von Schriftarten in der Szene.

Nachteile:

  • Verlässt sich auf Flash
  • Langsame Leistung
  • Flash- und Ad-Blocker-Programme blockieren es
  • Schwer perfekt zu stylen - verhält sich nicht immer wie erwartet.

FLIR

Font Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIRFont Replacement Methods for Web Designers Cufon font-face SIFR FLIR

FLIR oder Facelift Image Replacement ähnelt sIFR, verwendet jedoch Javascript und PHP, um Bilder anstelle von Flash zu generieren, um Text zu ersetzen. Diese Methode hat den offensichtlichen Vorteil, dass Sie keine Zeit damit verbringen müssen, einzelne Bilder für jedes Textstück zu erstellen, für das Sie eine benutzerdefinierte Schriftart verwenden möchten. Wenn Sie sich für eine andere Schriftart oder Farbe für Ihren Text entscheiden, ist es auch viel einfacher, den Text auf Ihrer Website zu aktualisieren.

Abgesehen von der Benutzerfreundlichkeit und dem zeitsparenden Aspekt von FLIR bietet es leider keine große Verbesserung gegenüber der herkömmlichen Methode zum Speichern von Text als Bilder. Das Endergebnis bleibt weiterhin als Text wiedergegeben, der als Bild gerendert wird, in dem der Text nicht auswählbar oder skalierbar ist.

Vorteile:

  • Funktioniert mit allen gängigen Browsern

Nachteile:

  • Bandbreite schwer
  • Text ist nicht auswählbar
  • Benötigt PHP und GD auf dem Server... was nicht immer selbstverständlich ist

Schriftlizenzen und Legalitäten

Das Problem mit Schriftlizenzen ist ein fortlaufendes Problem, das zum langsamen Fortschritt und zur Einführung von Methoden zum Ersetzen von Schriftarten beigetragen hat. Genau wie bei Bildern benötigen Sie die Erlaubnis des Autors in Form einer EULA (Endbenutzer-Lizenzvereinbarung), um eine Schriftart auf Ihrer Website zu verwenden. Einige Lizenzen erlauben die kostenlose Verwendung der Schriftart, auch für kommerzielle Zwecke, während andere möglicherweise nur den persönlichen Gebrauch auf einem lokalen Computer erlauben.

Wenn Sie eine der oben beschriebenen Methoden zum Ersetzen von Schriftarten verwenden, binden Sie eine Schriftart effektiv in Ihre Website ein oder verknüpfen sie mit einer, die auf Ihren Webserver hochgeladen wurde. Dies wird von vielen, sogar kostenlosen Schriftlizenzen nicht zugelassen. Der Grund, warum viele Schriftsteller und Gießereien dies nicht zulassen, liegt darin, dass Benutzer der Website direkten Zugriff auf die Schriftdatei erhalten und befürchten, dass ihre Schrift illegal heruntergeladen und verbreitet werden könnte. Dieses Problem hat viele Schriftartenersteller daran gehindert, ihre Schriftarten für die Verwendung mit Methoden wie @ font-face zur Verfügung zu stellen.

Es ist daher von entscheidender Bedeutung, dass Sie bei Verwendung einer der oben beschriebenen Methoden unbedingt sicherstellen, dass die Schriftlizenz dies zulässt.

Glücklicherweise hat dieses Problem die Entwicklung von Methoden zum Ersetzen von Schriftarten nicht vollständig behindert, und es stehen zahlreiche Ressourcen zur Verfügung, mit denen Sie benutzerdefinierte Schriftarten auf Ihrer Website verwenden können.


Letzte Gedanken darüber, was dies für Designer bedeutet

"Es lohnt sich nicht, auf Perfektion zu warten. Wenn Sie dies tun, riskieren Sie, aufregende neue Möglichkeiten zu verpassen."

Wir haben oben viel diskutiert, und es ist klar, dass es viele Optionen für diejenigen gibt, die benutzerdefinierte Schriftarten in ihren Site-Designs verwenden möchten. Die gute Nachricht ist, dass all diese Methoden ab sofort verfügbar sind. Es ist wahr; Keine der Methoden ist perfekt, jede hat ihre eigenen guten und schlechten Punkte. @font-face ist offensichtlich das vielversprechendste, aber es wird wahrscheinlich noch einige Jahre dauern, bis es absolut kugelsicher ist. Die Wahrheit ist, dass die Situation in der Welt des Webdesigns selten perfekt ist, dass jedoch immer Kompromisse und Umgehungen erforderlich sind, um neue Technologien zu implementieren. Es lohnt sich nicht, auf Perfektion zu warten. Wenn Sie dies tun, riskieren Sie, aufregende neue Möglichkeiten zu verpassen.

Dies ist wirklich eine aufregende Zeit für Webdesign, und es scheint eine wachsende Wertschätzung und ein wachsendes Verständnis für Typografie im Web zu geben. Methoden zum Ersetzen von Schriftarten bieten eine großartige Gelegenheit, innovative neue Designs zu erstellen, und ich glaube, der Schlüssel liegt darin, diese Technologie nicht zu missbrauchen. Stellen Sie immer Fallbacks bereit, wenn etwas schief geht, und wenden Sie jede Methode sinnvoll an (ändern Sie nicht den gesamten Text auf Ihrer Website in diesen). Nehmen Sie sich Zeit, um großartige Schriftarten zu schätzen und kennenzulernen, und das Web wird ein besserer Ort dafür sein.

Haben Sie Ihre eigenen Gedanken dazu? Haben Sie eine Frage? Wenn wir eine Ihrer Lieblingsmethoden verpasst haben, posten Sie sie unten im Kommentarbereich und wir werden sie sicher in diesen Beitrag aufnehmen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.