Evoluția tipografiei cu fonturi variabile: o introducere

Subțire, gros și totul între ele: FF Meta Variable de la Monotype

Cuvintele au putere, iar tipografia este vocea lor

De secole, tipul a fost modul în care „auzim” ceea ce citim. În general, de asemenea, s-a înțeles că tipografiile și tipografia sunt un element esențial al brandingului, al expresiei, al gamei vocale. Tipografia mare influențează înțelegerea, starea de spirit și sensul în nenumărate moduri și este o parte esențială a proiectării. Din păcate, mulți ani după apariția web-ului, nu am putut să aplicăm toate conținutul online, în afară de cele mai de bază ale designului tipografic. Cu abilitatea de a utiliza fonturi reale și caracteristici OpenType - cum ar fi legăturile, seturi de figuri specifice, fracții și veritabil kerning - peisajul tipografic s-a îmbunătățit extraordinar. Însă realitatea vizualizării conținutului pe web dictează că viteza este cel mai critic aspect al designului - așa că am tranzacționat „interval vocal” tipografic pentru viteza paginii. Asta înseamnă mai puține greutăți de fonturi și reducere a fidelității și a vocii.

De la mulți, unul (paradigmă: schimbat)

Un font variabil este un singur font care acționează la fel de mulți
- John Hudson

Apariția fonturilor variabile modifică întreaga dinamică. După cum este descris de John Hudson, un font variabil este un singur font care acționează la fel de multe: toate variațiile de lățime și greutate, înclinate și chiar italice pot fi conținute într-un singur fișier de font, extrem de eficient și compresibil. Ce este mai mult: formatul (care face parte din punct de vedere tehnic din specificația OpenType 1.8) este complet extensibil. Designerul de tip are un control complet asupra axei utilizate, a intervalelor lor și chiar a definirii noilor axe. În prezent, există 5 axe „înregistrate” (lățime, greutate, inclinare, cursivă și dimensionare optică), dar proiectantul poate varia orice axă pe care o aleg. Unele exemple includ înălțimea ascendenților și a descendenților, gradul textului, chiar forma serifului. Posibilitățile sunt aproape nelimitate. Prin eliminarea barierei de performanță, deschidem ușa pentru un design mai interesant și mai dinamic și o capacitate mult mai mare de a exprima adevărata voce a mărcii. Toate acestea păstrând fidelitatea față de tipografia în sine: pot fi variate doar axe expuse de proiectantul de tip. Nu este permisă denaturarea artificială.

Design web, reinventat

Deși tehnologia încă se maturizează și designerii de tip lucrează pentru a deveni mai fluent în acest nou mod de lucru, promisiunea pentru design pe web este de ultimă oră. Scenariul tipic ar fi constrângerea oricărui design dat la 3-5 tipuri diferite pentru a reprezenta fiecare aspect al limbajului și vocalului de design al unui site - inclusiv fiecare permutare pentru copierea și titlurile corpului. La cea mai simplă implementare, fonturile variabile ne-ar oferi libertatea de a folosi greutăți diferite pentru fiecare nivel de titlu - crescând mult claritatea și lizibilitatea acestora.

Ampersands de la 100 la 900 de greutăți

Se poate utiliza, de asemenea, lățimi de caractere ușor mai restrânse pentru titluri sau pe afișaje de informații cu densitate de date. De fapt, întregul sistem tipografic ar putea fi proiectat să fie proporțional: greutatea și lățimea ar putea deveni multiplicatori pe setările standard de copiere a corpului. Dacă faceți acest lucru, permiteți ca acele aspecte să se extindă cu ușurință, împreună cu copia corpului, în cazul în care setările sale se schimbă în funcție de dimensiunea ecranului sau de preferințele utilizatorului. Toate acestea cu o creștere a performanței însoțitoare datorită mai puține solicitări HTTP (mai puține fișiere de font) și o economie generală de date de descărcat (deși aceasta va varia în funcție de fontul și compresia utilizată).

Dar, în timp ce aceste libertăți ne permit să fim mai expresivi, unele dintre capacitățile cu adevărat interesante vor ajuta la transformarea experienței de lectură în sine. Această pagină (bine, pagina demo propriu-zisă) a fost setată cu o nouă versiune de font variabilă a FF Meta, designul clasic sans-serif de Erik Spiekermann lansat pentru prima dată în 1991. Chiar și cu o singură axă de variație (greutate) a ambelor Variante romane și italice, o gamă minunată de voce poate fi obținută cu câștiguri masive în performanță: 18 fișiere și peste 288k înlocuite cu un singur fișier de doar 84k.

Citirea reinventată pe ecran

[Meta] trebuie să facă mai mult decât să arate frumos: trebuie să muncească destul de mult
—Erik Spiekermann

Unele dintre cele mai mari provocări în crearea unei experiențe bune de lectură sunt legate de lipsa de finețe în proporție și detalii fine. Combinația dintre funcțiile și variațiile moderne CSS și OpenType prezintă o combinație puternică. Fiind capabil să setați funcții precum ligaturi și cratime bazate pe limbaj, activați și dezactivați cratima în funcție de dimensiunea ecranului și chiar adaptați lățimea caracterelor pe cele mai mici ecrane pentru a se potrivi cu mai multe caractere pe linie, fără a reduce dimensiunea fontului poate aduce îmbunătățiri dramatice în netezimea și confortul experienței de lectură.

Gata pentru un prim-plan

Decupaj din secolul al 18-lea, decupat de Garamond în dimensiuni optice. Prima imagine are dimensiunea de 6pt, cea de-a doua la 72. Notă diferența de contrast de cursă. Este mult mai rafinat la dimensiuni mai mari.

O altă caracteristică obișnuită în tipul metalului, dar pierdută în traducerea fotografierii și digitală a fost dimensiunea optică (bine, unii designeri creează în continuare dimensiuni optice separate pentru diferite intervale, dar este rar și oarecum limitat). Nu este la fel de des întâlnit pe desenele sans-serif, dar în decenii trecute (în adevăr, de secole), era destul de comun ca mărimile fizice mai mici ale unei caractere tipografice să fie tăiate cu lovituri ușor mai grele, boluri mai deschise și contoare și în unele cazuri cu deschideri chiar mai largi pentru a păstra lizibilitatea. Ziarele au considerat, în special, această critică pentru a se asigura că liniile nu se pierd sau că literele nu suferă prea mult de câștigul de cerneală.

Dimensionarea optică a obținut o revenire a fonturilor variabile și poate fi aplicată automat acolo unde este disponibil sau setată explicit de către designerul sau dezvoltatorul web. Așa cum am menționat, nu este o caracteristică la fel de frecventă în tipografiile sans-serif ca aceasta, dar poate fi utilizată pentru a avea un efect destul de dramatic în proiectele de serif cu contrast mai mare.

Polonez și înțepător

Cu avantajele discutate deja, cazul fonturilor variabile este destul de convingător. Dar o tipografie bună nu este tot ce este de proiectare excelentă. Gama de axe precum lățimea și greutatea ne oferă o libertate extraordinară de a îmbrăca mai mult design editorial pe web fără a fi nevoie să încărcăm un număr exorbitant de active de fișiere. Și de vreme ce avem deja acele câteva fonturi variabile necesare în loc, oportunitatea este să le expunem pentru a fi utilizate chiar de editorii de conținut. Imaginează-ți un rol pentru designeri din cadrul Sistemului de gestionare a conținutului (sau CMS) în care este găzduit site-ul web. Acest proiectant ar putea utiliza unele controale simple încorporate în CMS, care le-ar permite să tasteze titluri specifice sau trage-citate, permițând un nivel cu totul nou de design, asemănător cu ceea ce avem în tipărire, fără a fi necesar să scriem cod personalizat de fiecare dată.

Am putea fi încă în zorii acestei noi ere, dar viitorul este cu siguranță luminos

Începând cu mai 2018, 3 din 4 browsere web majore acceptă deja fonturi variabile, pe lângă ambele platforme mobile dominante (verificați asistența pe caniuse.com). În acest sens, suntem gata să începem să aprindem web-ul astăzi.

Iată pagina completă pe CodePen. Aruncați o privire asupra întregului lucru împreună și aruncați o privire la CSS-ul care îl conduce. Aceasta include un sistem tipografic de scalare pe care l-am creat pe baza unor idei pe care le-am învățat de la Jen Simmons și Tim Brown, folosind unități viewport, proprietăți personalizate CSS (aka variabile) și o mulțime de calcule. Puteți vedea direct pe CodePen sau puteți verifica de fapt încorporat mai jos.

Câteva gânduri despre tipografia și proiectul

Am fost întotdeauna un fan al activității lui Erik Spiekermann și cred că cronologia și istoria Meta, Officina și Fira sunt cu adevărat interesante și o parte foarte mare din structura designului digital pentru mine în ultimii 25 de ani. Șansa de a lua o tipografie cu acest tip de istorie și impact în lumea designului și de a lucra cu aceasta în contextul unei noi tehnologii a fost foarte interesantă. Am apreciat mai ales că pot lucra atât cu greutatea, cât și cu cursiva ca parte a aceluiași fișier: prezintă foarte bine valoarea formatului de font variabil.

Am decis să nu încep nici măcar să proiectez pagina până când nu am scris articolul în sine. Am vrut să scriu o introducere bună, destinată designerilor și proprietarilor de branduri, pentru a le introduce beneficiile fonturilor variabile în termeni care să rezoneze la preocupările lor: limbajul de design și expresia mărcii. Odată ce am simțit că am o redactare bună, am adăugat ceva mai specific tipografiei în sine și a locului său în lexicul nostru de proiectare. Acest lucru mi-a oferit câteva idei despre cum să prezint atât tipografia, cât și istoria.

Mă gândesc la compunerea de bază, am apelat la scară: am vrut să mă joc cu extremele de greutate și dimensiune în moduri pe care nu le vedeți la fel de des pe web, din cauza faptului că majoritatea desenelor sunt mai restrânse în greutatea folosită. În acest caz, am folosit o gamă întreagă de greutăți de la 100 la 900, atât în ​​limba romană, cât și în cursiva. Odată ce am început să obțin o macheta care mi-a plăcut, mi s-a părut că în loc să creez grafică pentru a ilustra capabilitățile, ar fi mai interesant să fac ilustrații de tip: trageți ghilimele și un pic de date tip font „infografice”.

Ultima atingere a amplasării superioare a fost de fapt inspirată de tipul paginii tip pe site-ul FontFont: există un eșantion glif care arată toate greutățile unui ampersand stratificat unul peste altul. Le-am avut inițial pe toate stivuite în același mod, cu animarea într-o buclă - dar asta a fost un pic pentru unele browsere care încă implementau fonturi variabile și animație cu cadre cheie. Când am atins aspectul de suprapunere cu o opțiune de redare / pauză mi-a plăcut modul în care arătau răspândite (în special pe mobil). Așa că l-am răsturnat și l-am pornit static, apoi să redau animația o dată și să mă întorc la aspectul răspândit / stratificat.

În total, sunt foarte fericit atât cu conținutul, cât și cu designul și îmi place cum se mișcă și evoluează și pe diferite dimensiuni de ecran. Sper că servește ca inspirație și instruire și pentru alții.

[Monotipul m-a angajat recent să scriu și să proiectez o pagină demonstrativă pentru a prezenta o nouă versiune de font variabilă a designului clasic FF Meta Erik Spiekermann. Acesta este textul acelei pagini și unele dintre cele vizuale. Pagina live completă este găzduită pe CodePen și încorporată mai sus. Este deschis tuturor, așa că nu ezitați să faceți o copie și să vă jucați singuri. Puteți vedea introducerea lor și la tehnologie.]

Conținut original postat pe blogul meu