Vývoj typografie s premenlivými typmi písma: úvod

Tenké, silné a všetko medzi tým: FF Meta Variable Monotype

Slová majú moc a typografia je ich hlas

Po celé stáročia bolo typom toho, ako „počujeme“ to, čo čítame. Všeobecne sa tiež rozumie, že písmená a typografia sú základným prvkom brandingu, prejavu a rozsahu hlasu. Veľká typografia ovplyvňuje porozumenie, náladu a význam nespočetnými spôsobmi a je nevyhnutnou súčasťou dizajnu. Bohužiaľ, mnoho rokov po zavedení webu sa nám nepodarilo uplatniť všetok typický dizajn okrem toho najzákladnejšieho na obsah online. Vďaka schopnosti používať skutočné fonty a funkcie OpenType - ako sú ligatúry, konkrétne súbory čísel, zlomky a skutočné vyrovnání párov - sa typografická krajina výrazne zlepšila. Realita prezerania obsahu na webe však určuje, že rýchlosť je najdôležitejším aspektom dizajnu - preto sme pre rýchlosť stránky vymenili typografický „hlasový rozsah“. To znamená menej hmotnosti písma a zníženú vernosť značky a hlas.

Z mnohých jedna (paradigma: posunutá)

Variabilné písmo je jedno písmo, ktoré funguje tak veľa
- John Hudson

Príchod premenlivých písiem mení celú dynamiku. Ako opísal John Hudson, variabilné písmo je jediné písmo, ktoré pôsobí toľko: všetky variácie šírky a hmotnosti, šikmé a dokonca aj kurzíva môžu byť obsiahnuté v jednom, vysoko účinnom a stlačiteľnom súbore písma. A čo viac: formát (ktorý je technicky súčasťou špecifikácie OpenType 1.8) je úplne rozšíriteľný. Typový dizajnér má úplnú kontrolu nad tým, aké osi sa používajú, ich rozsahy a dokonca aj definíciu nových osí. V súčasnosti existuje 5 „registrovaných“ osí (šírka, hmotnosť, šikmá plocha, kurzíva a optické dimenzovanie), ale dizajnér môže meniť ľubovoľnú os, ktorú si vyberie. Niektoré príklady zahŕňajú výšku predkov a predkov, stupeň kvality textu, dokonca aj patkovú podobu. Možnosti sú takmer neobmedzené. Odstránením výkonovej bariéry otvárame dvere pre zaujímavejší a dynamickejší dizajn a oveľa väčšiu schopnosť vyjadriť skutočný hlas značky. To všetko pri zachovaní vernosti samotnému písmu: môžu sa meniť iba osi exponované typovým dizajnérom. Nie je povolené umelé skreslenie.

Webový dizajn, znovuobjavený

Aj keď táto technológia stále dozrieva a dizajnéri typov pracujú na tom, aby sa tento nový spôsob práce stal plynulejším, prísľub dizajnu na webe je prelomový. Typickým scenárom by bolo obmedziť akýkoľvek daný návrh na 3 až 5 rôznych typov písma, aby reprezentovali každý aspekt dizajnu jazyka a hlasu stránok - vrátane každej permutácie pre kópiu tela a nadpisy. Pri najjednoduchšej implementácii by nám variabilné písma dali slobodu používať rôzne váhy pre každú úroveň smerovania - čím by sa výrazne zvýšila ich prehľadnosť a čitateľnosť.

Ampersandy od 100 do 900 hmotností

Dalo by sa tiež použiť mierne užšie šírky znakov pre nadpisy alebo pre údajovo husté zobrazenie informácií. V skutočnosti by celý typografický systém mohol byť navrhnutý tak, aby bol primeraný: hmotnosť a šírka by sa mohla stať multiplikátormi v štandardných nastaveniach kopírovania tela. Ak by sa tak stalo, umožnilo by sa týmto aspektom ľahko škálovať spolu s kópiou tela, ak by sa jeho nastavenia zmenili na základe veľkosti obrazovky alebo preferencie používateľa. To všetko so sprievodným zvýšením výkonu v dôsledku menšieho počtu požiadaviek HTTP (menej súborov fontov) a celkovou úsporou údajov na stiahnutie (hoci sa to bude líšiť v závislosti od použitého písma a použitej kompresie).

Ale zatiaľ čo tieto slobody nám umožňujú byť výraznejšími, niektoré zo skutočne zaujímavých schopností pomôžu zmeniť samotný zážitok z čítania. Táto stránka (vlastne samotná ukážková stránka) bola nastavená s novou verziou FF Meta s premenlivou veľkosťou písma, klasický dizajn bezpatkov Erik Spiekermann bol prvýkrát uvedený na trh v roku 1991. Aj s iba jednou osou variácie (váhy) oboch Rímske a kurzívne varianty, možno dosiahnuť úžasnú škálu hlasu s obrovským nárastom výkonu: 18 súborov a viac ako 288 000 nahradených jediným súborom s hmotnosťou iba 84 000.

Opakované čítanie na obrazovke

[Meta] musí robiť viac, ako vyzerať pekne: musí to fungovať dosť tvrdo
—Erik Spiekermann

Niektoré z najväčších výziev pri vytváraní dobrého čítania sú spojené s nedostatkom jemnosti v proporciách a jemných detailoch. Kombinácia moderných funkcií a variácií CSS a OpenType predstavuje silnú kombináciu. Schopnosť nastavovať funkcie ako ligatúry a delenie slov podľa jazyka, zapínať a vypínať delenie slov podľa veľkosti obrazovky a dokonca prispôsobovať šírku znakov na najmenších obrazovkách tak, aby sa zmestili viac znakov na riadok bez zmenšenia veľkosti písma, môže dramaticky vylepšiť plynulosť a pohodlie zážitku z čítania.

Pripravené na detail

Rez Garamond z 18. storočia narezaný na optické veľkosti. Prvý obrázok má veľkosť 6pt, druhý má veľkosť 72. Všimnite si rozdiel v kontraste zdvihu. Vo väčšej veľkosti je omnoho rafinovanejší.

Ďalšou funkciou, ktorá bola bežná v kovovom type, ale stratená pri prepočte na fotosadzbu a digitálne, bola optická úprava veľkosti (dobre, niektorí dizajnéri stále vytvárajú samostatné optické veľkosti pre rôzne rozsahy, ale sú zriedkavé a trochu obmedzené). Nie tak často, ako sa vyskytuje na bezpatkových vzoroch, ale v posledných desaťročiach (po pravde, po celé storočia) bolo celkom bežné, že sa fyzicky menšie veľkosti písma rezali o niečo ťažšími ťahmi, otvorenejšími miskami a pultmi a v niektorých prípadoch ešte širšie otvory, aby sa zachovala čitateľnosť. Najmä noviny to považovali za rozhodujúce na zabezpečenie toho, aby sa linky nestratili alebo aby listy nezískali príliš veľa atramentu.

Optické dimenzovanie prinieslo návratnosť v premenných písmach a je možné ho automaticky aplikovať, ak je k dispozícii, alebo ho môže explicitne nastaviť webový dizajnér alebo vývojár. Ako už bolo spomenuté, nie je to tak častý znak v bezpatkových typoch písma, ako je tento, ale dá sa použiť na celkom dramatický efekt pri dizajne serifov s vysokým zdvihom.

Poľský a poise

S výhodami, ktoré už boli prediskutované, je prípad premenlivých typov písma veľmi presvedčivý. Dobrá typografia však nie je len o skvelom dizajne. Rozsah osí, ako je šírka a hmotnosť, nám dáva obrovskú slobodu pri prijímaní redakčnejšieho dizajnu na web bez toho, aby sme museli zaťažovať neprimerané množstvo súborov. A keďže už máme tých pár požadovaných variabilných typov písma, je tu príležitosť ich vystaviť na použitie samotnými vydavateľmi obsahu. Predstavte si rolu pre dizajnérov v redakčnom systéme (alebo v redakčnom systéme), na ktorom je umiestnená webová stránka. Tento dizajnér by mohol použiť niekoľko jednoduchých ovládacích prvkov zabudovaných do CMS, ktoré by im umožnili vysádzať konkrétne nadpisy alebo ťahané ponuky, čím by umožnili úplne novú úroveň dizajnu podobnú tomu, čo máme v tlači, bez toho aby museli zakaždým písať vlastný kód.

Možno sme ešte stále na začiatku novej éry, ale jej budúcnosť je určite jasná

Od mája 2018 už 3 zo 4 hlavných webových prehliadačov podporujú premenné fonty okrem oboch dominantných mobilných platforiem (kontrola podpory na adrese caniuse.com). S týmto vedomím sme pripravení začať s rozsvietením webu ešte dnes.

Tu je celá stránka na CodePen. Pozrime sa spolu na celú vec a nahliadnite do CSS, ktorý ju poháňa. To zahŕňa škálovateľný typografický systém, ktorý som vytvoril na základe niektorých nápadov, ktoré som sa naučil od Jen Simmons a Tima Browna, s využitím zobrazovacích jednotiek, vlastných vlastností CSS (tiež premenných) a množstva výpočtov. Môžete si ho pozrieť priamo na CodePen alebo si ho skutočne pozrieť nižšie.

Niektoré myšlienky o type písma a projekte

Vždy som bol fanúšikom práce Erika Spiekermanna a myslím si, že chronológia a história Mety, Officiny a Firy sú skutočne zaujímavé a veľmi pre mňa súčasťou štruktúry digitálneho dizajnu za posledných 25 rokov. Šanca na písanie s takouto históriou a dopadom vo svete dizajnu a práca s ním v kontexte úplne novej technológie bola skutočne vzrušujúca. Oceňoval som najmä schopnosť pracovať s váhou aj kurzívou ako s tým istým súborom: veľmi dobre ukazuje hodnotu formátu premenného písma.

Rozhodol som sa, že nebudem ani začať navrhovať stránku, kým nenapíšem článok sám. Chcel som napísať dobrý úvod zameraný na dizajnérov a majiteľov značiek, aby som ich predstavil výhodám variabilných typov písma, ktoré by rezonovali s ich obavami: jazyk dizajnu a výraz značky. Keď som cítil, že mám dobrý koncept, pridal som trochu špecifickejšie k samotnému písmu a jeho miestu v našom dizajnovom slovníku. To mi poskytlo niekoľko nápadov, ako predviesť písmo a históriu.

Pri úvahách o základnej sadzbe som sa rozhodol pre mierku: Chcel som si zahrať s extrémami váhy a veľkosti spôsobom, ktorý na webe nevidíte tak často, pretože väčšina návrhov je obmedzená použitými hmotnosťami. V tomto prípade som použil celú škálu hmotností od 100 do 900 v latinke aj kurzíve. Keď som začal mať rozloženie, ktoré sa mi páčilo, napadlo ma, že namiesto vytvárania grafiky na ilustráciu schopností by bolo zaujímavejšie robiť ilustrácie z typu: vytiahnite úvodzovky a trochu údajov typu písma „infographic“.

Posledný dotyk hornej časti ampersandu bol v skutočnosti inšpirovaný stránkou so vzorkou typu na stránke FontFont: existuje vzorkovač glyfov, ktorý zobrazuje všetky hmotnosti ampersandu navrstveného nad sebou. Pôvodne som ich mal všetky naskladané rovnakým spôsobom, s animáciou v slučke - ale to bolo trochu pre niektoré prehliadače, ktoré stále implementujú variabilné písma a animácie s kľúčovými snímkami. Keď som narazil na prekrývajúce sa rozloženie s možnosťou prehrávania / pozastavenia, páčilo sa mi, ako vyzerali rozmiestnené (najmä na mobilných zariadeniach). Tak som to otočil a nechal som to začať staticky, potom som raz prehral animáciu a vrátil sa k rozloženiu / vrstvenému rozloženiu.

Celkovo vzato som skutočne spokojný s obsahom aj dizajnom a páči sa mi, ako sa pohybuje a vyvíja sa naprieč rôznymi veľkosťami obrazovky. Dúfam, že to slúži aj ako inšpirácia a poučenie pre ostatných.

[Spoločnosť Monotype ma nedávno zapojila, aby som napísal a navrhol ukážkovú stránku s novým vydaním klasického dizajnu Erik Spiekermann FF Meta. Toto je text tejto stránky a niektoré z vizuálov. Celá živá stránka je hosťovaná na serveri CodePen a je vložená vyššie. Je otvorená všetkým, takže neváhajte a vytvorte si kópiu a hrajte si s ňou sami. Môžete vidieť aj ich úvod do technológie.]

Pôvodný obsah uverejnený na mojom blogu