Razvoj tipografije s spremenljivimi pisavami: uvod

Tanka, debela in vse vmes: Meta spremenljivka FF iz monotipa

Besede imajo moč, tipografija pa njihov glas

Stoletja je bilo tip, kako 'slišimo' to, kar beremo. Splošno je tudi razumevanje, da so pisave in tipografija ključni element blagovne znamke, izražanja, dosega glasov. Velika tipografija na nešteto načinov vpliva na razumevanje, razpoloženje in pomen in je bistven del zasnove. Na žalost več let po pojavu spleta na spletno vsebino nismo mogli uporabiti vseh, razen najosnovnejšega tipografskega oblikovanja. Z možnostjo uporabe resničnih pisav in funkcij OpenType - kot so ligature, posebni nizi figur, ulomki in resnično jedro - se je tipografska pokrajina izjemno izboljšala. Toda resničnost gledanja vsebine v spletu narekuje, da je hitrost najpomembnejši vidik oblikovanja - zato smo za hitrost strani trgovali s tipografskim „glasnim razponom“. To pomeni manjšo utež pisave in zmanjšano zvestobo blagovne znamke in glas.

Od mnogih ena (paradigma: premaknjena)

Spremenljiva pisava je ena sama pisava, ki deluje tako veliko
John Hudson

Pojav spremenljivih pisav spremeni celotno dinamiko. Kot je opisal John Hudson, je spremenljiva pisava ena sama pisava, ki deluje tako veliko: vse variacije širine in teže, naklona in celo poševnice so lahko vsebovane v eni sami, visoko učinkoviti in stisljivi datoteki pisave. Še več: oblika (ki je tehnično del specifikacije OpenType 1.8) je popolnoma razširljiva. Oblikovalec tipov ima popoln nadzor nad tem, katere osi se uporabljajo, njihov obseg in celo opredelitev novih osi. Trenutno obstaja 5 "registriranih" osi (širina, teža, nagib, poševnost in optična velikost), vendar oblikovalec lahko spreminja poljubno os. Nekaj ​​primerov vključuje višino vzponov in spustov, oceno besedila, celo serijsko obliko. Možnosti so skoraj neomejene. Z odstranjevanjem ovire za uspešnost odpiramo vrata za bolj zanimiv in dinamičen dizajn ter veliko večjo sposobnost izražanja pravega glasu znamke. Vse to ob ohranjanju zvestobe samemu tipkanju: spreminjajo se lahko samo osi, ki jih je izpostavil oblikovalec tipov. Ni dovoljeno umetno popačenje.

Spletna zasnova, na novo zasnovana

Medtem ko tehnologija še vedno dozoreva in tipični oblikovalci si prizadevajo, da bi postali bolj tekoči pri tem novem načinu dela, je obljuba za oblikovanje na spletu prelomna. Značilen scenarij bi bil omejiti kateri koli zasnovo na 3–5 različnih pisav, da bi predstavljali vse vidike oblikovalskega jezika in glasu spletnega mesta - vključno z vsako permutacijo za kopijo telesa in naslovi. Pri najpreprostejši izvedbi bi nam spremenljive pisave dale svobodo uporabe različnih uteži za vsako stopnjo naslova - kar bi povečalo njihovo jasnost in berljivost.

Ampersandi od 100 do 900 uteži

Lahko bi uporabili tudi nekoliko ožje širine znakov za naslove ali na podatkovnih gostotih prikazih informacij. Dejansko je bil celoten tipografski sistem zasnovan tako, da je sorazmeren: teža in širina bi lahko postala multiplikatorja na standardnih nastavitvah kopiranja telesa. To bi omogočilo enostavno spreminjanje obsega teh vidikov skupaj s kopijo telesa, če bi se njegove nastavitve spremenile glede na velikost zaslona ali uporabniške želje. Vse to s spremljajočim povečanjem zmogljivosti zaradi manj zahtev HTTP (manj datotek pisav) in splošnega prihranka podatkov za prenos (čeprav se to razlikuje glede na uporabljene pisave in stiskanje).

A čeprav nam te svoboščine omogočajo, da smo bolj izrazni, bodo nekatere resnično zanimive zmožnosti pomagale pri preoblikovanju samega bralnega doživetja. Ta stran (no, sama dejanska predstavitvena stran) je bila postavljena z novo različico pisave FF Meta, klasično sans-serif zasnovo Erika Spiekermanna, prvič izdano leta 1991. Tudi z le eno osjo variacije (teže) obeh romanske in poševne različice, je mogoče doseči čudovit obseg glasu z velikimi dosežki: 18 datotek in več kot 288k nadomeščeno z eno samo datoteko 84k.

Obnovljeno branje na zaslonu

[Meta] mora narediti več kot videti lepa: delati mora precej
—Erik Spiekermann

Nekateri največji izzivi pri ustvarjanju dobre bralne izkušnje so povezani s pomanjkanjem natančnosti v razmerju in natančnimi podrobnostmi. Kombinacija sodobnih funkcij in različic CSS in OpenType predstavlja močno kombinacijo. Če lahko nastavite funkcije, kot so ligature in vezaji glede na jezik, vklopite ali izklopite vezavo glede na velikost zaslona in celo prilagodite širino znakov na najmanjših zaslonih, da lahko namestite več znakov na vrstico, ne da bi zmanjšali velikost pisave, lahko dramatično izboljšate gladkost in udobje bralne izkušnje.

Pripravljeni na bližino

Izrez Garamonda iz 18. stoletja v optičnih velikostih. Prva slika je v velikosti 6pt, druga pri 72. Upoštevajte razliko v kontrastu poteze. V večji velikosti je bistveno bolj rafiniran.

Druga značilnost, ki je bila običajna v kovinski vrsti, a se je izgubila s prevodom na tipkanje fotografij in digitalno, je bilo optično velikost (no, nekateri oblikovalci še vedno ustvarjajo ločene optične velikosti za različne obsege, vendar so redke in nekoliko omejene). Ne tako pogosto, ki ga najdemo na modelih sans-serif, toda v desetletjih preteklosti (resnica je bila stoletja) je bilo običajno, da so fizično manjše velikosti pisave pisali z nekoliko težjimi potezami, bolj odprtimi skledami in pulti ter nekateri primeri celo širše odprtine, da se ohrani berljivost. Časopisi so bili še posebej pomembni za to, da se črte niso izgubile ali črke niso preveč trpele zaradi pridobivanja črnila.

Optično velikost je prinesla donos v spremenljivih pisavah in ga je mogoče samodejno uporabiti, če je na voljo, ali pa ga izrecno nastaviti spletni oblikovalec ali razvijalec. Kot rečeno, v sans-serifnih vrstah, kot je ta, ni tako pogosta značilnost, vendar jo lahko uporabimo za precej dramatičen učinek pri močnejših kontrastnih serijsko oblikovanih strojih.

Poljščina in poise

Glede na prednosti, o katerih smo že govorili, je primer spremenljivih pisav precej prepričljiv. Toda dobra tipografija ni vse, kar je v odličnem oblikovanju. Razpon osi, kot sta širina in teža, nam daje ogromno svobode pri sprejemanju več uredniškega oblikovanja na spletu, ne da bi morali naložiti prekomerno število datotek. In ker že imamo teh nekaj potrebnih spremenljivih pisav, je priložnost, da jih izpostavimo za uporabo založniki vsebin sami. Zamislite si vlogo oblikovalcev znotraj sistema za upravljanje vsebine (ali CMS), kjer je nameščeno spletno mesto. Ta oblikovalec bi lahko uporabil nekaj preprostih kontrolnikov, vgrajenih v CMS, ki bi jim omogočili vnašanje določenih naslovov ali potez, kar omogoča povsem novo raven oblikovanja, podobno tistemu, kar imamo v tisku, ne da bi morali vsakič pisati kodo po meri.

Morda smo še vedno na zori te nove dobe, vendar je prihodnost zagotovo svetla

Od maja 2018 3 od štirih večjih spletnih brskalnikov poleg obeh prevladujočih mobilnih platform podpirata tudi spremenljive pisave (preverite podporo na caniuse.com). Glede na to smo danes pripravljeni začeti osvetljevati splet.

Tu je celotna stran v CodePen-u. Skupaj si oglejte vso stvar in poglejte v CSS, ki ga poganja. To vključuje tipografski sistem za skaliranje, ki sem ga ustvaril na podlagi nekaterih idej, ki sem se jih naučil od Jen Simmons in Tima Browna, z uporabo enot za prikaz, CSS lastnosti po meri (aka spremenljivk) in veliko izračunov. Ogledate si ga lahko neposredno na CodePenu ali dejansko preverite vdelano spodaj.

Nekaj ​​misli o pisavi in ​​projektu

Vedno sem bil ljubitelj dela Erika Spiekermanna in mislim, da sta kronologija in zgodovina Meta, Officina in Fira res zanimiva, kar je zame velik del tkanine digitalnega oblikovanja v zadnjih 25 letih. Priložnost, da prevzamete tiskano pisavo s tovrstno zgodovino in vplivom v svetu oblikovanja in z njim sodelujete v okviru povsem nove tehnologije, je bila resnično vznemirljiva. Še posebej cenim, da sem lahko delo s težo in poševnim tiskom del iste datoteke: zelo dobro prikazuje vrednost spremenljivega formata pisave.

Odločila sem se, da sploh ne bom začela oblikovati strani, dokler nisem sama napisala članka. Želel sem napisati dober uvod, namenjen oblikovalcem in lastnikom blagovnih znamk, da bi jih seznanil s prednostmi spremenljivih pisav v smislu, ki bi bil v sozvočju z njihovimi pomisleki: oblikovalski jezik in izraz blagovne znamke. Ko sem začutil, da imam dober osnutek, sem dodal malce bolj natančno besedilo in njegovo mesto v našem oblikovalskem leksikonu. To mi je dalo nekaj idej, kako predstaviti pisavo in zgodovino.

Razmišljal sem o osnovnem naboru besedila: želel sem se igrati z ekstremno težo in velikostjo na načine, ki jih v spletu ne vidite tako pogosto, ker je večina modelov bolj omejena pri uporabljenih utežih. V tem primeru sem uporabil celo vrsto uteži od 100 do 900 v rimski in poševni obliki. Ko sem začel dobivati ​​postavitev, ki mi je bila všeč, mi je prišlo na misel, da bi bilo bolj zanimivo, če bi grafike ponazorili z zmogljivostmi: povlecite citate in malo podatkov o pisavi v slogu infografike.

Zadnji dotik ampersand up je bil navdihnjen s strani vzorca vrste na spletnem mestu FontFont: na voljo je vzorčevalec glifa, ki prikazuje vse teže ampersand slojevito drug na drugem. Prvotno sem jih imel vse zložene na enak način, z animiranjem v zanki - vendar je bilo to pri nekaterih brskalnikih še vedno veliko, ki izvajajo spremenljive pisave in animacijo s ključnimi okviri. Ko sem se z možnostjo predvajanja / začasno ustavil na prekrivajoči se postavitvi, mi je bil všeč način, kako so se razširili (zlasti na mobilnih napravah). Tako sem jo prelisičil in jo začel sprožiti statično, nato pa enkrat predvajati animacijo in se vrniti nazaj na razprostranjeno / večplastno postavitev.

Na splošno sem zelo zadovoljen tako z vsebino kot tudi z zasnovo in mi je všeč, kako se premika in razvija tudi po različnih velikostih zaslona. Upam, da bo služil kot navdih in pouk tudi drugim.

[Monotip me je pred kratkim angažiral, da sem napisal in oblikoval predstavitveno stran, da bom predstavil novo različico pisave s spremenljivo pisavo klasičnega dizajna FF Meta Erika Spiekermanna. To je besedilo te strani in nekateri vizualni deli. Celotna stran v živo se nahaja na CodePenu in je vdelana zgoraj. Odprta je za vse, zato lahko sami kopijo in igranje z njo. Ogledate si lahko tudi njihovo uvajanje v tehnologijo.]

Izvirna vsebina, objavljena na mojem blogu