variable variabele fonts lettertype

Wat zijn variabele lettertypes. Welke voordelen ze bieden en hoe we ze in ons werk kunnen gebruiken. Variable fonts zijn lettertype variaties binnen één lettertypebestand die zich in grootte, breedte en lengte aanpassen. Je kan met 1 lettertype duizenden combinaties maken.

variable variabele fonts lettertype in webbrowsers

Laten we eerst eens bekijken hoe typografie op het web werkt, en welke vernieuwingen variabele lettertypes met zich meebrengen. Vanaf mei 2020 worden variabele lettertypes ondersteund in de meeste browsers.

De termen font en lettertype worden vaak door elkaar gebruikt door ontwikkelaars. Er is echter een verschil:

• Een lettertype is het onderliggende visuele ontwerp dat kan bestaan in veel verschillende typesetting technologieën
• en lettertype is een van deze implementaties, in een digitaal bestandsformaat.

Met andere woorden, een lettertype is wat je ziet, en het font is wat je gebruikt.
Een ander concept dat vaak over het hoofd wordt gezien, is het onderscheid tussen een stijl en een familie. Een stijl is een enkel specifiek lettertype, zoals Bold Italic, en een familie is de volledige reeks stijlen.
Voordat er sprake was van variabele lettertypes, werd elke stijl geïmplementeerd als een apart lettertypebestand. Met variabele lettertypes kunnen alle stijlen in één enkel bestand worden opgenomen.

Structuur en anatomie van een variabel lettertype

Variabele lettertypes pakken deze uitdagingen aan door stijlen in één enkel bestand samen te brengen.
Dit werkt door te beginnen met een centrale of ‘standaard’ stijl, meestal de ‘Regular’- een rechtopstaand romeins ontwerp met het meest typische gewicht en breedte dat het meest geschikt is voor gewone tekst. Deze wordt vervolgens verbonden met andere stijlen in een doorlopend bereik, een ‘as’ genoemd.

Gewicht / Weight

De meest voorkomende as is Weight, die de standaardstijl kan verbinden tot en met een Bold-stijl. Elke individuele stijl kan zich langs een as bevinden, en wordt een “instantie” van het variabele lettertype genoemd. Sommige instanties hebben een naam gekregen van de ontwikkelaar van het lettertype, bijvoorbeeld Gewicht 600 heet SemiBold.
Het variabele lettertype Roboto Flex heeft drie stijlen voor zijn Gewichtsas. De stijl Regular bevindt zich in het midden, en er zijn twee stijlen aan de tegenovergestelde uiteinden van de as, de ene lichter en de andere zwaarder. Tussen deze stijlen kunt u kiezen uit 900 exemplaren:

Roboto Flex in willekeurige combinaties van breedte en gewicht

Dit betekent dat er duizenden stijlen zijn! Dit lijkt misschien een enorme overkill, maar de kwaliteit van de leeservaring kan opmerkelijk verbeterd worden door deze diversiteit aan letterstijlen. En, als het zonder prestatieverlies is, kunnen webontwikkelaars zo veel of zo weinig stijlen gebruiken als ze willen – het hangt van hun ontwerp af.

Cursief variabel font

De manier waarop cursief wordt behandeld in variabele lettertypes is interessant.
Lees meer over cursief en schuingedrukte tekst

Definities van as variabel lettertype

Er zijn vijf geregistreerde assen, die bekende, voorspelbare kenmerken van het lettertype bepalen: gewicht, breedte, optische grootte, schuinte en cursief. Daarnaast kan een lettertype aangepaste assen bevatten. Deze kunnen elk ontwerpaspect van het lettertype regelen dat de letterontwerper wenst: de grootte van de schreef, de lengte van de streepjes, de hoogte van de opgaande streepjes of de grootte van de punt op de i.
Hoewel assen hetzelfde kenmerk kunnen regelen, kunnen ze verschillende waarden gebruiken. In de variabele lettertypes Oswald en Hepta Slab is er bijvoorbeeld maar één as beschikbaar, Gewicht, maar de bereiken zijn verschillend – Oswald heeft hetzelfde bereik als voordat het werd geüpgraded om variabel te zijn, 200 tot 700, maar Hepta Slab heeft een extreem haarlijngewicht op 1 dat helemaal tot 900 gaat.
De vijf geregistreerde assen hebben 4-tekens in kleine letters die worden gebruikt om hun waarden in CSS in te stellen:

As namen en CSS waarden

Gewicht: wght
Breedte: wdth
Schuine zijde: slnt
Optische grootte: opsz
Cursief: ital

Aangezien de ontwikkelaar van het lettertype bepaalt welke assen beschikbaar zijn in een variabel lettertype, en welke waarden ze kunnen hebben, is het van essentieel belang uit te zoeken wat elk lettertype biedt. De documentatie van het lettertype zou dit moeten verschaffen, of u kunt het lettertype inspecteren met een hulpmiddel zoals Wakamai Fondue.

Variabele lettertypes in CSS

Laden van variabele lettertype bestanden #
Variabele lettertypes worden geladen via hetzelfde @font-face mechanisme als traditionele statische web lettertypes, maar met twee nieuwe uitbreidingen:

@font-face{ font-display:swap;
font-family: ‘Roboto Flex’;
src: url(‘RobotoFlex-VF.woff2’) format(‘woff2 supports variations’),
url(‘RobotoFlex-VF.woff2’) format(‘woff2-variations’);
font-weight: 100 1000;
font-stretch: 25% 151%;
}

Gewichten en breedtes gebruiken

Op dit moment zijn de assen die je betrouwbaar vanuit CSS kunt instellen de gewicht-as via font-weight, en de breedte-as via font-stretch.
Traditioneel zou je font-weight instellen als een sleutelwoord (licht, vet) of als een numerieke waarde tussen 100 en 900, in stappen van 100. Met variabele lettertypes kun je elke waarde binnen het bereik van de breedte van het lettertype instellen:

.licht-voorbeeld {
font-weight: 128;
}

.lekker-vet {
font-weight: 1000;
}

Gebruik van cursief en italic

De cursief-as is bedoeld voor lettertypes die zowel een normale stijl, als een cursieve stijl bevatten. De as is bedoeld als een aan/uit-schakelaar: waarde 0 is uit en toont de normale stijl, waarde 1 toont de cursieve stijl. In tegenstelling tot andere assen, is er geen overgang. Een waarde van 0.5 zal je geen “half cursief” geven.
De slnt-as verschilt van cursief in die zin dat het geen nieuwe stijl is, maar gewoon de normale stijl schuin houdt. Standaard is de waarde 0, wat de standaard rechte lettervormen betekent. Roboto Flex heeft een maximum schuinte van -10 graden, wat betekent dat de letters naar rechts leunen als ze van 0 naar -10 gaan.
Het zou intuïtief zijn om deze as in te stellen via de font-style eigenschap, maar vanaf april 2020 wordt nog steeds uitgewerkt hoe dit precies moet. Dus voor nu, moet je deze assen behandelen als aangepaste assen, en ze instellen via font-variation-settings:

i, em, .italic {
/* Moet zijn font-style: cursief; */
font-variation-settings: ‘ital’ 1;
}

.schuin {
/* Moet zijn font-style: schuin 10deg; */
font-variation-settings: ‘slnt’ 10;
}

Voorbeelden variabele fonts

Enkele voorbeelden variabele fonts vind je hier. Ik zal dit t.z.t. nog uitbreiden:

Inter google web font variabel lettertype

9 maart 2022 Geen reacties

Inter als alternatief lettertype voor Helvetica Inter is een lettertype dat speciaal is ontworpen voor…

Lees meer

Outfit variabel google web font letter voorbeeld typo

9 maart 2022 Geen reacties

De Outfit google web font letter is ontworpen door On Brand Investments Pty Ltd door…

Lees meer

Tot slot over variabele lettertypes

Ik heb zelf een methode uitgevonden om de Gulden snede toe te passen op variabele fonts. Neem contact op. Dan leg ik het uit hoe je dit aanpakt met variabele lettertypes.