Share
Variabele lettertypen werden ontwikkeld als de gezamenlijke inspanning van de vier grootste technologiebedrijven die betrokken zijn bij het ontwerpen van het type: Apple, Google, Microsoft en Adobe. Zoals de naam al doet vermoeden, stellen variabele lettertypen ontwerpers in staat om een onbeperkt aantal lettertypevarianten te ontlenen aan hetzelfde lettertypebestand. Op deze manier wordt het mogelijk om het lettertype aan te passen aan verschillende apparaten, viewports, oriëntaties en andere ontwerpbeperkingen.
Variabele lettertypen verminderen de beperkingen van de huidige lettertype-indelingen aanzienlijk. De huidige weblettertypen zijn niet flexibel en schalen niet erg goed; ze voorzien ons alleen van een aantal vaste stijlen met namen als "Light", "Bold" of "Extra Bold". Er zijn zelfs letterbeelden die slechts één gewichts- of schuine variant hebben. Met variabele lettertypen hebben we echter toegang tot een oneindige flexibiliteit van gewicht, helling, x-hoogte, platen, afronding en andere typografische kenmerken.
Sterker nog, variabele lettertypen verbeteren de prestaties. Weblettertypen zoals wij die kennen, moeten elke lettertypevariant in een afzonderlijk bestand opslaan. Zo ziet bijvoorbeeld de map van het Roboto-weblettertype eruit:
Inhoud van Roboto weblettertype mapVariabele lettertypen gebruiken een enkel lettertypebestand dat de browser maar één keer hoeft te laden. Bij het laden kan het alle varianten van slechts dat ene binaire bestand dienen.
Dus, hier is een korte vergelijking:
Zoals je je al kunt voorstellen, groeien onze typografische opties ongelooflijk met variabele lettertypen.
Dus welk bestandsformaat gebruiken variabele lettertypen? Volgens de officiële documenten:
"OpenType-lettertypen hebben mogelijk de extensie .OTF of .TTF, afhankelijk van het soort contouren in het lettertype en de wens van de maker om compatibel te zijn op systemen zonder native OpenType-ondersteuning."
Om volledig accuraat te zijn, werden variabele lettertypen geïntroduceerd in versie 1.8 van de OpenType-specificatie van het lettertypebestand. OpenType is een uitbreiding van de TrueType-lettertypeformaat, daarom zijn variabele lettertypen beschikbaar als een van beide .OTF of .ttf bestanden.
De nieuwe specificatie van het OpenType-lettertypebestand wordt geleverd met een nieuwe technologie met de naam OpenType-lettertypevariaties waarmee we het lettertype langs talrijke ontwerpassen kunnen interpoleren - maximaal 64.000 volgens het Adobe Typekit-blog.
De OpenType 1.8-specificatie definieert vijf geregistreerde as-tags:
Accentsconagua
Bovendien kunnen typedesigners ook aangepaste assen samen met hun eigen viertagslabels definiëren in de tabel 'naam' van het lettertypebestand.
Hieronder ziet u een geweldige illustratie van hoe ontwerpassen werken (uit het artikel van John Hudson op Medium.com, waarnaar Typekit verwijst als de niet-officiële aankondiging van variabele lettertypen). Het toont een variabel lettertype met drie assen met assen voor gewicht, breedte en optische maat:
John HudsonDe rode glyph in het midden geeft de reeks contouren weer die in het lettertype is opgeslagen, de groene glyphs vertegenwoordigen de extremen van de drie assen en de oranje glyphs vertegenwoordigen de hoekposities.
De hele kubus vertegenwoordigt de ontwerpruimte waartoe we toegang hebben als we dit variabele font met drie assen gebruiken. Het is alleen een kubus omdat het lettertype drie dimensies heeft (gewicht, breedte, optische grootte). Met minder assen zouden we naar beneden gaan in de richting van een rechthoek (2-as) of een lijn (1-as) en met meer assen zouden we omhoog gaan naar een multidimensionale hyperspace.
En natuurlijk is een realistisch 3-assig variabel lettertype niet per se een kubus maar waarschijnlijk een rechthoekig blokje, omdat de verschillende assen in de meeste gevallen niet dezelfde lengte hebben.
Variabele lettertypen staan nog steeds toe dat typontwerpers benoemde instances-specifieke lettertype-varianten definiëren onder het onbeperkte aantal opties. Het Variable Font-prototype van Adobe bevat bijvoorbeeld twee assen (gewicht en contrast) en acht benoemde exemplaren (Extra licht, Licht, Normaal, Semibold, Vet, Zwart, Zwart gemiddeld contrast, Zwart hoog contrast).
Benoemde instanties zijn belangrijker als we een variabel lettertype willen gebruiken met ontwerpprogramma's zoals Adobe Illustrator. Op internet kunnen we eenvoudig elke instantie (benoemde of niet benoemde) genereren met CSS (bijvoorbeeld in het Adobe Variable Font neemt de instantie met het Extra Light-naam de minimumwaarde van zowel de gewichts- als de contrastas).
We kunnen variabele lettertypen toevoegen aan een website met behulp van de regel @ font-face bovenaan in het CSS-bestand.
We kunnen bijvoorbeeld het Avenir Next-variabele lettertype toevoegen met de volgende CSS-regel:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") formaat ("truetype"); U vindt meer variabele lettertypen op de Axis Praxis-website (het heeft ook een speeltuin voor variabele lettertypen), op de GitHub-pagina's van verschillende typeontwerpbedrijven (bijv. MonoType, Type Network), en Typekit is ook begonnen met het publiceren van de variabeletekstversies van hun meest populaire Adobe Originals-families.
Notitie: niet elk OpenType-lettertype dat u op internet vindt, is een variabel lettertype (ze zijn alleen met versie 1.8 geïntroduceerd).
Om lettertypevariaties te definiëren, kunnen we de font-variant-settings CSS-eigenschap geïntroduceerd met de CSS Font Module Level 4. Dit is een low-level eigenschap waarmee we variabele fonts kunnen beheren door een waarde voor elke as op te geven.
Het variabele font Avenir Next bevat twee ontwerpassen: gewicht en breedte: beide zijn geregistreerde assen. Avenir Next heeft ook acht benoemde instanties (Normaal, Gemiddeld, Vet, Zwaar, Gecondenseerd, Gemiddeld Gecondenseerd, Vet Gecondenseerd, Zwaar Condenserend).
Avenir Next Bold CondensedDe volledige CSS (behorend tot een willekeurige naamloze lettertype-variant) ziet er als volgt uit:
body font-family: "Avenir Next Variable"; kleur: rgb (0, 0, 0); lettergrootte: 148 px; lettertype-variatie-instellingen: 'wght' 631.164, 'wdth' 88.6799;
We kunnen elke waarde (zelfs zwevende getallen) gebruiken voor de assen tussen de min- en max-waarden. In het geval van Avenir Next kunnen we het bereik [400, 900] voor het gewicht en het bereik [75, 100] voor de breedte-as gebruiken.
Waar vind je de bereiken? De lettertypebestanden bevatten de font variation (fvar) tabellen die de benodigde gegevens bevatten. Om toegang tot die informatie te krijgen, moeten we de inhoud van het lettertypebestand bekijken met een tool zoals FontView. Soms bevat de documentatie van het lettertype de bereiken, maar helaas is dit niet altijd het geval. Het goede nieuws is dat de Axis Praxis-website de min-max-waarden bevat voor alle variabele lettertypen die het bevat.
Decovar is een van de meest veelzijdige variabele lettertypen die momenteel bestaat. Je vindt het op Axis Praxis op GitHub en het heeft ook een demopagina op de website van TypeNetwork. Decovar bevat één geregistreerde (gewicht) en veertien aangepaste assen en heeft ook zeventien benoemde exemplaren.
Van de GitHub-documenten van Decovar zijn hier enkele varianten die we kunnen bereiken met dit variabele font met 15 assen:
De CSS die we moeten gebruiken is vergelijkbaar met het vorige voorbeeld. Hier moeten we alle vijftien assen definiëren (inline, geschoren, afgeronde plak, strepen, wormterminal, inline skelet, open inline terminal, inline terminal, worm, gewicht, uitlopende, afgerond, wormskelet, plak, gespleten).
div font-family: Decovar; kleur wit; achtergrondkleur: rgb (0, 162, 215); tekengrootte: 157.12px; text-align: left; padding-top: 20px; lettertype-variatie-instellingen: 'INLN' 285.094, 'TSHR' 346.594, 'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 'TOIL' 0, 'TINL' 91.983, 'WORM' 0 , 'wght' 400, 'TFLR' 0, 'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
Notitie: we moeten een waarde opgeven voor alle assen in de font-variant-settings eigendom, zelfs degenen die we niet willen gebruiken.
In het geval van Decovar kunnen we gebruiken 0 als waarde voor de assen waar we niet in geïnteresseerd zijn; deze worden weergegeven met de standaardwaarde. Dit is echter niet altijd het geval, omdat dit afhangt van de bereiken die het lettertype gebruikt voor de verschillende assen. Decovar is eenvoudig, omdat het een bereik van 0-1000 voor alle assen gebruikt en 0 de standaardwaarde voor iedereen is.
U kunt gelijkaardig genereren font-variant-settings aangiften met Axis Praxis, hoeft u de waarden niet zelf te berekenen. De bovenstaande CSS genereert de volgende lettertypevariant:
Aangepaste lettertypevariant van DecovarDe font-variant-settings eigenschap is een eigenschap op een laag niveau en moet volgens de W3C-aanbevelingen alleen worden gebruikt als andere methoden niet beschikbaar zijn. Wat betekent dit precies??
Volgens de CSS 4-specificaties zullen we in de toekomst geregistreerde assen met CSS-eigenschappen van hoger niveau kunnen beheren, namelijk:
lettertype dikte (controleert de WGHT as)font-stretch (controleert de WDTH as)lettertype (controleert de slnt en ital assen)font-optische-sizing (controleert de opsz as)De eerste drie eigenschappen bestaan sinds CSS2, maar de CSS4-specificaties breiden hun gebruik uit. We kunnen ze niet alleen gebruiken met voorgedefinieerde zoekwoorden (bijv. normaal of stoutmoedig voor lettertype dikte) of ronde getallen (bijv. 400, 600, 800, etc.), maar ook met alle nummers op een vooraf gedefinieerde schaal (bijvoorbeeld, lettertype dikte zal variëren tussen 1 en 1000 & font-stretch zal variëren tussen 50% en 200%).
Deze functies bevinden zich echter nog in de experimentele fase. Dus voor nu is het verstandig om te blijven gebruiken font-variant-settings, zoals momenteel is dit de meest stabiele eigenschap voor toegang tot de assen van variabele lettertypen.
Aangezien variabele lettertypen nog steeds erg nieuw zijn, is browserondersteuning nog niet perfect. De nieuwste versies van Chrome en Safari ondersteunen ze al, maar Edge en Firefox blijven nog steeds achter (hoewel variabele lettertypen al beschikbaar zijn in Firefox Nightly en Firefox Developer Edition). Sinds de release van oktober 2017 ondersteunen Photoshop en Illustrator ook variabele lettertypen.
We kunnen verwachten dat variabele lettertypen ongelooflijke veranderingen brengen in de wereld van webtypografie. Omdat het steeds meer ondersteuning krijgt, is het tijd om een duik te nemen in leren en experimenteren. Bekijk de volgende bronnen:
