Evolucija tipografije s promjenjivim fontima: uvod

Tanak, gust i sve između toga: FF Meta Varijable od Monotip

Riječi imaju snagu, a tipografija je njihov glas

Stoljećima se upisuje način na koji „čujemo“ ono što čitamo. Također se općenito razumije da su tipografija i tipografija temeljni element markiranja, izražavanja i raspona glasa. Izvrsna tipografija utječe na razumijevanje, raspoloženje i značenje na bezbroj načina i bitan je dio dizajna. Nažalost, dugi niz godina nakon pojave weba, nismo mogli primijeniti sve, osim najosnovnije, tipografskog dizajna na internetski sadržaj. Zahvaljujući mogućnosti korištenja stvarnih fontova i OpenType značajki - poput ligatura, određenih skupova figura, frakcija i istinskog kerninga - tipografski se krajolik strahovito poboljšao. Ali stvarnost gledanja sadržaja na webu diktira da je brzina najkritičniji aspekt dizajna - tako da smo trgovali tipografskim 'glasnim rasponom' za brzinu stranice. To znači manju težinu slova i smanjenu vjernost i glas.

Od mnogih jedan (paradigma: pomaknut)

Promjenjivi font je jedan font koji djeluje podjednako
- John Hudson

Pojava varijabilnih fontova mijenja tu čitavu dinamiku. Kao što je opisao John Hudson, varijabilni font je jedan font koji djeluje na toliko mnogo dimenzija: sve varijacije širine i težine, nagiba, pa čak i kurziv mogu biti sadržane u jednoj datoteci s fontom s visokim stupnjem učinkovitosti i kompresibilnosti. Štoviše: format (koji je tehnički dio specifikacije OpenType 1.8) potpuno je proširiv. Dizajner tipa ima potpunu kontrolu nad onim što se koriste osi, njihovim rasponima, pa čak i definicijom novih osovina. Trenutno postoji 5 'registriranih' osi (širina, težina, nagib, kosi i optička veličina), ali dizajner može mijenjati bilo koju osovinu koju odabere. Neki primjeri uključuju visinu uspona i silaza, razinu teksta, čak i serif. Mogućnosti su gotovo neograničene. Uklanjanjem prepreka za performanse otvaramo vrata za zanimljiviji i dinamičniji dizajn i daleko veću sposobnost izražavanja pravog glasa marke. Sve to uz održavanje vjernosti samom pisanom sloju: mogu se mijenjati samo osi izložene od strane dizajnera. Nije dopušteno umjetno izobličenje.

Web dizajn, izumljen

Iako tehnologija još uvijek sazrijeva i dizajneri tipa rade na tome da postanu tečniji u ovom novom načinu rada, obećanje za dizajn na webu je revolucionarno. Tipičan scenarij bio bi ograničiti svaki dizajn na 3–5 različitih fontova koji predstavljaju svaki aspekt dizajnerskog jezika i glasa web mjesta - uključujući svaku permutaciju za kopiju tijela i zaglavlja. U svojoj najjednostavnijoj primjeni, promjenjivi fontovi dali bi nam slobodu korištenja različitih utega za svaku razinu naslova - što uvelike povećava njihovu jasnoću i čitljivost.

Ampersands od 100 do 900 utega

Moglo bi se koristiti i malo uže širine znakova za naslove ili na zaslonima podataka koji obiluju podacima. U stvari, čitav je tipografski sustav mogao biti dizajniran tako da bude proporcionalan: težina i širina mogli bi postati množitelji u standardnim postavkama kopije tijela. To bi omogućilo da se ti aspekti lako izmjenjuju zajedno s kopijom tijela ako se njegove postavke promijene ovisno o veličini zaslona ili korisničkim preferencijama. Sve to uz popratno povećanje performansi zbog manje HTTP zahtjeva (manji broj fontova) i sveukupne uštede podataka za preuzimanje (iako će se to razlikovati ovisno o korištenom fontu i kompresiji).

No, iako nam te slobode dopuštaju da budemo izrazitiji, neke od stvarno zanimljivih mogućnosti pomoći će preoblikovanju samog iskustva čitanja. Ova je stranica (dobro, stvarna demo stranica) postavljena novom verzijom varijabilnog fonta FF Meta, klasični sans-serif dizajn Erika Spiekermanna, prvi put objavljen 1991. Čak i sa samo jednom osom varijacije (težine) obje romanske i kurzivne varijante, prekrasan raspon glasa moguće je postići ogromnim postignućima: 18 datoteka i više od 288k zamijenjeno je jednom datotekom od samo 84 kB.

Obnovljeno čitanje na ekranu

[Meta] mora učiniti više nego što izgleda lijepo: mora raditi prilično naporno
- Erik Spiekermann

Neki od najvećih izazova u stvaranju dobrog iskustva čitanja vežu se uz nedostatak preciznosti u odnosu i sitnih detalja. Kombinacija modernih CSS i OpenType značajki i varijacija predstavlja moćnu kombinaciju. Ako budete mogli postaviti značajke poput ligata i crtica na temelju jezika, uključiti i isključiti crticu na temelju veličine ekrana, pa čak i prilagoditi širinu znakova na najmanjim ekranima kako bi se uklopilo više znakova po retku bez smanjenja veličine fonta može se dramatično poboljšati glatkoća i udobnost doživljaja čitanja.

Spremni za krupni plan

Izrez Garamonda iz 18. stoljeća izrezan je u optičke veličine. Prva slika je u 6pt veličine, druga je u 72. Primjetite razliku u kontrastu hoda. U većoj je veličini mnogo rafiniranije.

Još jedna značajka koja je bila uobičajena u metalnom tipu, ali koja se izgubila u prijevodu na postavljanje fotografija i digitalnih podataka bila je optička dimenzija (dobro, neki dizajneri i dalje stvaraju zasebne optičke veličine za različite domete, ali rijetke su i pomalo ograničene). Ne toliko često na sans-serif dizajnu, ali u desetljećima prošlosti (istina, stoljećima), bilo je prilično uobičajeno da se fizički manje veličine sloja za pisanje režu malo težim potezima, otvorenijim zdjelama i pultima i neki slučajevi čak i šire otvore s ciljem očuvanja čitljivosti. Novine su naročito bile kritične kako bi se osiguralo da se linije nisu izgubile ili slova nisu pretrpjela pretjerano od povećanja tinte.

Optičko određivanje veličine donijelo je povrat u promjenjivim fontovima i može se automatski primijeniti tamo gdje je to dostupno ili ih eksplicitno postaviti web dizajner ili programer. Kao što je već spomenuto, ona nisu tako česta značajka u sans-serif tipovima poput ovog, ali se mogu koristiti za prilično dramatičan učinak kod dizajna serifnih s visokim hodom.

Poljski i poise

Uz već spomenute prednosti, slučaj varijabilnih fontova prilično je uvjerljiv. Ali dobra tipografija nije sve što treba napraviti za dobar dizajn. Raspon osi poput širine i težine daju nam ogromnu slobodu za prihvaćanje više uređivačkog dizajna na webu bez potrebe za učitavanjem pretjerano velikog broja datoteka. A budući da već imamo tih nekoliko potrebnih varijabilnih fontova, prilika je da ih izložimo na upotrebu sami izdavači sadržaja. Zamislite ulogu dizajnera u sustavu za upravljanje sadržajem (ili CMS) u kojem je web mjesto smješteno. Taj dizajner mogao bi upotrijebiti neke jednostavne kontrole ugrađene u CMS koje će im omogućiti da upišu određene naslove ili poteškoće, omogućujući potpuno novu razinu dizajna slično onome što imamo u ispisu, bez potrebe da svaki put pišu prilagođeni kôd.

Još smo u zoru ove nove ere, ali budućnost je sigurno svijetla

Od svibnja 2018. 3 od 4 glavna web preglednika već podržavaju promjenjive fontove, osim obje dominantne mobilne platforme (provjerite podršku na caniuse.com). Imajući to u vidu, danas smo spremni započeti osvjetljavanje interneta.

Evo pune stranice na CodePen-u. Pogledajte cijelu stvar zajedno i pogledajte CSS koji ga pokreće. To uključuje tipografski sustav skaliranja koji sam stvorio na temelju nekih ideja koje sam naučio od Jen Simmons i Tima Browna, koristeći jedinice preglednog okvira, CSS prilagođena svojstva (aka varijable) i puno izračuna. Možete ga pogledati izravno na CodePenu ili zapravo provjeriti ugrađeni u nastavku.

Neke misli o pisanom obliku i projektu

Oduvijek sam bio ljubitelj rada Erika Spiekermanna i mislim da su kronologija i povijest Meta, Officina i Fira zaista zanimljivi i da su velik dio materijala digitalnog dizajna za mene tijekom posljednjih 25 godina. Prilika da se s takvom poviješću i utjecajem utječe na svijet dizajna i radi s njim u kontekstu potpuno nove tehnologije bila je zaista uzbudljiva. Posebno sam cijenio to što mogu raditi s težinom i kosom kosom kao dijelom iste datoteke: ona stvarno dobro pokazuje vrijednost promjenjivog formata fonta.

Odlučio sam da uopće ne počnem dizajnirati stranicu sve dok nisam napisao članak. Želio sam napisati dobar uvod usmjeren prema dizajnerima i vlasnicima marki kako bih ih upoznao s prednostima promjenjivih fontova u smislu koji će odgovarati njihovim problemima: dizajnerskom jeziku i izražavanju marke. Jednom kad sam osjetio da imam dobru skicu, dodao sam malo specifičniju samu pisač i njegovo mjesto u našem leksikonu dizajna. To mi je dalo nekoliko ideja o tome kako prikazati i slova i povijest.

Razmišljajući o osnovnom unosu teksta, želio sam igrati ljestvicu: želio sam se igrati s ekstremnim težinama i veličinama na načine koje ne vidite tako često na webu jer je većina dizajna ograničena u težini koja se koristi. U ovom slučaju upotrijebio sam čitav niz utega od 100 do 900 u rimskoj i kurzivnoj formi. Jednom kad sam počeo dobivati ​​izgled koji mi se svidio, palo mi je na pamet da će umjesto stvaranja grafike za ilustriranje mogućnosti biti zanimljivije napraviti ilustracije neobične: povuci citate i malo podataka o fontu u stilu "infografskog".

Posljednji dodir ampersand up vrha zapravo je inspiriran stranicom s uzorkom vrste na web lokaciji FontFont: postoji uzorak za ispitivanje glifa koji prikazuje sve težine ampera i slojevitog sloja jedan na drugoga. Prvotno sam ih sve slagao na isti način, s animacijom u petlji - ali to je bilo pomalo za neke preglednike koji još uvijek implementiraju promjenjive fontove i animaciju ključnih okvira. Kad sam pritisnuo preklapajući izgled s opcijom reprodukcije / stanke, svidio mi se način na koji su izgledali rašireni (posebno na mobilnom uređaju). Pa sam je preokrenuo i počeo statički stati, a zatim jednom reproducirao animaciju i vratio se na širi / slojeviti izgled.

Sve u svemu jako sam zadovoljan i sadržajem i dizajnom i volim kako se kreće i razvija u različitim veličinama zaslona. Nadam se da će poslužiti kao inspiracija i pouka i drugima.

[Monotip me nedavno angažirao da napišem i dizajniram demonstracijsku stranicu na kojoj ću predstaviti novu varijabilnu verziju fonta klasičnog Erika Spiekermanna FF Meta. Ovo je tekst te stranice i neki od vizualnih prikaza. Kompletna stranica uživo nalazi se na CodePen-u i ugrađena je gore. Otvoren je za sve, pa slobodno napravite kopiju i igrajte se s njom. Možete vidjeti i njihovo upoznavanje s tehnologijom.]

Izvorni sadržaj objavljen na mom blogu