Schriften sind Vektoren. Vektorgrafiken mit mehr Punkten erzeugen größere Dateien als Vektorgrafiken mit weniger Punkten. Benutzerdefinierte Schriften werden heruntergeladen. Daher sind Schriften mit weniger Punkten in ihrer Vektorgrafik kleiner. Das ist zumindest die Theorie. Sehen wir mal, ob da etwas dran ist?
Nehmen wir zwei Schriften von Google Fonts: Open Sans und EB Garamond. Die Anzahl der Punkte ist kein dramatischer Unterschied, aber das mit Serifen versehene Garamond hat mehr davon, besonders wenn man sich die Bereiche der Serifen ansieht.
Es sind nicht nur Serifen, sondern jegliche Komplikationen. Betrachten Sie Bleeding Cowboys, ein Meisterwerk einer Schriftart und ein Favorit von Pfandhäusern und Kaffeewagen gleichermaßen, wo ich in der Hochwüste lebe
Bleiben wir bei unserem praktischeren Vergleich.
Einen Hinweis auf die Kosten in Bezug auf die Größe erhalten wir, indem wir die Dateien herunterladen. Wenn wir das Standard-„Latein“-Set herunterladen und die normale Schriftstärke beider vergleichen
| OpenSans-Regular.ttf | 96 KB |
| EBGaramond-Regular.ttf | 545 KB |
Ich bin mir nicht zu 100 % sicher, ob das ein Äpfel-mit-Äpfel-Vergleich ist, da ich kein Experte für Schriftdateien bin. Vielleicht hat EB Garamond eine ganze Menge zusätzlicher Zeichen oder so? Keine Ahnung. Außerdem verwenden wir im Web, wo die Dateigröße wirklich wichtig ist, keine .ttf-Dateien. Lassen wir sie also durch Font Squirrels Generator laufen. Das sollte uns verraten, ob wir es hier tatsächlich mit mehr Glyphen zu tun haben.
Er meldet leicht unterschiedliche Größen als der Finder und bestätigt, dass Garamond tatsächlich viel mehr Glyphen als Open Sans hat.
Um die Größen mit einer Schriftdatei mit der gleichen Anzahl verfügbarer Zeichen zu vergleichen, habe ich einen benutzerdefinierten Subset von nur Großbuchstaben, Kleinbuchstaben, Satzzeichen und Zahlen erstellt (Dinge, die beide haben werden), bevor ich sie als .woff2-Dateien anstelle von .ttf ausgab.
Danach…
| opensans-regular-webfont.woff2 | 10 KB |
| ebgaramond-regular-webfont.woff2 | 21 KB |
Ich habe sie nicht über ein Netzwerk mit GZIP oder Brotli oder so etwas ausgeliefert, aber meines Wissens ist WOFF2 bereits komprimiert, daher ist das nicht allzu relevant.
Grobe Verdopplung beim Vergleich der Dateigröße dieser beiden recht beliebten Schriftarten? Erscheint mir etwas bedeutsam. Ich schrecke nicht davor zurück, eine Schriftart auszuwählen, vorausgesetzt, sie passt zur Marke und so weiter, wegen der Größe.
Was mich darauf gebracht hat, ist ein Blogbeitrag über eine Schriftart namens Ping. Schauen Sie sich dieses Prinzip der „Handzeichnung“ an, aus dem sie gemacht ist
Wow! Ein einziger Strich? Leider glaube ich nicht, dass tatsächliche Schriften aus Strichen gemacht werden können, daher können die Einsparungen bei der Punktanzahl nicht daher rühren. Ich habe die „ExtraLight“-Variante gekauft und die Punkte sind wie folgt
Die TTF ist 244 KB, also nicht unter 100 wie bei Open Sans, aber auch hier bin ich mir nicht sicher, wie aussagekräftig das ohne einen passenden Subset und all das ist. So oder so, ich konnte das nicht tun, da es gegen die Bedingungen von Ping verstößt, es zu konvertieren.
Schriften können technisch aus Strichen gemacht werden und sind besonders nützlich beim Laserschneiden und CNC-Gravieren, wo sie „Single Line Fonts“ genannt werden. Davon gibt es leider nicht viele.
Leider behandeln die meisten Anwendungen (wie Illustrator) sie aufgrund der Natur ihrer offenen Pfade nicht sehr gut, sodass die meisten Zeichen nicht richtig gerendert werden, selbst wenn Sie die Füllung entfernen und durch einen Strich ersetzen.
Ich würde mir wünschen, dass sie eines Tages breiter unterstützt würden. Ich könnte mir vorstellen, dass sie SVG-CSS-Eigenschaften wie `stroke-width` verwenden, um die „Schriftstärke“ zu steuern.
Schriftendesign hat seine besonderen Bedürfnisse, die aus den Sehgewohnheiten des menschlichen Auges entstehen. Sie können deutlich sehen, dass der „Strich“ dieser sogenannten Single-Stroke-Schrift oben (diese Schrift imitiert nur leicht das Konzept eines einzelnen Strichs und ist weit von einem echten Single-Stroke entfernt) eine sich ändernde Breite hat. Wo die Rundung auf den Stamm trifft, muss eine kleinere „Strichbreite“ vorhanden sein, um dunkle, dichte Stellen innerhalb des Buchstabens zu vermeiden. Das wäre einfach schlechtes Design. Sie können definitiv eine echte Single-Stroke-Schrift entwerfen. Sie müssen nur die Breite für beide Seiten über die Länge des Strichs speichern. Z.B. 10px Breite auf der rechten Seite, bei 12% der Gesamtlänge. Das würde wahrscheinlich eine super kleine Datei ergeben, möglicherweise kleiner als tatsächliche Schriftdateien. Aber irgendwann werden Sie auf neue Probleme stoßen. Ein kleines „a“ zum Beispiel ist in seinem Konzept ein voller Kreis und ein Strich, zu einem einzigen Buchstaben vereint. Wenn Sie es aus einem Strich wie oben gezeigt zeichnen wollen, zeichnen Sie versehentlich ein griechisches Alpha, das nicht dasselbe ist wie ein lateinisches „a“. Sie verstehen das. Aber tolle Artikel, vielen Dank.
Das ist ein sehr interessanter Beitrag. Etwas, worüber man nicht nachdenkt, das aber in meinem Hinterkopf bleiben wird, wenn ich in Zukunft eine Schriftart auswähle. Danke, Chris.
Immer mit der Ruhe. Ihr scheint alle nur das Pferd von hinten aufzuzäumen. Man wählt eine Schriftart danach aus, wie gut sie lesbar ist, nicht danach, wie schnell sie heruntergeladen wird.
Bei Schriften hat jeder Knoten eine Koordinate (x, y) und das ist ein Wertepaar, das in Bytes übertragen wird. Auch jeder Ankerpunkt einer Kurve hat eine (x, y)-Koordinate, also… wenn eine Schrift zu viele Kurven hat, erhöht das das Gewicht der Datei.
Außerdem haben Schriften neben der Kodierung (Zeichenkarte) noch andere Hintergrundinformationen „Schriftinformationen“, die Gewicht hinzufügen können, Hinting, Kerning, andere Open-Type-Features, Tabellen usw.
Ich hoffe, es hilft!