Share
Variabla teckensnitt utvecklades som en gemensam insats för de fyra största tekniska företagen i typdesignen Apple, Google, Microsoft och Adobe. Som namnet antyder tillåter variabla teckensnitt att formgivare får ett obegränsat antal teckensvarianter från samma teckensnittfil. På detta sätt blir det möjligt att justera typsnittet till olika enheter, visningar, orienteringar och andra designbegränsningar.
Variabla teckensnitt reducerar signifikant begränsningarna för nuvarande typsnitt. Dagens webbfonter är oflexibla och skaler inte mycket bra; De ger oss bara några fasta stilar med namn som "Light", "Fet" eller "Extra Bold". Det finns även teckensnitt som bara har en vikt eller sned variant. Med variabla teckensnitt har vi dock tillgång till en oändlig flexibilitet av vikt, snedställd, x-höjd, plattor, avrundning och andra typografiska attribut.
Bättre än, variabla teckensnitt förbättrar prestanda. Webtexter som vi känner dem behöver varje typsnitt variant lagras i en separat fil. Det här är till exempel hur mappen på Robotos webbfont ser ut:
Innehållet i Roboto web font mappVariabla teckensnitt använder en enda typsnittfil som bara måste laddas upp en gång till. När den laddas, kan den tjäna alla varianter från bara den binära.
Så här är en kort jämförelse:
Som du redan kan föreställa dig växer våra typografiska alternativ otroligt med variabla teckensnitt.
Så vilket filformat använder variabla teckensnitt? Enligt de officiella dokumenten:
"OpenType-teckensnitt kan ha förlängningen .OTF eller .TTF, beroende på vilken typ av konturer i teckensnittet och skaparens önskan om kompatibilitet på system utan inbyggt OpenType-stöd."
För att vara fullständigt korrekt introducerades variabla teckensnitt i version 1.8 i OpenType-typfilspecifikationen. OpenType är en förlängning av TrueType-typsnittet, därför finns variabla teckensnitt som antingen .otf eller .ttf filer.
Den nya OpenType-fontfilspecifikationen levereras med en ny teknik som heter OpenType Font Variations som gör det möjligt för oss att interpolera typsnittet längs många designaxlar upp till 64 000 enligt Adobe Typekit Blog.
OpenType 1.8-specifikationen definierar fem registrerade axeltaggar:
Accentsconagua
Dessutom kan typkonstruktörer också definiera anpassade axlar tillsammans med sina egna fyrteckenstaggar i "namn" -tabellen i typsnittfilen.
Nedan kan du se en bra illustration av hur designaxlar fungerar (från John Hudsons artikel på Medium.com, refererad av Typekit som icke-officiellt meddelande om variabla teckensnitt). Det visar ett trefasigt variabelt teckensnitt med vikt, bredd och optisk storlek axlar:
John HudsonDen röda glyfen i mitten representerar uppsättningen konturer som är lagrade i teckensnittet, de gröna glyferna representerar ytterligheterna på de tre axlarna och de organdyfer representerar hörnpositionerna.
Hela kuben representerar det designutrymme vi har tillgång till om vi använder det här treaxliga variabla teckensnittet. Det är en kub bara eftersom teckensnittet har tre dimensioner (vikt, bredd, optisk storlek). Med färre axlar skulle vi flytta neråt mot en rektangel (2-axel) eller en linje (1-axel) och med fler axlar skulle vi flytta uppåt till en mångdimensionell hyperspace.
Och naturligtvis skulle en reell livs 3-axlig variabel typsnitt inte nödvändigtvis vara en kub men sannolikt en rektangulär kuboid, eftersom de olika axlarna i de flesta fall inte har samma längd.
Variable typsnitt tillåter fortfarande typdesigners att definiera namngivna instansspecifika typsnittvarianter bland obegränsat antal alternativ. Till exempel innehåller Adobes Variable Font Prototype två axlar (vikt och kontrast) och åtta namngivna instanser (Extra Light, Light, Regular, Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).
Namngivna instanser är viktigare om vi vill använda ett variabelt teckensnitt med designprogram som Adobe Illustrator. På webben kan vi enkelt generera alla instanser (namngivna eller icke namngivna) med CSS (till exempel i Adobe Variable Font, tar Extra Light-namnet instans minimivärdet för både vikt- och kontrastaxeln).
Vi kan lägga till variabla teckensnitt på en webbplats med hjälp av @ font-face-regeln högst upp i CSS-filen.
Till exempel kan vi lägga till Avenir Next-variabel typsnitt med följande CSS-regel:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") format ("truetype"); Du hittar flera variabla teckensnitt på Axis Praxis webbplats (det har också en lekplats för variabla teckensnitt), på GitHub sidor i olika typdesignföretag (t.ex. MonoType, Type Network) och Typekit har också börjat publicera variabla typsnittversioner av deras mest populära Adobe Originals-familjer.
Notera: inte alla OpenType-teckensnitt som du hittar på webben är ett variabelt teckensnitt (de introducerades endast med version 1.8).
För att definiera typsnittsvarianter kan vi använda font-variant-settings CSS-egenskapen introducerad med CSS-teckensnittsnivå 4. Det här är en lågnivåegenskap som tillåter oss att styra variabla teckensnitt genom att ange ett värde för varje axel.
Avenir Next variabla teckensnitt innehåller två designaxlar: vikt och bredd - båda är registrerade axlar. Avenir Next har också åtta namngivna instanser (Regular, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).
Avenir Next Bold CondensedDen fullständiga CSS (som hör till en slumpmässig namngiven fontvariant) ser så här ut:
kropp font-family: "Avenir Next Variable"; färg: rgb (0, 0, 0); typsnittstorlek: 148px; font-variation-inställningar: 'wght' 631.164, 'wdth' 88.6799;
Vi kan använda vilket värde som helst (jämnt flytnummer) för axlarna mellan min- och maxvärdena. Vid Avenir Next kan vi använda vikten [400, 900] och [75, 100] -intervallet för breddaxeln.
Var hittar du intervallen? Teckensnittsfilerna innehåller teckensnittsvariationer (fvar) -tabeller som innehåller nödvändiga data. För att komma åt den informationen behöver vi dock se innehållet i fontfilen med ett verktyg som FontView. Ibland innehåller dokumentationen av teckensnittet områdena, men det är tyvärr inte alltid fallet. Den goda nyheten är att Axis Praxis hemsida innehåller min-max-värdena för alla variabla teckensnitt som den innehåller.
Decovar är ett av de mest mångsidiga variabla teckensnitt som för närvarande finns. Du hittar den på Axis Praxis, på GitHub, och den har också en demosida på TypeNetworks hemsida. Decovar innehåller en registrerad (vikt) och fjorton anpassade axlar, och har också sjutton namngivna instanser.
Från Decovar's GitHub docs, här är några varianter som vi kan uppnå med denna 15-axliga variabel typsnitt:
Den CSS vi behöver använda liknar föregående exempel. Här måste vi definiera alla femton axlarna (inline, skjuvad, rundad platta, ränder, mask terminal, inline skelett, öppen inline terminal, inline terminal, mask, vikt, flared, rundad, mask skelett, plåt, bifurcated).
div font-family: decovar; färg vit; bakgrundsfärg: rgb (0, 162, 215); typsnittstorlek: 157.12px; text-align: left; padding-top: 20px; typsnitt variationsinställningar: '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' O, 'TRND' O, 'SWRM' O, 'TSLB' 277,155, 'TBIF' O;
Notera: Vi måste ange ett värde för alla axlar i font-variant-settings egendom - även de vi inte vill använda.
Vid Decovar kan vi använda 0 som värde för axlarna vi inte är intresserade av; Dessa kommer att göras med standardvärdet. Detta är inte alltid fallet, eftersom det beror på de områden som teckensnittet använder för de olika axlarna. Decovar är enkelt, eftersom det använder ett 0-1000-område för alla axlar, och 0 är standardvärdet för alla.
Du kan generera liknande font-variant-settings deklarationer med Axis Praxis behöver du inte beräkna värdena själv. CSS ovan genererar följande typsnitt variant:
Decovar anpassad typsnitt variantDe font-variant-settings Fastigheten är en fastighet och enligt W3C-rekommendationerna bör den endast användas om andra metoder inte är tillgängliga. Vad betyder det här exakt?
Enligt CSS 4-specifikationerna kommer vi att kunna styra registrerade axlar med högre CSS-egenskaper i framtiden, nämligen:
font-weight (kommer att styra WGHT axel)font-stretch (kommer att styra wdth axel)typsnitt (kommer att styra slnt och ital axlarna)font-optisk-limning (kommer att styra opsz axel)De tre första egenskaperna finns sedan CSS2, men CSS4-specifikationerna utvidgar användningen. Vi kommer att kunna använda dem inte bara med fördefinierade nyckelord (t.ex.. vanligt eller djärv för font-weight) eller runda nummer (t.ex.. 400, 600, 800, etc.), men också med alla tal på en fördefinierad skala (till exempel, font-weight kommer att sträcka sig mellan 1 och 1000 & font-stretch kommer att ligga mellan 50% och 200%).
Dessa funktioner är dock fortfarande i experimentfasen. Så för nu är det rimliga att fortsätta använda font-variant-settings, som för närvarande är det den mest stabila egenskapen för åtkomst till axlarna av variabla teckensnitt.
Eftersom variabla teckensnitt fortfarande är väldigt nytt är webbläsarsupport ännu inte perfekt. De senaste versionerna av Chrome och Safari stöder dem redan, men Edge och Firefox kvarstår fortfarande bakom (men variabla teckensnitt är redan tillgängliga i Firefox Nightly och Firefox Developer Edition). Sedan oktober 2017-utgåvan stödjer Photoshop och Illustrator också variabla teckensnitt.
Vi kan förvänta oss variabla teckensnitt för att ge otroliga förändringar till web typografiens värld. Eftersom det blir mer och mer stöd, är det dags att ta ett steg i att lära och experimentera. Kolla in följande resurser:
