Variabele fonts met een breedteas
Variabele families waarin naast het gewicht ook de letterbreedte instelbaar is, van lichte versmalling om tekst te laten passen tot een volledig bereik van smal tot breed.
Narrow to wide
Een variabel font slaat een ontwerp op als een bereik in plaats van als een reeks vaste stijlen. De meeste variabele families bieden een gewichtsas; een kleiner aantal voegt een breedteas toe, geregistreerd onder de tag wdth, die de letters smaller of breder maakt met behoud van hoogte en karakter. De waarden zijn percentages van de normale breedte: 75 is een smal gewicht, 100 het normale en 125 een brede.
Voor opmaakwerk is breedte vaak de praktischer van de twee assen. Hiermee laat je een kop exact in zijn kolom passen, een navigatielabel op een klein scherm samenpersen en op een groot scherm ontspannen, of een tabel pas op een smallere instelling overschakelen als de kolommen ruimte tekortkomen. In CSS is de eigenschap font-stretch, of font-variation-settings voor fijnere controle, en ze kan op breakpoints veranderen of worden geanimeerd.
Vergelijk de bereiken voordat je kiest. Meerdere families hier worden alleen smaller, van 100 naar ongeveer 75, genoeg om tekst te laten passen; twee worden alleen breder; andere lopen van de helft van de normale breedte tot het dubbele en zijn in feite meerdere lettertypes in één. De toelichtingen hieronder noemen elk bereik zoals het op de fontpagina staat. Een goed getekende breedteas past de lettervormen zelf aan, anders dan tekst kunstmatig samenpersen.
-
Roboto
Een breedteas van 75 tot 100 versmalt het ontwerp richting een smal gewicht, naast een gewicht van 100 tot 900 met cursieven.
-
Open Sans
De breedte loopt van 100 naar 75 om tekst te laten passen, in een humanistische sans met zes gewichten en cursieven.
-
Archivo
Breedte van 62 tot 125, extra smal tot breed, naast gewicht van Thin tot Black met cursieven.
-
Saira
Breedte van 50 tot 125 en gewicht van 100 tot 900 in een kantige sans, plus cursieven.
-
IBM Plex Sans
Een breedteas die de letters versmalt tot 75, met zeven gewichten en cursieven.
-
Inconsolata
Een monospace waarvan de breedteas loopt van 50 tot 200, de helft van de normale breedte tot het dubbele, naast een gewicht van 200 tot 900.
-
Noto Serif
Een tekstserif waarvan de breedteas versmalt van 100 tot 62,5, met negen gewichten en cursieven.
-
Merriweather
Een tekstserif met een bescheiden breedtebereik, 87 tot 112, naast assen voor gewicht en optische grootte.
-
Asap
Gewicht van 100 tot 900 en breedte van 75 tot 125, met cursieven.
De voorbeelden laden een eenvoudige Latijnse subset van elke familie. Elke familie hier heeft een open licentie; op de eigen pagina staan de voorwaarden en de originele bestanden.
Vragen over variabele fonts met een breedteas
Hoe stel ik de fontbreedte in met CSS?
Gebruik font-stretch met een percentage, bijvoorbeeld font-stretch: 85%, of font-variation-settings: "wdth" 85. De waarde moet binnen het bereik van het font liggen; waarden daarbuiten worden begrensd tot het dichtstbijzijnde uiteinde.
Is een breedteas hetzelfde als tekst horizontaal schalen?
Nee. Schalen vervormt lijndikte en rondingen. Een breedteas gebruikt vormen die voor elke breedte zijn getekend, zodat verticale en horizontale lijnen in verhouding blijven.
Werken variabele fonts in alle browsers en apps?
Actuele browsers en grote ontwerpprogramma’s ondersteunen ze. Oudere software toont soms alleen de standaardstijl, dus houd statische bestanden als terugvaloptie waar dat uitmaakt.
Mag ik deze variabele fonts commercieel gebruiken?
Ja. Op één na vallen ze onder de SIL Open Font License, die commercieel gebruik, insluiting en zelf hosten toestaat; Ubuntu Sans gebruikt de Ubuntu Font License, die commercieel gebruik ook toestaat. Elke fontpagina vermeldt de licentie.