Variabele lettertypen op het web, Explained

Variabele lettertypen zijn, in een notendop, lettertypebestanden met instellingen die u op subtiele wijze kunt wijzigen of die het uiterlijk van het lettertype drastisch kunt wijzigen. Ze zijn ingesteld om een ​​groot verschil te maken voor typen op het web - laten we eens een kijkje nemen!

Bekijk de Explainer-video

Variabele lettertypen voor webontwerpers

Via variabele lettertype-instellingen (die worden genoemd as) u kunt een enkel lettertypebestand nemen en het soort variaties maken dat u voorheen alleen maar kon doorlopen met behulp van meerdere lettertypebestanden.

Als u bijvoorbeeld bij een normale lettertypefamilie een lichte, normale en vetgedrukte versie wilde hebben, zou u drie verschillende lettertypebestanden moeten laden.

Echter, met een variabel lettertype dat als een gewichtsas je kunt het gewicht aanpassen via CSS om de lichte, normale en vetgedrukte uiterlijk van een enkel bestand te krijgen:

.light font-variation-settings: "wght" 66;  .norm font-variation-settings: "wght" 84;  .bold font-variation-settings: "wght" 154;  

Met deze aanpak krijgt u hetzelfde typografische uiterlijk, maar met sterk verbeterde laadtijden. Waar u voorheen het aantal varianten moest minimaliseren dat u in een webpagina laadt, met variabele lettertypen die niet langer een probleem vormen, heeft u een groot aantal varianten aan uw vingertoppen:

Protipo-variabele op Axis-Praxis

Stijlvariabiliteit

Wat stijlvariatie betreft, stopt het daar niet alleen. U bent niet beperkt tot alleen de soorten variaties waaraan u gewend zou zijn, zoals normaal gewicht of cursief. 

Ten eerste kan elke willekeurige waarde van een as overal in een glijbereik worden ingesteld, niet alleen op ingestelde waarden. Dus als u op zoek bent naar een gewicht ergens tussen normaal en vet, is dat perfect mogelijk. Of als u wilde dat uw cursivering net iets minder werd, of als tekenbreedten iets meer dan standaard waren, hebt u de macht in handen. Stem uw instellingen precies af op wat u nodig hebt.

Ten tweede kunnen lettertypen alle assen gebruiken waar de ontwerper om geeft! Bekijk de beschikbare instellingen voor Bitcount:

Bitcount-instellingen op Axis-Praxis

Afhankelijk van het lettertype, vindt u assen die u controle geven over slagschaduwen, stencil-openingen of karakterterminals, de opties zijn onbeperkt.

Winden van verandering

Variabele lettertypen lijken een grote impact te hebben op hoe we werken als webontwerpers. Ze zullen ons in staat stellen veel grotere diversiteit en controle te bereiken, terwijl we tegelijkertijd onze laadsnelheden verminderen. Ze stellen ons ook in staat om onze typografische creativiteit te vertakken op manieren die voorheen technisch onmogelijk waren.

Om u op weg te helpen met variabele lettertypen, hebben we een cursus samengesteld die u door alle belangrijke facetten van hun werking leidt, u helpt om de benodigde gereedschappen in te stellen en die u door de codering van de CSS leidt. bestuurt variabele lettertypen en laat u zien hoe u teruggevallen bent voor browsers die nog geen ondersteuning hebben.

  • Aan de slag met variabele lettertypen

    Variabele lettertypen zijn het volgende grote ding in webtypografie. Ze zorgen voor meer creativiteit en ontwerpvrijheid dan webontwerpers ooit eerder hebben gehad met het type ...
    Kezz Bracey
    Web Typografie