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

Durch einen Blogartikel von Brian Gardner wur­de ich auf die neue Version der varia­blen Webschriftart „Inter” auf­merk­sam (Version 4.0). Laut Brian soll die­se per­for­man­ter sein als die vorherige.

Ich erken­ne die Verbesserung zwar nicht, aber so wich­tig 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 kos­ten­los down­loa­den.

Mir ist in die­sem Zusammenhang aller­dings eine Geschichte auf­ge­fal­len, die Design-Amateuren wie mir lan­ge ver­bor­gen geblie­ben ist. Schließlich war ich froh, mich aus diver­sen Font-Bibliotheken (vor­nehm­lich Google-Fonts) bedie­nen zu kön­nen. Auf die vor­han­de­nen Parameter ach­te­te ich nicht. Meine Devise war: Download, Upload, schreiben. 

Blogger, die sich fürs Innenleben ihres Blogs befas­sen, wis­sen, dass Schriftarten ein belieb­tes Design-Element dar­stel­len. Leider führt kein Weg dar­an vor­bei, die Dosis klein­zu­hal­ten. Weniger ist mehr.

Damit mei­ne ich nicht etwa nur die Reduzierung der ver­wand­ten Fonts und Schnitte, son­dern gene­rell das Thema Webfonts. 

Viele set­zen des­halb die zwar nicht unbe­dingt spek­ta­ku­lä­ren, dafür jedoch umso flot­te­ren Systemschriftarten ein (sys­tem-ui, ‑apple sys­tem, Helvetia, Verdana, Arial und so wei­ter) und dre­hen damit an den Performancewerten ihrer Blogs. Was nicht gela­den wer­den muss, muss nicht gemes­sen wer­den.

Diejenigen, die sol­che Systemschriftarten ein­set­zen, kön­nen mit­hil­fe der CSS Eigenschaft „font-feature-settings” am Aussehen eini­ges ver­än­dern bzw. aus mei­ner Sicht schö­ner machen. Vergleicht ein­mal die Ausgangsbasis und fügt dann in eure style.css die fol­gen­de Beispielzeile ein Feature ► Aus die­sen 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 den­ke, man sieht sofort einen Unterschied. Beim Einsatz der Systemschriften wir­ken nicht alle Parameter (z.B. ss03). Vielleicht hat außer mir sonst noch jemand Spaß an sol­chen Experimenten. Zumal ja immer mehr Blogger lie­ber auf Systemschriftarten setzen.