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

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.