4 stappen voor het gebruik van variabele lettertypen

Sep 16, 2025

Procedures

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.

(Beeldkrediet: toekomst)

Variabele lettertypen Schakel lettertypenontwerpers in om typevariaties in het lettertype zelf te definiëren, waardoor één lettertype bestand kan handelen als meerdere lettertypen. Standaardlettertypen zijn gegroepeerd in lettertypengezinnen die meerdere afzonderlijke lettertypenbestanden bevatten, die elk een andere stijl vertegenwoordigen, bijvoorbeeld een lichtgewicht of een gedurfd gewicht. Variabele lettertypen bevatten allemaal dezelfde informatie in een enkel lettertype-bestand.

Gebruik van Source Sans Pro Als een voorbeeld, de variabele versie van het lettertype totalen ongeveer 394KB en komt in een grote verscheidenheid aan gewichten. Als we deze lettertypegewichten afzonderlijk zouden gebruiken als standaard lettertypenbestanden, zijn ze gemiddeld 234KB elk - resulterend in een gecombineerde bestandsgrootte van ongeveer 1856 kb. Natuurlijk gaat deze berekening ervan uit dat alle doopvontgewichten individueel als standaard lettertype bestaan, wat ze niet doen. (Hoewel als u op zoek bent naar alleen reguliere lettertypen, bekijk onze post op de beste gratis lettertypen beschikbaar.)

Als we de lettertypen verwijderen die niet bestaan als een standaardlettertype, is de gecombineerde bestandsgrootte nog steeds bijna drie keer de grootte van het variabele lettertype en met aanzienlijk minder stijlen. Zelfs als u zojuist de gedurfde en regelmatige versies wilde, zijn ze gemeenschappelijk in veel webprojecten, twee versies van de standaardbron Sans Pro-lettertype nog groter dan een enkelvoudig variabel lettertype. Wat dit laat zien is dat we met variabele lettertypen het potentieel hebben om enorme besparingen op bandbreedte te maken zonder onze ontwerpen en creativiteit in gevaar te brengen.

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. — Een vergelijking van de bestandsgroottes van een reeks lettertype gewichten tussen de standaard- en variabele versie van de lettertype-bron SANS PRO (Beeldkrediet: Mandy Michael)

Variabele lettertypen werken door de hoofdvariaties langs een as te interpoleren, die in wezen nieuwe punten in-tussenin te bouwen. Dit betekent dat u lettertype gewichten bij willekeurige punten langs de as kunt instellen die een veel groter aantal stijlen en variaties presenteert. Bovendien is het omdat de variabele lettertypen kunnen worden geïnterpoleerd dat we in staat zijn om tussen elke variatie te animeren, waardoor soepele overgangen een dun gewicht tot een vetgedrukt gewicht kunnen zeggen - iets dat we nog nooit eerder hebben kunnen bereiken.

Wat variabele lettertypen nog opwindender maakt, is dat ontwerpers niet beperkt zijn tot slechts één as. Variabele lettertypen kunnen veel verschillende assen bevatten die een reeks verschillende stijlen vertegenwoordigen. Dit kan gecondenseerde, cursieve, optische grootte of andere creatievere of aangepaste opties omvatten.

Wilt u uw lettertypen op een nieuwe website plaatsen? Voor Web Design Resources, ga naar onze best website bouwer Roundup en Pick of Top web hosting Diensten. Of voor een opslagupgrade, bekijk deze cloud opslag opties.

01. Begrijp bijassen in variabele lettertypen

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. — Kijken naar de interpolatie van een variabele lettertype over een gewicht en breedte-as onthult het bereik van aanpassingen die beschikbaar is (Beeldkrediet: Mandy Michael)

Het gebruik van variabele lettertypen in onze CSS lijkt erg op hoe we normaal lettertypen op het web zouden gebruiken: met behulp van de @ Font-face-regel We moeten echter eerst de verschillende soorten assen in een variabele lettertype begrijpen, omdat dit bepaalt welke CSS-eigenschappen waar we gebruik van maken.

Er zijn twee soorten assen in een variabel lettertype: een geregistreerde as en een aangepaste as. Een geregistreerde as verwijst naar een as die algemeen genoeg is dat het de moeite waard was normalisering. Er zijn momenteel vijf geregistreerde assen; Gewicht, breedte, schuin, cursief en optische grootte en deze worden vaak toegewezen aan bestaande CSS-eigenschappen, zoals lettertype-gewicht.

Aangepaste assen worden gedefinieerd door typeface-ontwerpers, kunnen elke vorm van variatie zijn en vereisen slechts een identificatie van vier letters binnen het lettertype-bestand, dat in CSS kan worden verwezen.

02. Gebruik een geregistreerde as

A range of variable font weights along an axis from light (200) to black (900). — Gewichtsvariaties worden gedefinieerd op een as, van licht (200) naar zwart (900) (Beeldkrediet: Mandy Michael)

Als het op een geregistreerde as aankomt, willen we ervoor zorgen dat we geassocieerde CSS-eigenschappen gebruiken, bijvoorbeeld lettertype of lettertype-stijl.

We kunnen onze lettertypen opzetten met behulp van de @ Font-face-regel zoals we normaal zouden doen; De verandering bevindt zich in de manier waarop we de variaties voor descriptoren als lettertype-gewicht, lettertype-stretch en lettertype-stijl definiëren. Eerder zouden we een lettertype van 200 hebben ingesteld en dit als de lichtversie van het lettertype hebben gedefinieerd, we zouden vervolgens een ander lettertype opzetten voor de gewaagde versie en de reguliere versie totdat we alle gewichten hadden die nodig waren het ontwerp. Met variabele lettertypen hebben we slechts een enkel lettertype nodig. Dus in plaats van meerdere instanties te gebruiken, specificeren we een reeks waarden die overeenkomen met de minimum- en maximumwaarden die zijn gedefinieerd op de lettertype-as.

 @ Font-font {
Font-familie: "Soury Sans-variabele";
SRC: URL ("Source-Sans-Variable.woff") -indeling ("WOFF-variaties");
Font-gewicht: 200 700;
}

In dit voorbeeld stellen we een doopvontgewicht van 200 tot 700 in. Zodra ons bereik is gedefinieerd, kunnen we elk nummer kiezen binnen dat bereik als ons doopvontgewicht, bijvoorbeeld 658. Belangrijk als u uw doopvontgewichtsbereik als 200 tot 700 instelt en Probeer vervolgens een gewicht van 900 te definiëren, zelfs als het lettertype een 900 gewicht in zijn as heeft gedefinieerd, kunt u het niet gebruiken. Het assortiment definieert waartoe u toegang heeft in uw CSS.

03. Stel aangepaste assen op

Aangezien er geen reeds bestaande CSS-eigenschappen bestaan bij het gebruik van een aangepaste as, moeten we gebruik maken van een nieuwe CSS-eigenschap die Font-variatie-instellingen wordt genoemd. Dit zal ons in staat stellen zoveel genoemde en aangepaste assen te definiëren zoals we nodig hebben.

 H1 {
Font-familie: 'mijn variabele lettertype';
Font-variatie-instellingen: 'WHT' 375, 'Inli' 88;
}

In het voorbeeld hier verwijst WHT naar de geregistreerde gewichtsas en inLi verwijst naar een aangepaste as die inline wordt genoemd, elk met een bijbehorende nummerwaarde die overeenkomt met een punt langs de as van variatie. Hoewel u een geregistreerde as kunt verwijzen als een waarde voor font-variatie-instellingen, wordt u aanbevolen om in plaats daarvan gebruik te maken van hun toegewezen CSS-eigenschappen.

Om te zorgen voor ondersteuning in de oudere browsers, kunnen we fallback-lettertypen gebruiken voor niet-ondersteunde browsers door gebruik te maken van CSS-functie-detectie.

 H1 {
  Font-familie: "Source SANS", SANS-SERIF;
  Font-gewicht: 700;


@Supports (Font-variatie-instellingen: normaal) {
H1 {
 Font-familie: "Decovar";
 Font-variatie-instellingen: "Inli" 88;
 
}

Door te controleren op ondersteuning voor het font-variatie-instellingen, kunnen we onze variabele lettertypestijlen opnemen in het CSS-blok van ondersteuning, zodat ze alleen worden gebruikt in browsers die variabele lettertypen kunnen ondersteunen - met onze standaardlettertypen die worden gebruikt in de niet-ondersteunde browsers.

04. Combineer JavaScript en variabele lettertypen

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Variabele lettertypen maken soepele overgangen mogelijk van, zeggen, een dun tot een gedurfd gewicht; Hiermee kunt u soepele transformaties maken met behulp van JavaScript-variabelen (Beeldkrediet: Mandy Michael)

We kunnen gebruik maken van JavaScript-evenementen voor situaties waarin we meer verfijnde controle willen of om het lettertype op basis van gebeurtenissen te wijzigen die we alleen met CSS alleen kunnen openen. Een eenvoudig voorbeeld zou overeenkomen met ons doopvontgewicht tot de grootte van onze viewport - zoals de viewport kleiner wordt, wordt het doopvontgewicht zwaarder.

Om de vloeistofschaal te maken, moeten we twee sets waarden en eenheden uitlijnen - het doopvontgewicht en de viewport-maat. We hebben toegang tot de huidige viewportbreedte met behulp van venster.innerwidth en creëren een nieuwe schaalgebaseerd door deze te converteren naar een bereik van 0-0,99. Door de minimale en maximale viewportformaten op te nemen, kunnen we het bereik van het effect regelen.

 Viewportscale =
(venster.innerwidth - Minwindowsize) / (MaxWindowsize - Minwindowsize);

Vervolgens bepalen we het doopvontgewicht op basis van onze viewport-maat.

 Var Fontweightscale = ViewPortScale * (Minfontgewicht - Maxfontgewicht) + MaxFontgewicht;

Met behulp van CSS-aangepaste eigenschappen kunnen we onze JavaScript-waarde gebruiken om het doopvontgewicht in onze CSS bij te werken.

 P.Style.SetProperty ("- Gewicht", FontweightScale);

Wanneer dit wordt gecombineerd in een functie en bevestigd aan de LUISTER van de grootte-gebeurtenis, kunnen we het doopvontgewicht bijwerken op basis van de nieuwe grootte van het venster.

Met deze basisbenadering kunnen we onze typografie wijzigen op basis van allerlei soorten gebeurtenissen en ervaringen. Waar de viewport breed is, kunnen we meer detail hebben; Omgekeerd, wanneer het kleiner is en in een meer besloten ruimte, kunnen we kijken naar het verminderen van de doopvontbreedte of het vergroten van het gewicht, waardoor onze inhoud en typografie een betere controle biedt aan onze inhoud en typografie in termen van leesbaarheid, bruikbaarheid en design.

Jij kan Bekijk de code Hiervoor op COCEEPEN.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 318 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Abonneren op net hier

Ontdek meer over variabele lettertypen bij Generate CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Beeldkrediet: Getty / Bianca Berning / Future)

In haar gesprek bij het genereren van CSS, de gerichte CSS-conferentie voor webontwerpers die plaatsvinden op 26 september 2019 bij Rich Mix, Londen, zal Bianca Berning onderzoeken hoe variabele lettertypen nieuwe kansen kunnen creëren voor het geschreven woord binnen traditionele media, evenals nieuw, meeslepend woord ervaringen, zoals AR, VR en gemengde realiteit.

Als je dit en andere geweldige gesprekken wilt vangen, is het de moeite waard om nu je tickets op te zetten. Als je de jouwe vóór 15.00 uur UTC op 15 augustus grijpt, kunt u £ 50 besparen, slechts £ 199 + BTW betalen. Koop nu uw ticket

Gerelateerde artikelen:

3 manieren Tech verandert type
Ga aan de slag met variabele lettertypen in CSS
Transformeer uw type online met variabele lettertypen

4 stappen voor het gebruik van variabele lettertypen

01. Begrijp bijassen in variabele lettertypen

02. Gebruik een geregistreerde as

03. Stel aangepaste assen op

04. Combineer JavaScript en variabele lettertypen

Ontdek meer over variabele lettertypen bij Generate CSS

Procedures - Meest populaire artikelen

Hoe te tekenen perspectief

Hoe rimpels in Photoshop te verwijderen

21 stappen naar Super Speedy Javascript

Een gids voor webhulpmiddelen van Google

Een inleiding tot CSS Aangepaste eigenschappen

Maak een flexibele carrouselcomponent

Hoe heerlijke texturen te maken met potloden

Hoe de aquarelets van de schilder te combineren

Categorieën