Meine Lösung: SVG-Sprite-Sheets mit PNG-Fallback

Ich persönlich halte Icon-Fonts für eine schwache Notlösung, die es in 5 Jahren nicht mehr geben wird. SVG-Bilder sind ein viel besserer Weg, wenn Sie Vektoren benötigen. SVG hat die meisten Vorteile von Icon-Fonts, plus:

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

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

Das sollte alles abdecken und Ihnen nur wenige HTTP-Anforderungen, eine kleine Dateigröße und die Möglichkeit geben, Farben, Farbverläufe und andere Designeffekte zu verwenden. Oh, und es bedeutet, dass Sie nicht auf schreckliche HTML-Hacker zurückgreifen müssen. Dinge können schön und semantisch sein.

Es gibt nicht viele Situationen, in denen ich Symbolschriften empfehlen würde. Ich denke, sie sind eine schreckliche Idee. Ein wirklich hackiger Stop-Gap, der irgendwann in naher Zukunft tot und begraben sein wird.

Sie sprechen es selbst an: „Grundsätzlich geht es hier darum, die Balance zwischen dem Visuellen und dem Technischen zu halten.“ Hier ist meine Meinung, und ich bin mir sicher, dass nicht jeder zustimmen wird, aber das habe ich in den letzten Jahren meiner Arbeit im Web beobachtet.

Webfonts vs. sichere Fonts: Technisch gesehen brauchen Sie keine Webfonts. Sie können sichere verwenden, bei denen der Benutzer keine zusätzlichen Dateien (Anfragen) herunterladen muss. Sie können Wunder vollbringen, indem Sie Größe, Gewicht, Buchstabenabstand und Zeilenhöhe kombinieren und Ihre Botschaft wahrscheinlich erfolgreich mit ihnen kommunizieren. Die Verwendung einer anderen Schriftart wäre in diesem Fall wahrscheinlich nur eine ästhetische Wahl.

HTML-Text vs. Grafik: Ich glaube nicht, dass es dafür eine Formel gibt. Als Webfonts extrem populär wurden, sprangen alle in den Font-Face-Zug, unabhängig davon, wie schrecklich einige Fonts auf bestimmten Betriebssystemen/Browsern aussahen. Erinnert mich ein bisschen daran, wie Leute den Tischen den Rücken zukehrten und plötzlich jeder, der sie benutzte, blasphemisch war. Tabellen sind immer noch die beste Option für tabellarische Daten. Pixelperfekte Grafiken sind meiner Meinung nach immer noch die beste Wahl für ästhetische Designs.

Dies wird sich aber wohl in naher Zukunft ändern. Das mobile Rendering 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 Sans-Serifs in der Schriftart Squirrel in 3 verschiedenen Betriebssystemen und allen gängigen Browsern ausprobiert. Ich habe jedem eine Bewertung von 1 bis 5 gegeben, je nachdem, wie gut sie gerendert wurden. Die meisten von ihnen haben eine 3 bekommen, ein paar haben eine 4 bekommen. Für eine persönliche Website habe ich mich für halb Grafiken, halb Schriftarten entschieden. 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).

Seit der Einführung von @font-face sind Jahre vergangen, und so sehr ich es lieben würde, schöne Schriftarten in meinen Designs zu verwenden, sehe ich immer noch keinen Sinn darin, Schriftarten zu verwenden, die in verschiedenen Szenarien so unterschiedlich gerendert werden. Aber das ist nur meine bescheidene Meinung, und ich neige dazu, bei dem zu bleiben, was für mich funktioniert. Die SVG-Antwort klingt großartig und könnte meine Meinung ändern :)

Okay, ich werde abwägen, wo ich stehe, da es anscheinend keine festen Ansätze gibt, die auftauchen.

Rendern

Für den Anfang werden die Tage des skizzenhaften Webfont-Renderings bald vollständig hinter uns liegen, zumindest bei gut gemachten Schriftarten. Die Hauptübeltäter (IE-Versionen vor 9) gehören schnell der Vergangenheit an. IE 8 ist immer noch ein Player, aber ich bin davon überzeugt, dass das Publikum sowieso kein ästhetisch motiviertes ist ;)

Ausgefallene Effekte

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

Wenn meine Effekte anfangen, kompliziert zu werden, betrachte ich das als einen offensichtlichen grafischen Moment. Abgesehen von einfachen Stilkontrollen (möchte jemand etwas zu meiner Liste hinzufügen?) müssen Sie sich auf
Javascript-Bibliotheken,
OpenType-Funktionen mit lückenhafter Unterstützung,
übermäßig große Webfont-Downloads auf Seiten des Benutzers
und möglicherweise HTML5/CSS3-Funktionen mit eingeschränkter Unterstützung verlassen.

Wenn ich meinen Text verzerren,
das Kerning feinabstimmen,
Texturen anwenden,
es präzise über einem Bild positionieren und umbrechen möchte
oder irgendetwas anderes, das eine präzise Steuerung erfordert, greife ich auf eine Grafik zurück.
Wie ich schon sagte, es gibt Möglichkeiten, ich glaube nur nicht, dass sie es an diesem Punkt wert sind.

Allerdings muss ich mich in solchen Fällen auch fragen, ob ich die Effekte wirklich brauche. Könnte den Systemtyp schön einstellen, ohne dass all das ausgefallene Zeug die Arbeit erledigt. Vielleicht. Irgendwo ist immer eine unscharfe Linie.

Große Dinge

Wo ich zögere, Webfonts zu vertrauen, ist sehr große Schrift. Nur um eine Zahl herauszuwerfen, sagen wir 60px und höher. Warum ist das so? Ich bin mir nicht ganz sicher, aber mir fallen ein paar Dinge ein, die mich beunruhigen.

Zum einen erfordern große Schriften oft das zusätzliche bisschen Kerning , das durch einfaches Tracking nicht gelöst werden kann. Die Schrift dominiert auf der Seite und jeder noch so kleine Fehler wird mir schmerzlich bewusst.

Zweitens erfordert eine so große Schrift in der Regel eine sehr sorgfältige Anpassung an das Design. Ich denke, es ist weniger kritisch auf Content-Sites, wo der Text fließen kann und es einige dringend benötigte Leerzeichen gibt, aber auf einer Commerce-Site oder in einer Umgebung mit dichtem Inhalt kann ein falsch platzierter Zeilenumbruch oder ein verlängertes Zeichen Chaos anrichten.

Ich denke, dies sind möglicherweise nur Unsicherheiten, die aus den Tagen übrig geblieben sind, als Browser mit Typ einen wirklich schlechten Job gemacht haben. Leider bestehen immer noch genug dieser Probleme, sodass ich vorsichtig bin. Dinge wie Giantnerds „In den Warenkorb“-Button bringen mich dazu, ihn zu umarmen :)

Das endgültige Urteil

Nun, vielleicht nicht endgültig. Letztendlich.

Trotz meiner Unsicherheiten komme ich über das große Typending hinaus. Und ich ertappe mich dabei, woanders weniger Effekte und saubereren Systemtext zu verwenden. Einer der großen Vorteile sind reaktionsschnellere Layouts: Systemtext kann einfach im laufenden Betrieb geändert werden!

Ich rationalisiere die Websites meiner Kunden schnell und stelle auf weniger Bildabhängigkeit um. Her mit den Webfonts! Vielleicht wird es eine weitere Wiederbelebung des internationalen Stils im Design ;)

In voller Offenlegung

Ich wäre nachlässig, 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 Benutzerbasis so ziemlich alles möglich ist.