Webdesign wurde zu dem Zeitpunkt, an dem Webfonts eine breite Verbreitung fanden. Vor diesem Punkt ist es fraglich, dass wir weniger Designer als Ingenieure waren.
Der Enthusiasmus, mit dem wir uns über die Schriftartoptionen im Webdesign Gedanken gemacht haben, hat jedoch zu einer verwirrenden Auswahl an Möglichkeiten geführt. so sehr, dass viele Designer sich für den Weg des geringsten Widerstandes entscheiden und es dem Wunsch nach einer einfachen Implementierung erlauben, ihre Typografie zu diktieren.
Wenn Sie wissen, wonach Sie suchen, sind alle Optionen einfach. In diesem Artikel stellen wir Ihnen das Wissen zur Verfügung, das Sie benötigen, um fundierte Entscheidungen zu treffen, wenn Sie sich für die Font-Technologie entscheiden.
Wir werden diese Möglichkeiten veranschaulichen, indem wir uns auf den besten Weg konzentrieren, Garamond mit der allzeit klassischen Schrift zu beliefern.
Nachdem wir die Vorteile von Webfonts hervorgehoben haben, verwendet die erste Option, die wir in Betracht ziehen, überhaupt keine Webfonts. Font-Stacking ist eine CSS-Technik, bei der Sie eine Reihe von Fallbacks angeben, die mit Ihrer ersten Auswahl beginnen und mit einer Catch-All-Lösung enden.
Es gibt viele Font-Stacking-Ressourcen online, aber einer meiner Favoriten ist cssfontstack.com, Es ist ein guter Ausgangspunkt für einen Font-Stack, aber beachten Sie, dass Sie in der Regel etwas Know-how mitbringen müssen.
Laut cssfontstack.com ist Garamond als Systemschrift für 49,91% der Macs und 86,47% der Windows-Rechner verfügbar. Das ist ziemlich gut, aber nicht gut genug. Hier ist der vorgeschlagene Font-Stack, der alle Basen abdeckt:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Die Frage ist, wie können wir das verbessern?
Nun, wir wissen, dass es zahlreiche Versionen von Garamond gibt, so dass wir eine Variation im zweiten Slot als kleinen Kompromiss hinzufügen können.
Zweitens stimme ich nicht zu, dass entweder Baskerville oder Times adäquate Ersatz für Garamond sind, also lassen wir sie fallen. Hoefler Text funktioniert gut anstelle von Garamond, damit es bleiben kann. Wir müssen Serif als endgültigen Catch-All hinzufügen, aber da die meisten Systeme Times als Standard-Serif verwenden, sollten wir uns in das weit überlegene Georgia einreihen, für jeden, der durch die Ritzen gleitet.
Unser endgültiger modifizierter Font-Stack sieht folgendermaßen aus:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Die meisten Zuschauer werden Garamond sehen, ein paar andere werden einen vernünftigen Kompromiss sehen und eine kleine Minderheit wird nur ihre Standard-Serif-Schriftart bekommen.
Font-Stacking ist kostenlos, bei weitem die schnellste Lösung und kann je nach gewählter Schriftart sehr effektiv sein; Im Falle von Garamond gibt es ein gutes Argument dafür, diesen Job als erledigt zu bezeichnen.
Es gibt jedoch ein großes Problem beim Font-Stacking, insbesondere bei einer Schriftart wie Garamond: Es sind so viele Raubkopien im Umlauf, dass es unmöglich ist zu wissen, welche Schriftart auf dem System des Benutzers "Garamond" heißt, nicht nur nicht sicher Das Design stimmt mit unseren Erwartungen überein, der Umfang der Schriftart kann sich radikal von der Version in unserem Design unterscheiden. (Technisch gesehen verhindert nichts, dass eine Kopie von Arial in "Garamond" umbenannt wird. In diesem Fall würde unser Fontstack dies verwenden.)
Das Font-Stacking ist daher eine hervorragende Unterstützung und sollte in Verbindung mit allen unten aufgeführten Lösungen in Betracht gezogen werden, ist aber als primäre Lösung weniger als ideal.
Google Schriftarten ist für viele Designer der Punkt, an dem sie ihre Suche beenden. Für eine Gesamtsumme von $ 0 können Sie einfach Webfonts auf Ihrer Website mit CSS laden.
Der einzige Nachteil ist, dass die Anzahl der angebotenen Schriften extrem begrenzt ist. Schriften wie Roboto und PT Sans verdanken ihre Beliebtheit sowohl ihrer freien Verfügbarkeit bei Google Fonts als auch ihrer gestalterischen Qualität.
Derzeit ist die einzige Variante von Garamond auf Google Fonts verfügbar EB Garamond, ein Versuch, das Garamond-Schriftbild zu öffnen. Aber der Fehler bei dieser Version ist, dass es nur ein Gewicht und einen Stil gibt; Es gibt keine Fett- oder Kursivschrift. Der Designer Georg Duffner hat seine Arbeiten großzügig zur Verfügung gestellt Bit Bucket aber es ist nicht produktionsreif.
Google Fonts ist eine großartige Budgetlösung und ideal für Situationen, in denen Sie die Rechnung statt für Ihren Kunden bezahlen müssen. Die Möglichkeit, Ihre Fonts in CSS anzugeben, ist so einfach wie möglich.
Der große Fehler bei Google Fonts ist, dass es trotz ihres Marketings kaum eine Auswahl gibt. Wenn Sie nach einem Webfont von Open Sans suchen, dann sind Sie an der richtigen Stelle, aber wenn Sie eine Schriftart wie Garamond wollen - was kaum unklar ist -, ist es ein Auswaschen.
Self-Hosting ist ein sehr unterschätzter Ansatz für Webfonts. Seine Hauptattraktion ist die Fähigkeit, Zeichensätze zu unterteilen, eine Option, die so attraktiv ist, dass fast alle Streaming-Dienste versuchen, sie zu emulieren.
Wenn Sie eine Desktop-Kopie von Garamond auf Ihrem System haben, öffnen Sie es und Sie werden eine verwirrende Anzahl von Zeichen sehen. Das Subsetting einer Schriftart ist der Prozess des Löschens von nicht essentiellen Zeichen, was zu einer kleineren Dateigröße und einer schnelleren Zustellung führt.
Die Charaktere, die Sie benötigen, hängen natürlich von der Site ab, die Sie bauen: Wenn Sie einen Reiseführer für Dubrovnik bauen, benötigen Sie wahrscheinlich serbische kyrillische Schriftzeichen. Wenn Sie die gesammelten Werke von Shakespeare reproduzieren, ist es unwahrscheinlich, dass Sie ein @ -Symbol benötigen.
Um eine Schriftart zu unterteilen, benötigen Sie eine Schriftbearbeitungssoftware. Es gibt viele Optionen von der kostenlosen FontForge zur Prämie FontLab Studio. Um eine Teilsatzversion der Schriftart zu erstellen, wählen Sie einfach eine gewünschte Glyphe aus und löschen Sie sie. Speichern Sie die Datei anschließend in Ihrem Projektordner. (Achten Sie darauf, Ihre ursprüngliche Schriftart nicht zu überschreiben!)
Die vollständige .ttf-Datei für Adobe Garamond Pro ist 606 KB. Wenn man es auf lateinische Zeichen und Interpunktion reduziert, reduziert es sich auf 56 Kb. Multiplizieren Sie das über mehrere Gewichtungen und Stile, und Sie speichern ein paar Mb in Downloads für Ihre Benutzer.
Die meisten Schriftartdateien, die Sie installiert haben, sind TrueType (.ttf) mit einem Hauch von OpenType (.otf). Sie können diese auf Ihrem Server speichern und in Ihrem CSS angeben.
Die Unterstützung für .ttf- und .otf-Dateiformate ist in allen modernen Browsern mit Ausnahme von IE (auch der neuesten Version) und einigen mobilen Browsern (einschließlich älterer Versionen von iOS Safari) weit verbreitet.
Um die Abdeckung zu erhöhen, benötigen Sie mehrere zusätzliche Formate. .eot funktioniert für IE, .woff funktioniert für die meisten Browser und ist das bevorzugte Format des W3C, .svg funktioniert mit älteren Browsern. Es gibt eine Reihe von Webdiensten, die diese Formate für Sie aus Ihrer .ttf-Datei erzeugen, einer der beliebtesten Schriftart Eichhörnchen.
Der Nachteil beim Konvertieren von Desktop-Schriften für die Online-Nutzung ist zweierlei: Erstens sind Sie fast sicher nicht lizenziert; und zweitens sind Desktop-Schriftarten fast immer für den Druck optimiert, sie rendern einfach nicht gut auf dem Bildschirm.
Font Gießereien sind endlich zu der Erkenntnis gekommen, dass es einen riesigen Markt für Webfonts gibt. Deshalb haben sie nicht nur ihre Lizenzierung verschärft, sondern auch daran gearbeitet, ihre Back-Kataloge für Bildschirme zu optimieren.
Gießereien, die dedizierte Webfonts liefern, bieten alle erforderlichen Formate, sind qualitätsgeprüft und bereit zum Hochladen auf Ihren Server. Darüber hinaus können Sie immer noch eine Datei unterteilen, und Sie sind nicht auf die Betriebszeit eines Drittanbieters angewiesen.
Es gibt zahlreiche Orte, an denen Sie Webfonts kaufen können, zwei der wichtigsten Akteure auf dem Gebiet sind FontShop.com und MyFonts.com .
Zurück zu unserem Garamond-Dilemma, können wir sehen, dass MyFonts verschiedene Versionen von Garamond anbietet. Wir können lizenzieren Adobe Garamond in mehreren Gewichten, beschränkt auf 250.000 Seitenaufrufe, für etwa 180 US-Dollar.
FontShop hat auch eine Reihe von Webfont-Versionen von Garamond verfügbar. URW Garamond Web bietet jedes Gewicht und jeden Stil, den wir uns wünschen können, und das alles mit großzügigen 500.000 Seitenaufrufen pro Monat. Darüber hinaus hat FontShop eine dedizierte Untersetzer um Ihre glänzenden neuen Schriftkäufe zu optimieren. Leider zahlen Sie eine Prämie für alles, rund 680 für die gesamte Schriftfamilie.
Self-Hosting ermöglicht das Subsetting. Es stellt sicher, dass Sie die Kontrolle über die Bereitstellung Ihrer Schriften behalten, und vermeidet jegliche Abhängigkeit von Servern von Drittanbietern.
Wenn Sie einen professionellen Webfont erwerben, können Sie davon ausgehen, dass die Qualität extrem hoch ist.
Self-Hosting spricht auch diejenigen an, die unsere Schriften lieber "besitzen", als sie zu mieten. Natürlich gibt es in juristischer Hinsicht sehr wenig Eigentum, aber eine einmalige Gebühr sitzt bequemer als ein Abonnement für viele Menschen.
Der einzige Nachteil des Self-Hosting ist der hohe Preis. Sie müssen nicht nur für die Schriftart bezahlen, sondern müssen auch die Hosting- und Bandbreitenkosten in Ihre Zahlen einbeziehen.
Genau wie Google Fonts liefern Webfont-Services Zeichensätze über einfache CSS an unsere Browser. Im Gegensatz zu Google Fonts gibt es eine große Auswahl.
Es gibt eine Reihe von verschiedenen Anbietern zur Auswahl, und ich mag besonders Hoefler & Frere-Jones ' Wolke.Typographie Bedienung. Wie bei vielen kleineren Anbietern hängt ihre Nützlichkeit jedoch ausschließlich von der Verfügbarkeit der gesuchten Schriftart ab. Die nächstgelegene Schriftart, die Hoefler & Frere-Jones liefern kann, ist Hoefler Text. Wenn wir jedoch eine Prämie bezahlen, sollten wir keine Kompromisse eingehen müssen.
Der größte Player im Webfont-Streaming ist Adobe Typekit . Die Qualität ihrer Schriften ist sehr hoch, die Implementierung ist einfach und vor allem haben sie einen großen Katalog zur Auswahl.
Typekit bietet eine Reihe von Abonnements von $ 24,99 pro Jahr für 50.000 Aufrufe pro Monat bis 99,99 $ pro Jahr für 1.000.000 Aufrufe pro Monat. Wenn Sie jedoch ein Creative Cloud-Mitglied sind, ist der Portfolio-Plan in Ihrem Abonnement enthalten. was bedeutet, dass Typekit für die meisten Webdesigner eine kostenlose Lösung ist.
Eine schnelle Suche zeigt uns, dass es verschiedene Versionen von Garamond gibt, einschließlich Adobe eigene, verfügbar auf Typekit. Und es gibt auch eine sehr begrenzte Teilmengenfunktion, mit der wir die Dateigröße ein wenig reduzieren können.
Webfont Streaming-Dienste bieten eine große Vielfalt an qualitativ hochwertigen Schriftarten, die einfach zu Ihrer Website hinzugefügt werden können.
Im Fall von Typekit, wenn Sie bereits ein Creative Cloud-Mitglied sind, macht der freie Zugriff dies zu einer noch attraktiveren Option. Wenn Sie jedoch kein Mitglied sind, haben Sie die Wahl zwischen einem substanziellen Abonnement und der Bindung an Adobe.
Mein Hauptanliegen bei jedem Streaming-Dienst ist, dass Sie vollständig von der Leistung eines Drittanbieters abhängig sind. Wenn ihr Server ausfällt, tut das auch einen wesentlichen Teil Ihres Brandings.
Wie bei so vielen Dingen ist die Antwort: Es hängt von Ihrem Projekt ab. Aber es gibt einige Entscheidungen, die wir basierend auf unserem Garamond-Test treffen können:
Das Font-Stacking ist ein kostenloses Backup und bietet eine On-Brand-Lösung, wenn Font-Dateien fehlen oder Streaming-Dienste langsam laufen. Es sollte immer an jedem Standort implementiert werden, aber darauf vertrauen, sogar für etwas, das so häufig wie Garamond potenziell gefährlich ist.
Wenn die gesuchte Schriftart zum Streamen verfügbar ist, entweder über Google Fonts oder wenn Sie beispielsweise ein Creative Cloud-Abonnement haben, ist dies eine gute Wahl. Da ich ein Creative Cloud-Abonnement habe, wäre ich auf diesem Weg versucht, obwohl das Fehlen einer echten Teilmenge ein Problem darstellen würde.
Wenn Sie das Budget haben, ist die Selbsthestellung eines professionellen Webfont die beste Wahl. Die relativ bescheidenen Kosten - im Vergleich zur Standardfotografie - sind leicht zu rechtfertigen durch die enorme Geschwindigkeit, mit der Subsets ausgeliefert werden.
In einer Branche, in der wir JavaScript-Dateien minimieren, um ein paar Kilobytes zu sparen, ist das rasante Rasieren des Betrags aus einer einzigen Datei ein Kinderspiel.
Ausgewähltes Bild / Vorschaubild, Bild herunterladen über Shutterstock.