Variabla teckensnitt är i en nötskal typfiler som har inställningar som du kan ändra till subtilt eller dramatiskt ändra teckensnittets utseende. De är avsedda att göra stor skillnad för att skriva på webben - låt oss ta en närmare titt!
Genom variabla teckensnittsinställningar (som kallas axlar) Du kan ta en enstaka fontfil och skapa de olika variationerna som du tidigare bara kunde komma igenom med hjälp av flera typfiler.
Till exempel, med en vanlig typfamilj, om du vill ha en ljus, normal och fet viktversion, måste du ladda in tre olika typsnittsfiler.
Men med ett variabelt teckensnitt som som en viktaxel du kan justera vikten via CSS för att få ljuset, det normala och fetstil från en enda fil:
.ljus font-variation-settings: "wght" 66; .regular font-variation-settings: "wght" 84; . bold font-variation-inställningar: "wght" 154;
Med detta tillvägagångssätt får du samma typografiska utseende, men med väldigt förbättrade belastningstider. Där du tidigare hade behövt minimera antalet varianter du laddar in på en webbsida, med variabla teckensnitt som inte längre är ett problem, har du stora variationer med fingertips:
Protipo Variabel på Axis-PraxisSåvitt stilvariationen går, stannar den inte bara där. Du är inte begränsad till bara de typer av variationer du skulle vara van vid, som normal vikt eller kursiv.
För det första kan varje axel ha sitt värde inställt var som helst längs ett glidområde, inte bara vid inställda värden. Så om du letade efter en vikt någonstans mellan normal och fet, så är det helt möjligt. Eller om du vill att kursivet ska luta dig lite mindre, eller om du vill att teckenbredd ska vara lite mer än standard, är kraften i dina händer. Finjustera dina inställningar till exakt vad du behöver.
För det andra kan teckensnitt använda alla axlar som formgivaren bryr sig om att tänka på! Ta en titt på de tillgängliga inställningarna för Bitcount:
Bitcount-inställningar på Axis-PraxisBeroende på teckensnittet hittar du axlar som ger dig kontroll över fallskuggor, eller stencilgap eller karaktärsterminaler, alternativen är obegränsade.
Variabla teckensnitt ser ut att göra stor inverkan på hur vi arbetar som webbdesigners. De kommer att göra det möjligt för oss att uppnå mycket större mångfald och kontroll samtidigt som vi sänker våra lasthastigheter. De kommer också att tillåta oss att förgrena sig i vår typografiska kreativitet på sätt som var tekniskt omöjliga förut.
För att komma igång med variabla teckensnitt har vi sammanställt en kurs som guidar dig igenom alla de viktigaste aspekterna av hur de fungerar, får dig att ställa in de verktyg du behöver, går igenom kodning av CSS som kontrollerar variabla teckensnitt och visar hur du skapar fallbacks för webbläsare som ännu inte har stöd.