Share
Variable skrifttyper ble utviklet som felles innsats av de fire største teknologibedrifter som er involvert i type design - Apple, Google, Microsoft og Adobe. Som navnet antyder, tillater variabel skrifter at designere skal utlede et ubegrenset antall skriftvarianter fra samme skriftfil. På denne måten blir det mulig å justere skrifttypen til forskjellige enheter, visningsporte, orienteringer og andre designbegrensninger.
Variable skrifttyper reduserer begrensningene for gjeldende skriftformater. Dagens webfonter er ufleksible og skaleres ikke veldig bra; De gir oss bare noen faste stilarter med navn som "Lys", "Fet" eller "Ekstra fet". Det er til og med skrifttyper som bare har en vekt eller skrå variant. Med variable skrifttyper har vi imidlertid tilgang til en uendelig fleksibilitet av vekt, skråstilling, x-høyde, plater, avrunding og andre typografiske egenskaper.
Enda bedre, variable skrifttyper forbedrer ytelsen. Nettskrifter som vi kjenner dem, trenger at hver skriftvariant skal lagres i en egen fil. For eksempel, dette er hvordan mappen til Roboto web font ser ut:
Innhold i Roboto web font mappeVariable skrifttyper bruker en enkelt skriftfil som nettleseren bare må laste inn en gang. Ved å bli lastet kan den betjene alle varianter fra bare den ene binære.
Så, her er en kort sammenligning:
Som du allerede kan forestille deg, vokser våre typografiske alternativer utrolig med variable skrifttyper.
Så hvilket filformat bruker variable skrifttyper? Ifølge de offisielle doksene:
"OpenType-skrifter kan ha forlengelsen .OTF eller .TTF, avhengig av hva slags skisser i fonten og skaperenes ønske om kompatibilitet på systemer uten native OpenType-støtte."
For å være helt nøyaktig ble variable skrifter introdusert i versjon 1.8 av OpenType-skriftfilspesifikasjonen. OpenType er en forlengelse av TrueType-skriftformatet, derfor er variabel skrifttyper tilgjengelig som enten .OTF eller .tTF filer.
Den nye OpenType-fontfilspesifikasjonen kommer med en ny teknologi, kalt OpenType Font Variations, som gjør at vi kan interpolere fonten sammen med mange designaksjer - opptil 64 000 i henhold til Adobe Typekit Blog.
OpenType 1.8-spesifikasjonen definerer fem registrerte akse-tagger:
Accentsconagua
Videre kan typedesignere også definere egendefinerte akser sammen med sine egne fire-tegn-koder i "navn" -tabellen i skrifttypefilen.
Nedenfor kan du se en flott illustrasjon av hvordan designaksene virker (fra John Hudsons artikkel på Medium.com, referert til av Typekit som den ikke-offisielle kunngjøringen om variable skrifttyper). Den demonstrerer en trefaset variabel skrifttype med vekt, bredde og optisk størrelse akser:
John HudsonDen røde glyfen i midten representerer settet av konturer som er lagret i skrifttypen, de grønne glyphene representerer ekstremer av de tre aksene, og oransje glyfer representerer hjørneposisjonene.
Hele kuben representerer designområdet vi har tilgang til hvis vi bruker denne tre-akse variabeltype. Det er bare en kube fordi fonten har tre dimensjoner (vekt, bredde, optisk størrelse). Med færre akser ville vi bevege seg nedover mot et rektangel (2-akse) eller en linje (1-akse) og med flere akser, ville vi bevege seg oppover til et flerdimensjonalt hyperspace.
Og selvfølgelig ville en virkelig 3-akse variabel skrifttype ikke nødvendigvis være en terning, men mer sannsynlig en rektangulær cuboid, da de forskjellige aksene i de fleste tilfeller ikke har samme lengde.
Variable skrifttyper tillater fortsatt at type designere definerer navngivne spesifikke skrifttypevarianter blant det ubegrensede antall alternativer. For eksempel inneholder Adobes Variable Font Prototype to akser (vekt og kontrast) og åtte navngitte forekomster (Ekstra lys, Lys, Vanlig, Semibold, Fet, Svart, Svart medium kontrast, Sort høy kontrast).
Navngitte forekomster er viktigere hvis vi vil bruke en variabel skrifttype med designprogrammer som Adobe Illustrator. På nettet kan vi enkelt generere noen forekomst (navngitt eller ikke-navngitt) med CSS (for eksempel i Adobe Variable Font, tar Ekstra Light navngitt forekomsten minimumsverdien av både vekt- og kontrastaksen).
Vi kan legge til variable skrifttyper på et nettsted ved hjelp av @ font-face-regelen øverst i CSS-filen.
For eksempel kan vi legge til Avenir Next variable font med følgende CSS-regel:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") format ("truetype"); Du finner flere variabel skrifttyper på Axis Praxis nettside (den har også en lekeplass for variable skrifttyper), på GitHub-sidene i forskjellige type designfirmaer (f.eks. MonoType, Type Network), og Typekit har også begynt å publisere variabelen skrifttypeversjoner av deres mest populære Adobe Originals-familier.
Merk: ikke alle OpenType-skrifttyper du finner på nettet, er en variabel skrifttype (de ble introdusert bare med versjon 1.8).
For å definere skriftvariasjoner kan vi bruke font-variasjon-innstillinger CSS-egenskap introdusert med CSS-fontmodulnivå 4. Dette er en lavnivåegenskap som tillater oss å styre variable skrifttyper ved å spesifisere en verdi for hver akse.
Avenir Neste variabel skrifttype inneholder to designakser: vekt og bredde - begge er registrerte akser. Avenir Next har også åtte navngitte forekomster (Regular, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).
Avenir Next Bold CondensedDen fulle CSS (som tilhører en tilfeldig, navngitt fontvariasjon) ser slik ut:
kropp font-family: "Avenir Next Variable"; farge: rgb (0, 0, 0); skriftstørrelse: 148px; font-variasjon-innstillinger: 'wght' 631.164, 'wdth' 88.6799;
Vi kan bruke en hvilken som helst verdi (selv flyte tall) for aksene mellom min og max verdiene. I tilfelle av Avenir Next, kan vi bruke vekten [400, 900] og [75, 100] -området for breddeaksen.
Hvor finner du serien? Skriftfilene inneholder skrifttypevariasjonstabellene (fvar) som inneholder de nødvendige dataene. For å få tilgang til denne informasjonen må vi imidlertid se innholdet i fontfilen med et verktøy som FontView. Noen ganger inneholder dokumentasjonen av fontene områdene, men dessverre er dette ikke alltid tilfelle. Den gode nyheten er at Axis Praxis nettside inneholder min-max-verdiene for alle de variable skriftene den inneholder.
Decovar er en av de mest allsidige variabelt skrifttyper som eksisterer. Du finner den på Axis Praxis, på GitHub, og den har også en demoside på TypeNetworks nettside. Decovar inneholder en registrert (vekt) og fjorten tilpassede akser, og har også sytten navngitte forekomster.
Fra Decovars GitHub docs er det noen varianter vi kan oppnå med denne 15-akse variabel skrifttypen:
CSS vi trenger å bruke er lik det forrige eksempelet. Her må vi definere alle de femten aksene (inline, skjæret, avrundet flate, striper, ormterminal, inline skjelett, åpen inline terminal, inline terminal, orm, vekt, flared, avrundet, maske skjelett, plate, bifurcated).
div font-family: Decovar; farge: hvit; bakgrunnsfarge: rgb (0, 162, 215); skriftstørrelse: 157.12px; tekstjustering: venstre; polstring: 20px; font-variasjon-innstillinger: '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;
Merk: Vi må spesifisere en verdi for alle aksene i font-variasjon-innstillinger eiendom-selv de vi ikke vil bruke.
I tilfelle av Decovar kan vi bruke 0 som verdi for aksene vi ikke er interessert i; Disse blir gjengitt med standardverdien. Dette er ikke alltid tilfelle skjønt, da det avhenger av områdene som fonten bruker for de forskjellige aksene. Decovar er enkelt, da det bruker et 0-1000-område for alle akser, og 0 er standardverdien for alle.
Du kan generere lignende font-variasjon-innstillinger erklæringer med Axis Praxis, trenger du ikke å beregne verdiene på egen hånd. CSS ovenfor genererer følgende skriftvariant:
Decovar tilpasset skriftvariantDe font-variasjon-innstillinger Eiendommen er en eiendom på lavt nivå, og i henhold til W3C-anbefalingene bør det bare brukes hvis andre metoder ikke er tilgjengelige. Hva betyr dette akkurat?
I henhold til CSS 4-spesifikasjonene vil vi kunne kontrollere registrerte akser med høyere CSS-egenskaper i fremtiden, nemlig:
font-vekt (vil kontrollere WGHT akser)font-strekning (vil kontrollere wdth akser)fontstil (vil kontrollere slnt og ital akser)font-optisk-sizing (vil kontrollere opsz akser)De tre første egenskapene eksisterer siden CSS2, men CSS4-spesifikasjonene utvider bruken. Vi vil kunne bruke dem ikke bare med forhåndsdefinerte søkeord (f.eks. normal eller modig til font-vekt) eller runde tall (f.eks. 400, 600, 800, etc.), men også med alle tall på en forhåndsdefinert skala (for eksempel, font-vekt vil variere mellom 1 og 1000 & font-strekning vil variere mellom 50% og 200%).
Disse funksjonene er imidlertid fortsatt i forsøksfasen. Så for nå er det rimelig å fortsette å bruke font-variasjon-innstillinger, som for øyeblikket er dette den mest stabile egenskapen for å få tilgang til aksene til variable skrifttyper.
Ettersom variable skrifttyper fortsatt er veldig nye, er nettleserstøtte ennå ikke perfekt. De nyeste versjonene av Chrome og Safari støtter dem allerede, men Edge og Firefox lagrer seg fortsatt (men variabel skrifttyper er allerede tilgjengelige i Firefox Nightly og Firefox Developer Edition). Siden oktober 2017-utgivelsen støtter Photoshop og Illustrator også variabelfonter.
Vi kan forvente variable skrifttyper for å gi utrolige endringer i verdenen av webtypografi. Da det blir stadig mer støtte, er det på tide å ta en sjanse til å lære og eksperimentere. Sjekk ut følgende ressurser:
