Haftungsausschluss:
Mir ist klar, dass es für diese Frage keine perfekte "Formel" gibt. Ich suche Ihre experimentellen Arbeitspraktiken. Wenn Sie keine haben, werde ich es Ihnen nicht vorenthalten.

In den letzten Jahren haben sich Webfonts endlich zum Mainstream entwickelt! Die Browserunterstützung ist gut genug und der Markt hat sich dahingehend erweitert, dass Designer über eine hervorragende Auswahl an Möglichkeiten verfügen.

Für meine leistungsorientierten Kunden hat die Verwendung von Webfonts einige nette Vorteile, die über Visual / Branding hinausgehen: Durch das Herausschreiben von Bildern können Bilder besser komprimiert und Inhalte und Stile viel schneller aktualisiert werden.

Die Frage ist heute:
Ab wann machen Sie die Pause vom Live-HTML-Text zur Grafik? Insbesondere im Kontext einer Site mit hohen Leistungsanforderungen (viel Verkehr, Logik und Laden von Assets von Drittanbietern). Ich gehe jetzt in einigen Projekten die Linie und habe in einigen Fällen Schwierigkeiten, mich zu entscheiden. Ich frage mich, welche Formel andere erfunden haben. Wenn überhaupt.

Wir müssen mehrere Faktoren abwägen (ich weiß, dass es noch mehr gibt):

• Typografische Integrität
• Asset-Anforderungen an den Server
• SEO und Zugänglichkeit
• Responsive Design (falls zutreffend)

Erschwerend kommt hinzu , dass das Rendern je nach Browser und Betriebssystem immer noch sehr unterschiedlich ist . Vergleichen Sie beispielsweise IE 8 mit 9 oder, noch dramatischer, OS X mit Windows. Offensichtlich kann Ihr Markt die Besorgnis über einige dieser Probleme zunichte machen (ich unterstütze bei einigen Projekten leider immer noch weitgehend IE7). Während die Unterstützung von Webfont OpenType-Funktionen in Firefox ziemlich gut ist, bleibt sie in praktisch allen anderen immer noch zurück.

Meine Lösung: SVG-Sprite-Blätter mit PNG-Fallback

Persönlich denke ich, dass Icon-Schriften eine schlechte Stop-Gap-Technologie sind, die es in 5 Jahren nicht mehr geben wird. SVG-Bilder sind ein weitaus besserer Weg, wenn Sie Vektoren benötigen. SVG bietet die meisten Vorteile von Symbolschriftarten sowie:

• SVGs können Farben, Verläufe und andere Effekte enthalten.
• Funktioniert mit imgTags.
• Arbeitet als CSS background-images.
• SVGs sind pixelgenau.
• Wie Symbolschriftarten kann SVG auf jede Größe skaliert werden, sodass Sie Retina-Unterstützung kostenlos erhalten.
• SVGs sind normalerweise kleinere Dateien als Symbolschriftarten.
• Wenn Sie alles in einer Datei haben möchten, können Sie SVG-Sprite-Blätter verwenden.
• SVGs sind einfacher zu erstellen und können in Illustrator bearbeitet werden.
• Das Rendern ist in allen Browsern weitaus konsistenter (sicherlich für einfache Dinge sowieso).

Die große Einschränkung bei der Verwendung von SVGs? Keine Unterstützung für Internet Explorer vor Version 9. Dies kann für Sie ein Deal Breaker sein oder auch nicht. WebKit (Safari und Chrome) und Firefox bieten hervorragende SVG-Unterstützung. Bei älteren Versionen von Internet Explorer können Sie Ihr SVG-Sprite-Blatt gegen ein PNG austauschen (super einfach, normalerweise nur wenige Zeilen CSS).

Das sollte alles abdecken und Ihnen nur wenige HTTP-Anforderungen, eine kleine Dateigröße, die Möglichkeit zur Verwendung von Farben, Verläufen und anderen Designeffekten bieten. Oh, und das bedeutet, dass Sie nicht auf schreckliche HTML-Hacker zurückgreifen müssen. Die Dinge können schön und semantisch sein.

Es gibt nicht viele Situationen, in denen ich Symbolschriftarten empfehlen würde. Ich denke, sie sind eine schreckliche Idee. Eine wirklich hackige Lücke, die in naher Zukunft tot und begraben sein wird.

Sie erwähnen es selbst: "Das grundlegende Problem hierbei ist die Aufrechterhaltung eines Gleichgewichts zwischen dem Visuellen und dem Technischen." Hier ist meine Meinung, und ich bin sicher, dass nicht jeder zustimmen wird, aber das habe ich in den letzten Jahren bei der Arbeit im Web beobachtet.

Web-Schriftarten im Vergleich zu sicheren Schriftarten: Technisch gesehen benötigen Sie keine Web-Schriftarten . Sie können sichere verwenden, bei denen der Benutzer keine zusätzlichen Dateien (Anforderungen) herunterladen muss. Sie können Wunder vollbringen, indem Sie Größe, Gewicht, Buchstabenabstand und Zeilenhöhe kombinieren und Ihre Nachricht wahrscheinlich erfolgreich mit ihnen kommunizieren. Die Verwendung einer anderen Schriftart wäre in diesem Fall wahrscheinlich nur eine ästhetische Wahl.

HTML-Text gegen Grafiken: Ich glaube nicht, dass es dafür eine Formel gibt. Als Web-Schriftarten extrem populär wurden, sprangen alle in den Schriftzug, unabhängig davon, wie schrecklich einige Schriftarten auf bestimmten Betriebssystemen / Browsern aussahen. Erinnert mich ein wenig daran, wie Menschen den Tischen den Rücken gekehrt haben und plötzlich jeder, der sie benutzt, blasphemisch war. Tabellen sind immer noch die beste Option für tabellarische Daten. Pixel-perfekte Grafiken sind meiner Meinung nach immer noch die beste Wahl für ästhetische Designs.

Dies wird sich jedoch wahrscheinlich in naher Zukunft ändern. Das mobile Rendern ist erstaunlich und einige neue Schriftarten sehen auf verschiedenen Geräten großartig aus.

Als ich das letzte Mal "benutzerdefiniert" werden wollte, habe ich die meisten serifenlosen Schriftarten in Font Squirrel in 3 verschiedenen Betriebssystemen und allen gängigen Browsern ausprobiert. Ich gab jedem eine 1 bis 5 Punktzahl, basierend darauf, wie gut sie gerendert haben. Die meisten von ihnen haben eine 3, einige eine 4. Für eine persönliche Website habe ich halb Grafik, halb Schrift verwendet. Wie DA01 erwähnt, "hängt alles von den Bedürfnissen des Kunden, den Bedürfnissen der Benutzer des Kunden und der speziellen Lösung ab, die entwickelt wird" (DA01 sic).

Es ist Jahre her, seit @ font-face 'gestartet' wurde, und so sehr ich gerne schöne Schriftarten in meinen Designs verwenden würde, sehe ich immer noch keinen Sinn darin, solche zu verwenden, die in verschiedenen Szenarien so unterschiedlich gerendert werden. Aber das ist nur meine bescheidene Meinung, und ich bleibe eher bei dem, was für mich funktioniert. Die SVG-Antwort klingt großartig und könnte meine Meinung ändern :)

Okay, ich werde abwägen, wo ich mich gerade befinde, da es keine festen Ansätze zu geben scheint.

Rendern

Für den Anfang werden die Tage des skizzenhaften Renderns von Webfonts bald vollständig hinter uns liegen, zumindest mit gut gemachten Schriftarten. Die Haupttäter (IE-Versionen vor 9) gehören schnell der Vergangenheit an. IE 8 ist immer noch ein Spieler, aber ich bin überzeugt, dass das Publikum sowieso nicht ästhetisch motiviert ist;)

Ausgefallene Effekte

System- / HTML-Text kann Änderungen an
Farbe,
Deckkraft,
Skalierung,
horizontaler und vertikaler Positionierung
sowie Textschatten problemlos verarbeiten .

Wenn meine Effekte kompliziert werden, halte ich es für einen offensichtlichen grafischen Moment. Abgesehen von einfachen Stilsteuerelementen (möchte jemand etwas zu meiner Liste hinzufügen?) Müssen Sie sich auf
Javascript-Bibliotheken,
OpenType-Funktionen mit fleckiger Unterstützung,
übermäßig große Webfont-Downloads auf Benutzerseite
und möglicherweise HTML5 / CSS3-Funktionen mit eingeschränkter Unterstützung verlassen.

Wenn ich meinen Typ
verzerren, den Kerning fein abstimmen,
Texturen anwenden, ihn
präzise über einem Bild positionieren und linienbrechen möchte
oder alles andere, was eine präzise Steuerung erfordert, greife ich auf eine Grafik zurück.
Wie ich schon sagte, es gibt Möglichkeiten, ich glaube einfach nicht, dass sie es an dieser Stelle wert sind.

Vor diesem Hintergrund muss ich mich in diesen Fällen auch fragen, ob ich die Effekte wirklich brauche. Könnte den Systemtyp gut einstellen, ohne dass all die ausgefallenen Dinge den Job machen. Könnte sein. Irgendwo gibt es immer eine unscharfe Linie.

Große Dinge

Wo ich zögere, Webfonts zu vertrauen, ist ein sehr großer Typ. Um eine Zahl wegzuwerfen, sagen wir 60px und höher. Warum ist das so? Ich bin mir nicht ganz sicher, aber ich kann mir ein paar Dinge vorstellen, die mich betreffen.

Zum einen erfordert ein großer Typ oft das zusätzliche Kerning , das durch einfaches Tracking nicht gelöst werden kann. Der Typ ist auf der Seite dominant und jeder kleine Fehler wird mir schmerzlich klar.

Zweitens erfordert ein so großer Typ eine sehr sorgfältige Anpassung an das Design. Ich denke, es ist weniger kritisch auf Inhaltswebsites, auf denen der Typ fließen kann, und es gibt einige dringend benötigte Leerzeichen, aber auf einer Commerce-Website oder in einer dichten Inhaltsumgebung kann ein falsch platzierter Zeilenumbruch oder ein erweiterter Charakter Chaos anrichten.

Ich denke, dies sind möglicherweise nur Unsicherheiten aus den Tagen, als Browser mit Typ einen wirklich schlechten Job gemacht haben. Leider gibt es immer noch genug dieser Probleme, die mich vorsichtig machen. Dinge wie Giantnerds Schaltfläche zum Hinzufügen zum Warenkorb bringen mich dazu, sie anzunehmen :)

Das endgültige Urteil

Na ja, vielleicht nicht endgültig. Final-ish.

Trotz meiner Unsicherheiten komme ich an der großen Sache vorbei. Und ich verwende an anderer Stelle weniger Effekte und saubereren Systemtext. Einer der großen Vorteile sind reaktionsschnellere Layouts: Der Systemtext lässt sich schnell und einfach ändern!

Ich optimiere schnell die Websites meiner Kunden und gehe zu einer geringeren Bildabhängigkeit über. Bringen Sie die Webfonts! Vielleicht wird es eine weitere Zeit der Wiederbelebung des internationalen Stils im Design sein;)

In voller Offenlegung

Ich würde es nicht mögen, großartige Übungen wie Lost Worlds 'Fairs nicht zu erwähnen . Es ist ein wunderbarer Beweis dafür, dass mit der Zeit und der richtigen Nutzerbasis fast alles möglich ist.