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

Horst Schulte

am

2

2 Min.



Merken

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.

Diesen Beitrag teilen:

Horst Schulte

Mein Bloggerleben reicht bis ins Jahr 2004 zurück. Ich bin jetzt 71 Jahre alt und lebe seit meiner Geburt (auch aus Überzeugung) auf dem Land.

hs010225 a

Schlagworte: Aufhübschen css Systemfonts Webfonts

Quelle Featured-Image: Firefly Zusammenfassung von grossartigen Fonts in ...

Letztes Update:

789 Views
Anzahl Wörter im Beitrag: 301

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.

Lass deinen Gedanken freien Lauf


Hier im Blog werden bei Abgabe von Kommentaren keine IP-Adressen gespeichert! Deine E-Mail-Adresse wird NIE veröffentlicht! Du kannst anonym kommentieren. Dein Name und Deine E-Mail-Adresse müssen nicht eingegeben werden.


✅ Beitrag gemerkt! Favoriten anzeigen
0
Your Mastodon Instance
Share to...