4 steg för att använda variabla teckensnitt

Feb 1, 2026
Hur
Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.
(Bildkredit: Framtida)

Variabel typsnitt Aktivera teckensnittsdesigners för att definiera typvariationer inom själva teckensnittet, vilket gör det möjligt för en teckensnitt att agera som flera teckensnitt. Standardfonter är grupperade i fontfamiljer som innehåller flera separata teckensnittsfiler, vilka representerar en annan stil, till exempel en lättvikt eller en djärv vikt. Variabla teckensnitt innehåller alla samma uppgifter i en enda teckensnittsfil.

Med hjälp av källans sans Pro som ett exempel är den variabla versionen av teckensnittet ungefär 394kb och kommer i ett stort antal vikter. Om vi ​​skulle använda dessa teckensnittsvikt individuellt som standardfontfiler, är de i genomsnitt 234KB vardera - vilket resulterar i en kombinerad filstorlek på cirka 1856kb. Naturligtvis antar denna beräkning att alla teckensnittsvikt finns individuellt som en standardfont, som de inte gör. (Även om du letar efter bara vanliga teckensnitt, kolla in vårt inlägg på Bästa gratis teckensnitt tillgängliga.)

Om vi ​​tar bort de teckensnitt som inte existerar som ett vanligt teckensnitt, är den kombinerade filstorleken fortfarande nästan tre gånger storleken på variabelt teckensnitt och med betydligt färre stilar. Även om du bara ville de djärva och vanliga versionerna, som är vanliga i många webbprojekt, är två versioner av standardkällan Sans Pro-teckensnitt fortfarande större än en enda variabel typsnitt. Vad detta visar är att med variabla teckensnitt har vi potential att göra massiva besparingar på bandbredd utan att äventyra våra mönster och kreativitet.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font.

En jämförelse av filstorleken med en rad teckensnittsvikter mellan den vanliga och variabla versionen av typsnittskällan Sans Pro (Bildkredit: Mandy Michael)

Variabla teckensnitt fungerar genom att interpolera huvudvariationerna längs en axel, i huvudsak konstruera nya punkter in-mellan. Det innebär att du kan ställa in teckensnittsvikter på godtyckliga punkter längs axeln som presenterar ett mycket större antal stilar och variationer. Dessutom beror det på att de variabla teckensnitt kan interpoleras att vi kan animera mellan varje variation, vilket möjliggör smidiga övergångar från att säga en tunn vikt till en djärvt vikt - något vi aldrig har kunnat uppnå förut.

Det som gör variabla teckensnitt ännu mer spännande är att designers inte är begränsade till bara en enda axel. Variabla teckensnitt kan innehålla många olika axlar som representerar en rad olika stilar. Detta kan innefatta kondenserad, kursiv, optisk storlek eller andra mer kreativa eller anpassade alternativ.

Vill du placera dina teckensnitt på en ny webbplats? För webbdesignresurser, gå vidare till vårt bästa Website Builder Roundup och plocka av toppen webbhotell tjänster. Eller för en lagringsuppgradering, kolla in dessa molnlagring alternativ.

01. Förstå axlar i variabla teckensnitt

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right.

Titta på interpoleringen av en variabel typsnitt över en vikt och bredd Axis avslöjar utbudet av anpassning som är tillgänglig (Bildkredit: Mandy Michael)

Att använda variabla teckensnitt i vår CSS liknar hur vi normalt brukar använda teckensnitt på webben: med hjälp av @ Font-Face at-Rele . Men vi måste först förstå de olika typerna av axlar i ett variabelt teckensnitt eftersom det här bestämmer vilka CSS-egenskaper vi använder.

Det finns två typer av axlar i en variabel typsnitt: en registrerad axel och en anpassad axel. En registrerad axel hänvisar till en axel som är vanlig nog att det var värt att standardisera. Det finns för närvarande fem registrerade axlar; Vikt, bredd, sned, kursiv och optisk storlek och dessa är ofta mappade till befintliga CSS-egenskaper, såsom typsnitt.

Anpassade axlar definieras av Typeface Designers, kan vara någon form av variation och kräver bara en fyra bokstäver i teckensnittet, som kan hänvisas till i CSS.

02. Använd en registrerad axel

A range of variable font weights along an axis from light (200) to black (900).

Viktvariationer definieras på en axel, från ljus (200) till svart (900) (Bildkredit: Mandy Michael)

När det gäller en registrerad axel vill vi se till att vi använder alla tillhörande CSS-egenskaper, till exempel typsnitt eller typsnitt.

Vi kan ställa in våra teckensnitt med hjälp av @ Font-Face at-Rele Som vi normalt skulle Förändringen är i hur vi definierar variationerna för deskriptorer som teckensnitt, teckensnitt och teckensnittstil. Tidigare skulle vi ha ställt in en typ av 200 och definierade detta som den lätta versionen av teckensnittet, vi skulle sedan ställa in ett annat teckensnittsblock för den djärva versionen och den vanliga versionen tills vi hade alla vikter som krävdes för designen. Med variabla teckensnitt behöver vi bara ett enda teckensnittsblock. Så istället för att använda flera instanser anger vi ett antal värden som motsvarar de minsta och maximala värdena som definieras på teckensnittsaxeln. 

 @ font-ansikte {
Font-familj: "Källa sans variabel";
SRC: URL ("källa-sans-variable.woff") format ("Woff-variations");
FONT-VIKT: 200 700;
}

I det här exemplet sätter vi en typsnitt på 200 till 700. När vårt sortiment är definierat kan vi välja vilket nummer som helst inom det intervallet som vår typsnitt, till exempel 658. Viktigt om du ställer in ditt typsnitt som 200 till 700 och Försök sedan definiera en vikt på 900, även om teckensnittet har en 900 vikt som definieras i sin axel, kommer du inte att kunna använda den. Området definierar vad du har tillgång till i din CSS.

03. Ställ in anpassade axlar

Eftersom inga befintliga CSS-egenskaper kommer att finnas när du använder en anpassad axel, måste vi använda en ny CSS-egenskap som heter Font-Variation-Inställningar. Detta gör det möjligt för oss att definiera så många namngivna och anpassade axlar som vi behöver. 

 H1 {
Font-familj: "Min variabel typsnitt";
Font-variation-inställningar: "Wght '375," Inli 88;
}

I exemplet här hänvisar WGHT till den registrerade axeln av vikt och INLI avser en anpassad axel som heter inline, var och en med ett associerat talvärde som motsvarar en punkt längs variationsaxeln. Medan du kan referera till en registrerad axel som ett värde för font-variation-inställningar rekommenderas att du använder sina mappade CSS-egenskaper istället.

För att säkerställa stöd i de äldre webbläsarna kan vi använda fallback-teckensnitt för ostödda webbläsare genom att använda CSS-funktionsdetektering. 

 H1 {
  Font-familj: "Källa sans", sans-serif;
  FONT-VIKT: 700;
}

@Supports (FONT-Variation-Inställningar: Normal) {
h1 {
 Font-familj: "decovar";
 Font-variation-inställningar: "Inli" 88;
 }
}

Genom att kontrollera support för typsnitt, kan vi inkludera våra variabla fontstilar i stöder CSS-blocket, vilket garanterar att de endast kommer att användas i webbläsare som kan stödja variabla teckensnitt - med våra vanliga teckensnitt som används i de ostödda webbläsarna.

04. Kombinera javascript och variabla teckensnitt

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts.

Variabel typsnitt möjliggör smidiga övergångar från, säg, en tunn till en djärv vikt; Detta gör att du kan skapa smidiga transformationer som använder JavaScript-variabler (Bildkredit: Mandy Michael)

Vi kan utnyttja JavaScript-evenemang för situationer där vi vill ha mer finjusterad kontroll eller ändra teckensnittet baserat på händelser som vi inte kan komma åt med CSS ensam. Ett enkelt exempel skulle matcha vår typsnitt i storleken på vår visningsport - som visningsporten blir mindre, blir teckensikten tyngre.

För att skapa fluidskala måste vi anpassa två uppsättningar värden och enheter - teckensnittsvikt och visningsstorlek. Vi kan komma åt den aktuella visningsbredden med Window.Innerwidth och skapa en ny procentsatsbaserad skala genom att konvertera den till ett intervall av 0-0,99. Genom att inkludera minsta och maximala visningsstorlekar kan vi styra effekten av effekten. 

 var viewportscale =
(fönster.innerwidth - minwindowsize) / (maxwindowsize - minwindowsize);

Vi bestämmer sedan typsnittets vikt baserat på vår visningsstorlek. 

 Var FontweightScale = visningscale * (Minfontweight - maxfontweight) + maxfontweight;

Med CSS Custom Properties kan vi använda vårt JavaScript-värde för att uppdatera teckensnittet i vår CSS. 

 P.Style.SetProperty ("- vikt", fontweightcale);

När detta kombineras till en funktion och kopplad till resize-händelseslyssaren kan vi uppdatera teckensnittet baserat på den nya storleken på fönstret.

Med detta grundläggande tillvägagångssätt kan vi ändra vår typografi baserat på alla slags evenemang och erfarenheter. Där visningsporten är bred kan vi få mer detaljer; Omvänt, när det är mindre och i ett mer begränsat utrymme, kan vi titta på att minska teckensnittets bredd eller öka vikten, vilket ger bättre kontroll över vårt innehåll och typografi när det gäller läsbarhet, användbarhet och design.

Du kan Visa koden För detta på Codepen.

Denna artikel publicerades ursprungligen i utgåva 318 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Prenumerera på nätet här .

Upptäck mer om variabla teckensnitt på Generera CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September.

(Bildkredit: Getty / Bianca Berning / Future)

I sitt samtal på Generera CSS, den fokuserade CSS-konferensen för webbdesigners som äger rum den 26 september 2019 på Rich Mix, London, kommer Bianca Berning att utforska hur variabla teckensnitt kan skapa nya möjligheter till det skrivna ordet inom traditionella medier och nya, nedsända Erfarenheter, som AR, VR och blandad verklighet.

Om du vill fånga det här och andra stora samtal är det värt att snappa upp dina biljetter nu. Om du tar tag i din före 5:00 UTC den 15 augusti, kan du spara £ 50, betala bara £ 199 + moms. Köp din biljett nu !

Relaterade artiklar:

  • 3 sätt Tech byter typ
  • Kom igång med variabla teckensnitt i CSS
  • Förvandla din typ online med variabla teckensnitt

Hur - Mest populära artiklar

Använd Adobe XD för att skapa Micro-interaktioner

Hur Feb 1, 2026

(Bildkredit: Adobe) Adobe XD kan hjälpa till med prototypning - en av de viktigaste processerna i designens livscyke..

Utforska data visualisering med p5.js

Hur Feb 1, 2026

(Bildkredit: Net Magazine) P5.JS är den senaste JavaScript-implementeringen av den kända skrivbordet Creative Codin..

14 ZBRUSH WORKFLOW TIPS

Hur Feb 1, 2026

Alla artister har sitt eget unika arbetsflöde när du skapar 3D-konst i Zbrush. Detta arbetsflöde kan innebära en massa teknik..

Återskapa en manga Classic

Hur Feb 1, 2026

Jag har varit en stor manga fan sedan barndomen och det är omöjligt att dölja det inflytande som passionen har på min konst. ..

Få ditt huvud reagera med dessa fem faktorer

Hur Feb 1, 2026

Lärande reagerar, JavaScript-biblioteket för att skapa användargränssnitt från Facebook och Instagram verkar nötter tills d..

Hur man gör din egen karaktär bibel

Hur Feb 1, 2026

För alla som arbetar professionellt i karaktär design , ett teckenbibel är ett av de viktigaste elementen i dit..

Bygg en materialdesignapp med vinkel 2

Hur Feb 1, 2026

Vinkelmaterial är en UI-komponentram som implementerar Googles materialdesignspecifikation för vinkel 2 - det nya, snabbare imp..

Måla en episk New York-scen

Hur Feb 1, 2026

För den här workshopen målar jag en av mina favoritämnen: en New York City Bridge. Jag har målat Brooklyn Bridge många gånger nu i olika ljus, så för det här projektet har jag valt ..

Kategorier