System- und Webfonts verschönern mit der CSS-Eigenschaft „font-feature-settings“

Firefly Zusammenfassung von grossartigen Fonts in einem alten Setzkasten 47794

Quelle: Firefly Zusammenfassung von grossartigen Fonts in einem alten Setzkasten 47794

Durch einen Blogartikel von Brian Gardner wurde ich auf die neue Version der variablen Webschriftart „Inter“ aufmerksam (Version 4.0). Laut Brian soll diese performanter sein als die vorherige.

Ich erkenne die Verbesserung zwar nicht, aber so wichtig ist mir die Performance nicht. Gegenwärtig habe ich InterVariable nicht im Einsatz. Die 338 kb (Einzelschrift über 100 kb) sind mir immer noch zu „schwer“. Man kann sie kostenlos downloaden.

Mir ist in diesem Zusammenhang allerdings eine Geschichte aufgefallen, die Design-Amateuren wie mir lange verborgen geblieben ist. Schließlich war ich froh, mich aus diversen Font-Bibliotheken (vornehmlich Google-Fonts) bedienen zu können. Auf die vorhandenen Parameter achtete ich nicht. Meine Devise war: Download, Upload, schreiben.

Blogger, die sich fürs Innenleben ihres Blogs befassen, wissen, dass Schriftarten ein beliebtes Design-Element darstellen. Leider führt kein Weg daran vorbei, die Dosis kleinzuhalten. Weniger ist mehr.

Damit meine ich nicht etwa nur die Reduzierung der verwandten Fonts und Schnitte, sondern generell das Thema Webfonts.

Viele setzen deshalb die zwar nicht unbedingt spektakulären, dafür jedoch umso flotteren Systemschriftarten ein (system-ui, -apple system, Helvetia, Verdana, Arial und so weiter) und drehen damit an den Performancewerten ihrer Blogs. Was nicht geladen werden muss, muss nicht gemessen werden.

Diejenigen, die solche Systemschriftarten einsetzen, können mithilfe der CSS Eigenschaft „font-feature-settings“ am Aussehen einiges verändern bzw. aus meiner Sicht schöner machen. Vergleicht einmal die Ausgangsbasis und fügt dann in eure style.css die folgende Beispielzeile ein Feature ► Aus diesen Beispielen entnommen:

 html {
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv05", "cv06" 0, "cv07", "cv08", "cv09", "cv10", "cv12", "cv13", "ss03", "pnum"   ;
      } 

Ich denke, man sieht sofort einen Unterschied. Beim Einsatz der Systemschriften wirken nicht alle Parameter (z.B. ss03). Vielleicht hat außer mir sonst noch jemand Spaß an solchen Experimenten. Zumal ja immer mehr Blogger lieber auf Systemschriftarten setzen.

Quelle Featured-Image: Firefly Zusammenfassung von grossartigen Fonts in einem alten Setzkasten 47794

Letztes Update:

Gefällt Ihnen der Artikel? Dann teilen Sie ihn mit Ihren Freunden.

Relevante Beiträge

featuredimage
Bloggen, Empfohlen, Privat

Meine 20-jährige Bloggeschichte

featuredimage
Bloggen, Gesellschaft

Alternativloses Schwadronieren


2 Gedanken zu „System- und Webfonts verschönern mit der CSS-Eigenschaft „font-feature-settings““

  1. Ich nutze die Schrift „Inter“ in meinem Blog. Dass man diese Schrift mit der CSS-Eigenschaft „font-feature-settings“ anpassen kann, war mir nicht klar.

Schreibe einen Kommentar


Hier im Blog werden bei Abgabe von Kommentaren keine IP-Adressen gespeichert! Deine E-Mail-Adresse wird auf keinen Fall veröffentlicht.

Meine Kommentar-Politik: Ich mag Kommentare, und ich schätze die Zeit, die du zu dem Zweck investierst, Ideen auszutauschen und Feedback zu geben. Nur Kommentare, die als Spam oder eindeutig Werbezwecken dienen, werden gelöscht.



Your Mastodon Instance
Share to...