Variabele fonts met ongewone assen
Experimentele en expressieve variabele fonts met eigen assen: zachtheid, stuiteren, losheid, morphing, rotatie, grade en meer.
Push the slider
Het variabele fontformaat maakt van elke eigenschap van een ontwerp een as. Vijf daarvan zijn geregistreerd en gangbaar: gewicht, breedte, helling, cursief en optische grootte. Daarbuiten kan een ontwerper een as verzinnen voor alles wat het lettertype zinvol kan variëren, en die een tag van vier hoofdletters geven. Die vrijheid heeft de laatste jaren inventieve letters opgeleverd.
Eigen assen vallen in een paar groepen uiteen. Parametrische assen sturen één meetbaar kenmerk, zoals de dikte van dunne lijnen of de hoogte van de onderkast, en zijn gereedschap voor fijne typografische aanpassing. Grade verandert hoe zwaar tekst eruitziet zonder de breedte te veranderen, zodat regels niet opnieuw afbreken, wat handig is voor de donkere modus. Expressieve assen veranderen het karakter van de letters: zachtere hoeken, een informele wiebel, een stuiter langs de basislijn, uitlopers als van schreven. En sommige assen zijn puur concept: ze koppelen de vorm van de letters aan data of laten ze in de ruimte draaien.
In CSS stel je elke eigen as in met font-variation-settings, met de tag en een getal. Omdat ze doorlopend zijn, kunnen assen worden geanimeerd of gekoppeld aan scrollen en invoer. De toelichtingen hieronder noemen per font de eigen assen zoals ze zijn vastgelegd.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
De assen Softness en Wonky naast gewicht en optische grootte.
-
Roboto Flex
13 assen, met parametrische regelaars voor lijndikte en letterhoogtes.
-
Google Sans Flex
Zes assen: gewicht, breedte, optische grootte, grade, ronding en helling.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Een as voor de hoogte van de onderkast naast gewicht, breedte en optische grootte.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
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 ongewone assen
Hoe gebruik ik een eigen as in CSS?
Schrijf font-variation-settings met de astag tussen aanhalingstekens en een waarde, bijvoorbeeld "SOFT" 100. Eigen tags zijn hoofdlettergevoelig en worden in hoofdletters geschreven.
Kunnen assen van variabele fonts worden geanimeerd?
Ja. Aswaarden kunnen in CSS worden overgevloeid of geanimeerd en met JavaScript worden aangestuurd, omdat het doorlopende getallen zijn.
Waar dient een grade-as voor?
Hij laat tekst lichter of zwaarder ogen zonder de letterbreedtes te veranderen, zodat de lay-out niet verschuift. Ontwerpers gebruiken hem om donkere achtergronden of verschillende schermen te compenseren.