Share
Fonturile variabile au fost dezvoltate ca efort comun al celor mai mari patru companii de tehnologie implicate în proiectarea de tip - Apple, Google, Microsoft și Adobe. După cum sugerează și numele, fonturile variabile permit proiectanților să obțină un număr nelimitat de variante de fonturi din același fișier de fonturi. În acest fel, este posibilă ajustarea tipului de text la diferite dispozitive, ferestre de vizualizare, orientări și alte constrângeri de proiectare.
Fonturile variabile reduc semnificativ limitele formatelor curente de fonturi. Fonturile web de astăzi sunt inflexibile și nu scară foarte bine; ele ne furnizează doar câteva stiluri fixe cu nume precum "Lumină", "Bold" sau "Extra Bold". Există chiar fonturi care au doar o greutate sau o variantă înclinată. Cu fonturi variabile, cu toate acestea, avem acces la o flexibilitate infinită de greutate, înclinare, înălțime x, plăci, rotunjire și alte atribute tipografice.
Mai bine, fonturile variabile îmbunătățesc performanța. Fonturile web, așa cum le cunoaștem, au nevoie de fiecare variantă de fonturi care să fie stocată într-un fișier separat. De exemplu, așa arată folderul din fontul web Roboto:
Conținutul directorului de fonturi web RobotoFonturile variabile folosesc un singur fișier de font pe care browserul trebuie să îl încarce o singură dată. La încărcare, poate servi toate variantele de la acel singur binar.
Deci, aici este o scurtă comparație:
După cum vă puteți imagina, opțiunile noastre tipografice cresc incredibil cu fonturile variabile.
Deci, ce format de fișier utilizează fonturile variabile? Potrivit documentelor oficiale:
"Fonturile OpenType pot avea extensia .OTF sau .TTF, în funcție de tipul de contururi din font și de dorința creatorului de compatibilitate pe sisteme fără suport nativ OpenType."
Pentru a fi complet exacte, fonturile variabile au fost introduse în versiunea 1.8 a caietului de sarcini OpenType. OpenType este o extensie a formatului de fonturi TrueType, prin urmare fonturile variabile sunt disponibile ca și ele .OTF sau .ttf fișiere.
Noua specificație a fișierului OpenType vine cu o nouă tehnologie numită OpenType Font Variations, care ne permite să interpolam fontul pe numeroase axe de proiectare - până la 64.000, în funcție de blogul Adobe Typekit.
Specificația OpenType 1.8 definește cinci etichete axe înregistrate:
Accentsconagua
În plus, designerii de tip pot defini, de asemenea, axele personalizate împreună cu propriile etichete cu patru caractere în tabelul "nume" al fișierului de fonturi.
Mai jos, puteți vedea o ilustrare minunată a modului în care lucrează axele de proiectare (de la articolul lui John Hudson despre Medium.com, la care Tipul se numește anunțul non-oficial al fonturilor variabile). Acesta demonstrează un font cu trei axe cu greutăți, lățime și axe de mărime optică:
John HudsonGliful roșu din mijloc reprezintă setul de contururi stocate în font, glifele verzi reprezintă extremele celor trei axe, iar glifele portocalii reprezintă pozițiile colțului.
Cubul întreg reprezintă spațiul de proiectare la care avem acces dacă folosim acest font cu trei axe variabile. Este un cub numai pentru că fontul are trei dimensiuni (greutate, lățime, dimensiune optică). Cu mai puține axe, ne-am muta în jos spre un dreptunghi (2 axe) sau o linie (1 axă) și cu mai multe axe, ne-am mișca în sus într-un hiperspațiu multidimensional.
Și bineînțeles, un font variabil în 3 axe din viața reală nu ar fi neapărat un cub, dar mai probabil un cuboid dreptunghiular, deoarece cele mai multe axe în majoritatea cazurilor nu au aceeași lungime.
Fonturile variabile permit în continuare proiectanților de tip să definească variante de fonturi specifice pentru numere de instanțe dintre numărul nelimitat de opțiuni. De exemplu, prototypul Font variabil al Adobe conține două axe (greutate și contrast) și opt numite instanțe (Extra Light, Light, Regular, Semibold, Bold, Negru, Mediu Contrast Negru, Contrast Înalt Negru).
Instanțele numite sunt mai importante dacă vrem să folosim un font variabil cu programe de design precum Adobe Illustrator. Pe web, putem genera cu ușurință orice instanță (denumită sau nesemnată) cu CSS (de exemplu, în Font Variable Font, instanța Extra Light numită are valoarea minimă a axei de greutate și de contrast).
Putem adăuga fonturi variabile într-un site web folosind regula @ font-face din partea de sus a fișierului CSS.
De exemplu, putem adăuga fontul variabil Avenir Next cu următoarea regulă CSS:
@ font-face font-family: "Avenir Next Variable"; src: url (format "AvenirNext_Variable.ttf") ("truetype"); Puteți găsi mai multe fonturi pe site-ul web Axis Praxis (de asemenea, un loc de joacă pentru fonturi variabile), pe paginile GitHub ale diferitelor companii de design de tip (de exemplu, MonoType, Network Type), iar Typekit a început să publice versiunile de fonturi variabile din cele mai populare familii Adobe Originals.
Notă: nu fiecare font OpenType pe care îl veți găsi pe web este un font variabil (au fost introduse doar cu versiunea 1.8).
Pentru a defini variațiile de fonturi, putem folosi font-variation-settings Proprietatea CSS a fost introdusă cu CSS Font Module Level 4. Aceasta este o proprietate de nivel scăzut care ne permite să controlam fonturi variabile prin specificarea unei valori pentru fiecare axă.
Fontul variabil Avenir Next conține două axe de proiectare: greutate și lățime - ambele sunt axe înregistrate. Avenir Next are, de asemenea, opt numite instanțe (Regular, Mediu, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).
Avenir Următor Bold CondensatCSS complet (aparținând unei variante aleatoare de fonturi alese) arată astfel:
corp font-family: "Avenir Next Variable"; culoare: rgb (0, 0, 0); font-size: 148px; font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
Putem folosi orice valoare (chiar și numere plutitoare) pentru axele dintre valorile min și max. În cazul Avenir În continuare, putem folosi intervalul [400, 900] pentru greutate și domeniul [75, 100] pentru axa lățimii.
Unde se găsesc gamele? Fișierele cu fonturi conțin tabelele de variație a fontului (fvar) care dețin datele necesare. Cu toate acestea, pentru a accesa aceste informații, trebuie să vizualizăm conținutul fișierului cu ajutorul unui instrument, cum ar fi FontView. Uneori documentația fontului conține intervalele, dar, din păcate, acest lucru nu este întotdeauna cazul. Vestea bună este că site-ul web Axis Praxis conține valorile min-max pentru toate fonturile variabile pe care le are.
Decovar este unul dintre cele mai versatile fonturi variabile care există în prezent. O puteți găsi pe Axis Praxis, pe GitHub, și are de asemenea o pagină demo pe site-ul web al TypeNetwork. Decovar conține o axă înregistrată (greutate) și paisprezece personalizate, și are, de asemenea, șaptesprezece numiții instanțe.
Din docurile GitHub de la Decovar, iată câteva variante pe care le putem obține cu acest font variabil cu 15 axe:
CSS pe care trebuie să-l folosim este similar cu exemplul anterior. Aici trebuie sa definim toate cincisprezece axe (inline, striate, placi rotunjite, dungi, terminale vierme, schelet inline, terminale inline deschise, terminale inline, vierme, greutate, rafale, rotunjite,.
div font-family: Decovar; culoare albă; fundal-culoare: rgb (0, 162, 215); font-size: 157.12px; text-aliniere: stânga; padding-top: 20px; font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 'TOIL' 0, 'TINL' , "wght" 400, "TFLR" 0, "TRND" 0, "SWRM" 0, "TSLB" 277,155, "TBIF" 0;
Notă: trebuie să specificăm o valoare pentru toate axele din font-variation-settings proprietate - chiar și cele pe care nu le dăm voie să le folosim.
În cazul Decovar, putem folosi 0 ca valoare pentru axele care nu ne interesează; acestea vor fi redate cu valoarea implicită. Acest lucru nu este întotdeauna cazul, totuși, deoarece depinde de intervalele pe care le folosește fontul pentru diferitele axe. Decovar este ușor, deoarece utilizează o gamă de 0-1000 pentru toate axele și 0 este valoarea implicită pentru toate.
Puteți genera similare font-variation-settings cu Axis Praxis, nu trebuie să calculați valorile pe cont propriu. CSS de mai sus generează următoarea variantă de fonturi:
Decorați varianta de fonturi personalizate font-variation-settings proprietatea este o proprietate de nivel scăzut și conform recomandărilor W3C ar trebui utilizată numai dacă nu sunt disponibile alte metode. Ce înseamnă exact acest lucru?
Conform specificațiilor CSS 4, vom putea controla axele înregistrate cu proprietăți CSS de nivel superior în viitor, și anume:
grosimea fontului (va controla wght axă)font-stretch (va controla wdth axă)stilul fontului (va controla slnt și ITAL axe)font-optic-dimensionare (va controla opsz axă)Primele trei proprietăți există de la CSS2, totuși specificațiile CSS4 își extind utilizarea. Vom putea să le folosim nu numai cu cuvinte cheie predefinite (de ex. normal sau îndrăzneţ pentru grosimea fontului) sau numere rotunde (de ex. 400, 600, 800, etc), dar și cu toate numerele la o scară predefinită (de exemplu, grosimea fontului va varia între 1 și 1000 & font-stretch va varia între 50% și 200%).
Aceste caracteristici se află încă în faza experimentală. Deci, pentru moment, este rezonabil să continuăm să folosim font-variation-settings, deoarece în prezent aceasta este proprietatea cea mai stabilă pentru accesarea axelor fonturilor variabile.
Deoarece fonturile variabile sunt încă foarte noi, suportul pentru browser nu este încă perfect. Cele mai recente versiuni ale browserului Chrome și Safari le suportă deja, dar Edge și Firefox rămân în urmă (cu toate acestea, fonturile variabile sunt deja disponibile în Firefox Nightly și Firefox Developer Edition). De la lansarea în octombrie 2017, Photoshop și Illustrator sprijină, de asemenea, fonturile variabile.
Ne putem aștepta la fonturi variabile pentru a aduce schimbări incredibile în lumea tipografică web. Pe măsură ce devine din ce în ce mai mult sprijin, este timpul să facem o plonjare în învățare și experimentare. Consultați următoarele resurse:
