Kintamųjų šriftų tipografijos raida: įvadas

Plonas, storas ir viskas, kas tarp jų: ​​FF meta kintamasis iš monotipijos

Žodžiai turi galią, o tipografija - jų balsas

Per amžius rašoma taip, kaip „girdime“ tai, ką skaitome. Taip pat paprastai suprantama, kad šriftas ir tipografija yra pagrindinis prekės ženklo, išraiškos ir balso diapazono elementas. Puiki tipografija daro įtaką supratimui, nuotaikai ir prasmei daugybe būdų ir yra svarbi dizaino dalis. Deja, daugelį metų po interneto atsiradimo negalėjome internetiniame turinyje pritaikyti visų kitų, išskyrus paprasčiausią, tipografinį dizainą. Galimybė naudoti tikrus šriftus ir „OpenType“ ypatybes, tokias kaip ligatūros, specifiniai figūrų rinkiniai, trupmenos ir tikrasis kirpimas. Tipografinis kraštovaizdis nepaprastai pagerėjo. Tačiau turinio žiūrėjimas internete diktuoja, kad greitis yra pats kritiškiausias dizaino aspektas - todėl mes prekiavome tipografine „balso diapazonu“, skirtu puslapio greičiui. Tai reiškia, kad mažesnis šrifto svoris ir mažesnė prekės ženklo ištikimybė ir balsas.

Iš daugelio vienas (paradigma: pasislinkusi)

Kintamasis šriftas yra vienas šriftas, veikiantis tiek daug
- Johnas Hudsonas

Kintamųjų šriftų atsiradimas keičia visą dinamiką. Kaip aprašė Johnas Hudsonas, kintamasis šriftas yra vienas šriftas, veikiantis tiek daug: visi pločio ir svorio variantai, pasvirusi ir net kursyvinė forma gali būti sudėti į vieną, labai efektyvų ir suspaudžiamą šrifto failą. Dar daugiau: formatas (kuris techniškai yra „OpenType 1.8“ specifikacijos dalis) yra visiškai išplečiamas. Tipo dizaineris gali visiškai valdyti naudojamas ašis, jų diapazonus ir netgi apibrėžti naujas ašis. Šiuo metu yra 5 „įregistruotos“ ašys (plotis, svoris, pasvirusi, kursyvu ir optiniu dydžiu), tačiau dizaineris gali keisti bet kurią pasirinktą ašį. Kai kurie pavyzdžiai apima kylančiųjų ir nusileidžiančių asmenų aukštį, teksto laipsnį, net serifo formą. Galimybės yra beveik beribės. Pašalinę spektaklio barjerą, atveriame duris įdomesniam ir dinamiškesniam dizainui ir kur kas didesnėms galimybėms išreikšti tikrąjį prekės ženklo balsą. Visa tai išlaikant ištikimybę pačiam šriftui: gali būti keičiamos tik ašys, kurias palieka tipo dizaineris. Dirbtinis iškraipymas neleidžiamas.

Iš naujo sugalvotas interneto dizainas

Kol ši technologija vis dar bręsta ir tipo dizaineriai stengiasi, kad šis naujas darbo būdas būtų laisvesnis, žadamas internetinis dizainas yra novatoriška. Paprastai scenarijus būtų apriboti bet kokį 3–5 skirtingų šriftų dizainą, kad būtų parodyti visi svetainės dizaino kalbos ir balso aspektai, įskaitant visas kūno kopijos ir antraščių permutacijas. Jį paprasčiausiai įgyvendinant, kintamieji šriftai suteiktų mums laisvės naudoti skirtingus svorius kiekviename antraštės lygyje - tai padidintų jų aiškumą ir suprantamumą.

Amortizuoja nuo 100 iki 900 svarmenų

Antraštėms arba duomenų tankiuose informacijos ekranuose taip pat galima naudoti šiek tiek siauresnį simbolių plotį. Tiesą sakant, visa spausdinimo sistema galėtų būti proporcinga: svoris ir plotis gali padaugėti iš standartinių kūno kopijų nustatymų. Jei tai pasikeis atsižvelgiant į ekrano dydį ar vartotojo pageidavimus, šiuos aspektus būtų galima lengvai pakeisti kartu su kūno kopija. Visa tai kartu su našumo padidėjimu dėl mažiau HTTP užklausų (mažiau šrifto failų) ir bendrą sutaupytą duomenų atsisiuntimą (nors tai priklausys nuo naudojamo šrifto ir glaudinimo).

Tačiau nors šios laisvės leidžia mums būti išraiškingesnėms, kai kurios tikrai įdomios galimybės padės paversti pačią skaitymo patirtį. Šis puslapis (gerai, pats demonstracinis puslapis) buvo nustatytas su nauja kintamo šrifto „FF Meta“ versija, klasikine „sans-serif“ konstrukcija, kurią Erikas Spiekermannas pirmą kartą išleido 1991 m. Net ir turint tik vieną abiejų variantų (svorio) ašį. romėnų ir kursyvo variantų, nuostabų balso diapazoną galima pasiekti masiškai padidinant našumą: 18 failų ir daugiau nei 288 000 failų pakeičiami vienintele rinkmena, kurios tik 84 kt.

Atnaujintas skaitymas ekrane

[Meta] turi padaryti daugiau nei atrodyti gražiai: ji turi dirbti gana sunkiai
—Erikas Spiekermannas

Kai kurie iš didžiausių iššūkių kuriant gerą skaitymo patirtį yra susiję su subtilumo ir proporcingumo trūkumu. Šiuolaikinių CSS ir „OpenType“ funkcijų bei variantų derinys pateikia galingą derinį. Galėdami nustatyti tokias savybes kaip ligatūros ir brūkšnelius pagal kalbą, įjungti ir išjungti brūkšnelius pagal ekrano dydį ir netgi pritaikyti simbolių plotį mažiausiuose ekranuose, kad tilptų daugiau simbolių vienoje eilutėje, nesumažindami šrifto dydžio, galite žymiai patobulinti skaitymo patirties sklandumas ir patogumas.

Paruošta iš arti

XVIII a. Optinio dydžio pjūvis iš Garamond. Pirmasis vaizdas yra 6pt dydžio, antrasis - 72. Atkreipkite dėmesį į skirtumą taktų kontraste. Didesnis dydis yra žymiai tobulesnis.

Kita ypatybė, būdinga metalo tipui, tačiau prarasta vertimo į nuotraukų rinkimą ir skaitmeninę formavimą, buvo optinis dydis (gerai, kad kai kurie dizaineriai vis tiek kuria atskirus optinius dydžius skirtingiems diapazonams, tačiau tai yra reta ir šiek tiek ribota). Ne taip dažnai pasitaiko „sans-serif“ dizainuose, tačiau praėjusiais dešimtmečiais (tiesą sakant, šimtmečius) buvo gana įprasta, kad fiziškai mažesni šrifto dydžiai buvo supjaustomi šiek tiek sunkesniais smūgiais, atviresniais dubenimis ir skaitikliais bei kai kuriais atvejais, siekiant išsaugoti skaitomumą, dar platesnės angos. Laikraščiai ypač kritiškai vertina tai, kad linijos neprarastų arba laiškai per daug nepatiria rašalo.

Dėl optinio dydžio kintamųjų šriftų grįžo ir juos galima automatiškai pritaikyti, jei įmanoma, arba aiškiai nustatyti interneto dizainerio ar kūrėjo. Kaip minėta, tai nėra tokia dažna „sans-serif“ šriftų ypatybė, kaip šis, tačiau ji gali būti naudojama gana dramatiškam efektui naudojant serifo modelius, kuriuose kontrastuoja kontrastingiau.

Lenkų ir poise

Atsižvelgiant į jau aptartus pranašumus, kintamųjų šriftų atvejis yra gana įtikinamas. Tačiau ne tik gera spauda yra puikus dizainas. Ašių asortimentas, pavyzdžiui, plotis ir svoris, suteikia mums didžiulę laisvę priimti daugiau redakcinio dizaino žiniatinklyje nereikia įkelti nepaprastai daug failų. Ir kadangi jau turime tuos kelis reikalingus kintamuosius šriftus, galimybė yra pateikti juos naudoti patiems turinio leidėjams. Įsivaizduokite, koks vaidmuo tenka dizaineriams turinio valdymo sistemoje (arba CMS), kur yra svetainė. Tas dizaineris galėjo naudoti keletą paprastų valdymo elementų, įtaisytų į CMS, leidžiančius jiems rinkti konkrečias antraštes ar kabutes, leidžiančias sukurti visiškai naują dizaino lygį, panašų į tai, ką mes spausdiname, kiekvieną kartą nereikia rašyti pasirinktinio kodo.

Galbūt vis dar esame šios naujos eros aušroje, bet jos ateitis tikrai yra šviesi

Nuo 2018 m. Gegužės 3 d. Iš 4 pagrindinių interneto naršyklių, be abiejų dominuojančių mobiliųjų platformų, jau palaikomi kintamieji šriftai (patikrinkite palaikymą svetainėje caniuse.com). Turėdami tai omenyje, šiandien esame pasirengę pradėti šviesti žiniatinklį.

Čia yra visas „CodePen“ puslapis. Pažvelkite į visa tai kartu ir pažiūrėkite į CSS, kuri tai varo. Tai apima mastelio tipografinę sistemą, kurią sukūriau remdamasi idėjomis, kurių sužinojau iš Jen Simmons ir Tim Brown, naudodamas peržiūros srities vienetus, CSS pasirinktines ypatybes (dar žinomas kaip kintamieji) ir daugybę skaičiavimų. Galite jį peržiūrėti tiesiogiai „CodePen“ arba iš tikrųjų patikrinti įterptą žemiau.

Keletas minčių dėl šrifto ir projekto

Aš visada buvau Eriko Spiekermanno darbo gerbėjas ir manau, kad „Meta“, „Officina“ ir „Fira“ chronologija ir istorija yra tikrai įdomūs ir man per pastaruosius 25 metus sudaro didelę skaitmeninio dizaino struktūros dalį. Galimybė imtis šrifto su tokia istorija ir poveikiu dizaino pasaulyje ir dirbti su ja visiškai naujos technologijos kontekste buvo tikrai įdomi. Ypač vertinau galimybę dirbti su svoriu ir kursyvu kaip to paties failo dalį: jis parodo kintamojo šrifto formato vertę tikrai gerai.

Nusprendžiau net neprojektuoti puslapio, kol neparašiau paties straipsnio. Norėjau parašyti gerą įvadą, skirtą dizaineriams ir prekės ženklų savininkams, kad jie galėtų supažindinti su kintamųjų šriftų pranašumais, atsižvelgiant į jų rūpesčius: dizaino kalbą ir prekės ženklo išraišką. Kai pajutau, kad turiu gerą juodraštį, aš šiek tiek labiau patikslinau patį rašomąjį šriftą ir jo vietą mūsų dizaino leksikone. Tai man suteikė keletą idėjų, kaip parodyti šriftą ir istoriją.

Galvodamas apie pagrindinį šrifto rinkimąsi, aš siekiau mastelio: norėjau žaisti su svorio ir dydžio kraštutinumais tokiais būdais, kokių nematai dažnai internete, nes dauguma dizainų yra labiau suvaržyti naudojamo svorio. Šiuo atveju aš naudojau daugybę svorių nuo 100 iki 900 tiek romėnų, tiek kursyvu. Kai tik pradėjau kurti man patikusį maketą, man atsitiko, kad užuot dariusi grafikas, kad iliustruotų galimybes, būtų įdomiau pasidaryti iliustracijas ne pagal tipą: traukti citatas ir truputį „infographic“ stiliaus šrifto duomenų.

Paskutinįjį „ampersand up“ viršuje esantį prisilietimą iš tikrųjų įkvėpė „FontFont“ svetainėje esantis pavyzdinis puslapis: yra „glyph“ pavyzdžių rinkiklis, kuris rodo visus ampersandando, išdėstyto vienas ant kito, svorius. Aš iš pradžių juos visus buvau sudėliojęs vienodai, naudodamas animaciją kilpoje - bet tai buvo daug tam tikroms naršyklėms, vis dar įgyvendinančioms kintamus šriftus ir „keyframe“ animaciją. Kai paspaudžiau ant sutampančio išdėstymo pasirinkdami leidimo / pauzės parinktį, man patiko, kaip jie atrodė išsisklaidę (ypač mobiliuosiuose). Taigi apversdavau ir pradėjau statiškai, o tada vieną kartą paleisti animaciją ir grįžti prie pasklidimo / sluoksnių išdėstymo.

Apskritai, esu tikrai patenkintas tiek turiniu, tiek dizainu, man taip pat patinka, kaip jis juda ir vystosi įvairaus dydžio ekranuose. Tikiuosi, kad tai įkvėpimas ir instrukcija ir kitiems.

[Monotipas neseniai mane įkalbėjo parašyti ir suprojektuoti demonstracinį puslapį, kuriame būtų klasikinio Eriko Spiekermanno dizaino „FF Meta“ naujas kintamojo šrifto leidimas. Tai yra to puslapio tekstas ir kai kurie vaizdai. Visas tiesioginis puslapis yra talpinamas „CodePen“ ir įdėtas aukščiau. Jis atviras visiems, todėl nesivaržykite pasidaryti jo kopiją ir žaisti su savimi. Taip pat galite pamatyti jų įvadą į šią technologiją.]

Originalus turinys, paskelbtas mano tinklaraštyje