# Variabele fonts met ongewone assen

> Experimentele en expressieve variabele fonts met eigen assen: zachtheid, stuiteren, losheid, morphing, rotatie, grade en meer.

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.

How these were chosen: Variabele families waarvan de gegevens minstens één eigen as vermelden naast de geregistreerde assen voor gewicht, breedte, helling, cursief en optische grootte.

## Fonts (16)

- [Recursive](https://trendhub.net/nl/fonts/recursive.markdown) (Sans serif, 16 stijlen · variabel, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
- [Fraunces](https://trendhub.net/nl/fonts/fraunces.markdown) (Serif, 18 stijlen · variabel, OFL): De assen Softness en Wonky naast gewicht en optische grootte.
- [Roboto Flex](https://trendhub.net/nl/fonts/roboto-flex.markdown) (Sans serif, 20 stijlen · variabel, OFL): 13 assen, met parametrische regelaars voor lijndikte en letterhoogtes.
- [Google Sans Flex](https://trendhub.net/nl/fonts/google-sans-flex.markdown) (Sans serif, 18 stijlen · variabel, OFL): Zes assen: gewicht, breedte, optische grootte, grade, ronding en helling.
- [Commissioner](https://trendhub.net/nl/fonts/commissioner.markdown) (Sans serif, 18 stijlen · variabel, OFL): Flare and Volume axes grow serif-like endings on a humanist sans.
- [Geologica](https://trendhub.net/nl/fonts/geologica.markdown) (Sans serif, 18 stijlen · variabel, OFL): Cursive and Sharpness axes beside weight and slant.
- [Shantell Sans](https://trendhub.net/nl/fonts/shantell-sans.markdown) (Handschrift, 12 stijlen · variabel, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font.
- [Nunito Sans](https://trendhub.net/nl/fonts/nunito-sans.markdown) (Sans serif, 16 stijlen · variabel, OFL): Een as voor de hoogte van de onderkast naast gewicht, breedte en optische grootte.
- [Science Gothic](https://trendhub.net/nl/fonts/science-gothic.markdown) (Sans serif, 18 stijlen · variabel, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
- [Signika](https://trendhub.net/nl/fonts/signika.markdown) (Sans serif, 5 stijlen · variabel, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
- [Kumbh Sans](https://trendhub.net/nl/fonts/kumbh-sans.markdown) (Sans serif, 9 stijlen · variabel, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight.
- [Akshar](https://trendhub.net/nl/fonts/akshar.markdown) (Sans serif, 5 stijlen · variabel, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari.
- [AR One Sans](https://trendhub.net/nl/fonts/ar-one-sans.markdown) (Sans serif, 4 stijlen · variabel, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
- [Honk](https://trendhub.net/nl/fonts/honk.markdown) (Display, 1 stijl · variabel, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
- [Kablammo](https://trendhub.net/nl/fonts/kablammo.markdown) (Display, 1 stijl · variabel, OFL): A Morph axis makes its doodle-covered capitals shift and dance.
- [Tilt Neon](https://trendhub.net/nl/fonts/tilt-neon.markdown) (Display, 1 stijl · variabel, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y.

## FAQs

### 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.

## Related collections

- [Variabele fonts met een breedteas](https://trendhub.net/nl/fonts/for/variable-fonts-with-a-width-axis.markdown)
- [Variabele fonts met een as voor optische grootte](https://trendhub.net/nl/fonts/for/variable-fonts-with-optical-size.markdown)
- [Futuristische displayfonts voor sf-titels en logo’s](https://trendhub.net/nl/fonts/for/futuristic-display-fonts.markdown)
- [Pixel- en arcadefonts](https://trendhub.net/nl/fonts/for/pixel-and-arcade-fonts.markdown)
- [Handschriftfonts voor notities, citaten en persoonlijke accenten](https://trendhub.net/nl/fonts/for/handwriting-fonts.markdown)
- [Fontfamilies met negen gewichten en cursieven](https://trendhub.net/nl/fonts/for/font-families-with-nine-weights.markdown)

---

Source: https://trendhub.net/nl/fonts/for/variable-fonts-with-unusual-axes (trendhub)
