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

Durch einen Blog­ar­ti­kel von Bri­an Gard­ner wur­de ich auf die neue Ver­si­on der varia­blen Web­schrift­art „Inter“ auf­merk­sam (Ver­si­on 4.0). Laut Bri­an soll die­se per­for­man­ter sein als die vorherige.

Ich erken­ne die Ver­bes­se­rung zwar nicht, aber so wich­tig ist mir die Per­for­mance nicht. Gegen­wär­tig habe ich Inter­Va­ria­ble nicht im Ein­satz. Die 338 kb (Ein­zel­schrift über 100 kb) sind mir immer noch zu „schwer“. Man kann sie kos­ten­los down­loa­den.

Mir ist in die­sem Zusam­men­hang aller­dings eine Geschich­te auf­ge­fal­len, die Design-Ama­teu­ren wie mir lan­ge ver­bor­gen geblie­ben ist. Schließ­lich war ich froh, mich aus diver­sen Font-Biblio­the­ken (vor­nehm­lich Goog­le-Fonts) bedie­nen zu kön­nen. Auf die vor­han­de­nen Para­me­ter ach­te­te ich nicht. Mei­ne Devi­se war: Down­load, Upload, schreiben. 

Blog­ger, die sich fürs Innen­le­ben ihres Blogs befas­sen, wis­sen, dass Schrift­ar­ten ein belieb­tes Design-Ele­ment dar­stel­len. Lei­der führt kein Weg dar­an vor­bei, die Dosis klein­zu­hal­ten. Weni­ger ist mehr.

Damit mei­ne ich nicht etwa nur die Redu­zie­rung der ver­wand­ten Fonts und Schnit­te, son­dern gene­rell das The­ma Webfonts. 

Vie­le set­zen des­halb die zwar nicht unbe­dingt spek­ta­ku­lä­ren, dafür jedoch umso flot­te­ren Sys­tem­schrift­ar­ten ein (sys­tem-ui, ‑apple sys­tem, Hel­ve­tia, Ver­da­na, Ari­al und so wei­ter) und dre­hen damit an den Per­for­man­ce­wer­ten ihrer Blogs. Was nicht gela­den wer­den muss, muss nicht gemes­sen wer­den.

Die­je­ni­gen, die sol­che Sys­tem­schrift­ar­ten ein­set­zen, kön­nen mit­hil­fe der CSS Eigen­schaft „font-feature-settings“ am Aus­se­hen eini­ges ver­än­dern bzw. aus mei­ner Sicht schö­ner machen. Ver­gleicht ein­mal die Aus­gangs­ba­sis und fügt dann in eure style.css die fol­gen­de Bei­spiel­zei­le ein Fea­ture ► Aus die­sen Bei­spie­len 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 Unter­schied. Beim Ein­satz der Sys­tem­schrif­ten wir­ken nicht alle Para­me­ter (z.B. ss03). Viel­leicht hat außer mir sonst noch jemand Spaß an sol­chen Expe­ri­men­ten. Zumal ja immer mehr Blog­ger lie­ber auf Sys­tem­schrift­ar­ten setzen.