Variabele fonts met een as voor optische grootte
Variabele families die zich opnieuw tekenen voor het formaat waarop ze staan: steviger en losser klein, fijner en strakker groot.
Small print, big type
In loden letters werd elk formaat apart gesneden, en de stempelsnijders pasten het ontwerp onderweg aan. Kleine formaten werden breder en steviger gemaakt, met een lossere spatiëring, zodat ze op de pagina overeind bleven; grote formaten werden verfijnd, met dunnere haarlijnen en een strakkere pasvorm. Digitale fonts verloren dit toen één contour naar elk formaat werd geschaald. De as voor optische grootte, met de tag opsz, brengt het terug.
In een font met deze as komt de waarde normaal overeen met het formaat in punten. Bij een lage waarde hebben de letters een grotere x-hoogte, dikkere dunne lijnen en meer ruimte ertussen. Bij een hoge waarde wordt het contrast scherper en worden details fijner. In de praktijk kan één familie zowel tekstfont als displayfont zijn, en blijft een onderschrift leesbaar zonder zwaar te ogen.
Browsers passen de as automatisch toe: font-optical-sizing staat standaard op auto, dus een font met de as past zich zonder extra code aan de lettergrootte aan. Je kunt hem ook met de hand instellen om bewust het displayontwerp klein of het tekstontwerp groot te gebruiken. De bereiken lopen sterk uiteen, van een aanpassing van een paar punten alleen voor tekst tot een bereik van meer dan duizend; de toelichtingen geven ze zoals ze zijn vastgelegd.
-
Inter
Optische grootte van 14 tot 32 stemt een schermsans af op kleine labels en grotere koppen, naast negen gewichten met cursieven.
-
DM Sans
Optische grootte van 9 tot 40 op een geometrische sans met laag contrast.
-
Merriweather
Een tekstserif waarvan de optische grootte van 18 tot 144 loopt, met gewichts- en breedteassen.
-
Bricolage Grotesque
Optische grootte van 12 tot 96, met overdreven inktvallen aan de kleine kant, naast gewicht en breedte.
-
Nunito Sans
Een klein bereik voor optische grootte, 6 tot 12, tussen vier assen met gewicht, breedte en hoogte van de onderkast.
-
Source Serif 4
Optische grootte van 8 tot 60 in een overgangsserif, met acht gewichten en cursieven.
-
Newsreader
Een as voor optische grootte van 6 tot 72, met gewichten van 200 tot 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Optische grootte van 9 tot 144 naast de assen gewicht, Softness en Wonky.
-
Bodoni Moda
Een serif met hoog contrast waarvan de optische grootte van 6 tot 96 loopt.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
Optische grootte van 8 tot 144 is een van de 13 assen in één bestand.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
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 as voor optische grootte
Wat verandert optische grootte in een font?
Lijncontrast, spatiëring, x-hoogte en fijne details. Kleine optische groottes zijn steviger en opener; grote zijn scherper en strakker gespatieerd.
Moet ik CSS schrijven om optische grootte te gebruiken?
Meestal niet. Browsers stemmen de as automatisch af op de lettergrootte. Wil je dat overschrijven, stel dan font-variation-settings: "opsz" in, gevolgd door een waarde binnen het bereik van het font.
Wat is beter, een as voor optische grootte of aparte tekst- en displayfonts?
Ze bereiken hetzelfde. De as is handiger, dekt ook de formaten ertussen en heeft maar één bestand nodig.