L'evoluzione della tipografia con caratteri variabili: un'introduzione

Sottile, spesso e tutto il resto: FF Meta Variable da Monotype

Le parole hanno potere e la tipografia è la loro voce

Per secoli, il tipo è stato il modo in cui "ascoltiamo" ciò che leggiamo. Resta inoltre generalmente inteso che i caratteri tipografici e la tipografia sono un elemento chiave del marchio, dell'espressione, della gamma vocale. La grande tipografia influenza la comprensione, l'umore e il significato in innumerevoli modi ed è una parte essenziale del design. Sfortunatamente, per molti anni dopo l'avvento del web, non siamo stati in grado di applicare tutto tranne il più elementare del design tipografico ai contenuti online. Con la possibilità di utilizzare caratteri reali e funzionalità OpenType - come legature, set di figure specifici, frazioni e crenatura vera - il panorama tipografico è migliorato enormemente. Ma la realtà della visualizzazione di contenuti sul Web impone che la velocità sia l'aspetto più critico del design, quindi abbiamo scambiato la "gamma vocale" tipografica per la velocità della pagina. Ciò significa meno pesi dei caratteri e ridotta fedeltà e voce del marchio.

Da molti, uno (paradigma: spostato)

Un carattere variabile è un singolo carattere che agisce come molti
- John Hudson

L'avvento dei caratteri variabili cambia l'intera dinamica. Come descritto da John Hudson, un carattere variabile è un singolo carattere che agisce come molti: tutte le variazioni di larghezza e peso, inclinazione e persino corsivo possono essere contenute in un singolo file di caratteri altamente efficiente e comprimibile. Inoltre: il formato (che è tecnicamente parte della specifica OpenType 1.8) è completamente estensibile. Il progettista del tipo ha il controllo completo su quali assi vengono utilizzati, sulle loro gamme e persino sulla definizione di nuovi assi. Attualmente ci sono 5 assi "registrati" (larghezza, peso, inclinazione, corsivo e dimensionamento ottico), ma il progettista può variare qualsiasi asse scelga. Alcuni esempi includono l'altezza di ascendenti e discendenti, il grado del testo e persino la forma serif. Le possibilità sono quasi illimitate. Rimuovendo la barriera delle prestazioni, apriamo le porte a un design più interessante e dinamico e una capacità molto maggiore di esprimere la vera voce del marchio. Tutto ciò mantenendo la fedeltà al carattere stesso: solo gli assi esposti dal progettista del tipo possono essere variati. Nessuna distorsione artificiale consentita.

Web design, reinventato

Mentre la tecnologia è ancora in fase di maturazione e i progettisti del tipo stanno lavorando per diventare più fluidi in questo nuovo modo di lavorare, la promessa di progettare sul web è innovativa. Lo scenario tipico sarebbe quello di limitare qualsiasi disegno dato a 3-5 diversi caratteri per rappresentare ogni aspetto del linguaggio di progettazione e della voce di un sito, incluso ogni permutazione per la copia del corpo e le intestazioni. Nella sua implementazione più semplice, i caratteri variabili ci darebbero la libertà di usare pesi diversi per ogni livello di rotta, aumentandone notevolmente la chiarezza e la leggibilità.

Ampersands da 100 a 900 pesi

Si potrebbe anche usare larghezze di carattere leggermente più strette per le intestazioni o su display di informazioni densi di dati. In effetti l'intero sistema tipografico potrebbe essere progettato per essere proporzionale: peso e larghezza potrebbero diventare moltiplicatori sulle impostazioni standard di copia del corpo. Ciò consentirebbe a tali aspetti di ridimensionarsi facilmente insieme alla copia del corpo qualora le sue impostazioni cambiassero in base alle dimensioni dello schermo o alle preferenze dell'utente. Tutto ciò con un conseguente aumento delle prestazioni a causa di un minor numero di richieste HTTP (meno file di caratteri) e un risparmio complessivo di dati da scaricare (anche se questo varia a seconda del carattere e della compressione utilizzati).

Ma mentre queste libertà ci permettono di essere più espressivi, alcune delle capacità davvero interessanti aiuteranno a trasformare l'esperienza di lettura stessa. Questa pagina (beh, l'attuale pagina demo stessa) è stata impostata con una nuova versione con caratteri variabili di FF Meta, il classico design sans-serif di Erik Spiekermann pubblicato per la prima volta nel 1991. Anche con un solo asse di variazione (peso) di entrambi varianti romane e italiche, è possibile ottenere una meravigliosa gamma di voci con enormi guadagni in termini di prestazioni: 18 file e oltre 288k sostituiti con un singolo file di soli 84k.

Lettura reinventata sullo schermo

[Meta] deve fare di più che avere un bell'aspetto: deve lavorare piuttosto duramente
—Erik Spiekermann

Alcune delle maggiori sfide nel creare una buona esperienza di lettura sono legate alla mancanza di finezza in proporzione e dettagli precisi. La combinazione delle moderne funzionalità e varianti di CSS e OpenType presenta una combinazione potente. Essere in grado di impostare funzionalità come legature e sillabazione in base alla lingua, attivare e disattivare la sillabazione in base alle dimensioni dello schermo e persino personalizzare la larghezza dei caratteri sugli schermi più piccoli al fine di adattare più caratteri per riga senza ridurre le dimensioni del carattere può apportare notevoli miglioramenti in la scorrevolezza e il comfort dell'esperienza di lettura.

Pronto per un primo piano

Taglio del 18 ° secolo di taglio Garamond in dimensioni ottiche. La prima immagine ha una dimensione di 6 pt, la seconda è a 72. Notare la differenza nel contrasto del tratto. È molto più raffinato nelle dimensioni maggiori.

Un'altra caratteristica che era comune nel tipo di metallo ma persa nella traduzione per la composizione fotografica e digitale era il dimensionamento ottico (beh, alcuni designer creano ancora dimensioni ottiche separate per diverse gamme, ma è raro e piuttosto limitato). Non così spesso trovato su disegni sans-serif, ma nei decenni passati (in verità, per secoli), era abbastanza comune che le dimensioni fisicamente più piccole di un carattere tipografico fossero tagliate con tratti leggermente più pesanti, ciotole e contatori più aperti e in in alcuni casi aperture ancora più ampie per preservare la leggibilità. I giornali, in particolare, lo hanno ritenuto fondamentale per assicurarsi che le linee non si perdessero o che le lettere non soffrissero troppo per l'inchiostro.

Il dimensionamento ottico ha restituito caratteri variabili e può essere applicato automaticamente ove disponibile o impostato esplicitamente dal web designer o dallo sviluppatore. Come accennato, non è una caratteristica così frequente nei caratteri tipografici sans-serif come questo, ma può essere utilizzata per un effetto abbastanza drammatico nei disegni serif a contrasto più elevato.

Polacco e poise

Con i vantaggi già discussi, il caso dei caratteri variabili è piuttosto convincente. Ma una buona tipografia non è tutto ciò che c'è da un design eccezionale. La gamma di assi come larghezza e peso ci dà la straordinaria libertà di abbracciare più design editoriale sul web senza dover caricare un numero esorbitante di risorse di file. E dato che disponiamo già di quei pochi caratteri variabili richiesti, l'opportunità è di esporli per l'uso da parte degli stessi editori di contenuti. Immagina un ruolo per i progettisti all'interno del Content Management System (o CMS) in cui è ospitato il sito web. Quel designer potrebbe usare alcuni semplici controlli integrati nel CMS che consentirebbero loro di comporre titoli specifici o virgolette, consentendo un livello completamente nuovo di design molto simile a quello che abbiamo in stampa, senza dover scrivere codice personalizzato ogni volta.

Potremmo essere ancora agli albori di questa nuova era, ma il futuro è sicuramente brillante

A maggio 2018, 3 browser Web su 4 supportano già caratteri variabili, oltre a entrambe le piattaforme mobili dominanti (controlla il supporto su caniuse.com). Con questo in mente, siamo pronti per iniziare a illuminare il Web oggi.

Ecco la pagina intera su CodePen. Dai un'occhiata al tutto insieme e dai un'occhiata al CSS che lo guida. Ciò include un sistema tipografico in scala che ho creato sulla base di alcune idee che ho appreso da Jen Simmons e Tim Brown, utilizzando unità di visualizzazione, proprietà personalizzate CSS (ovvero variabili) e molti calcoli. Puoi visualizzarlo direttamente su CodePen o effettivamente controllarlo incorporato di seguito.

Alcune riflessioni sul carattere tipografico e sul progetto

Sono sempre stato un fan del lavoro di Erik Spiekermann, e penso che la cronologia e la storia di Meta, Officina e Fira siano davvero interessanti e facciano parte del tessuto del design digitale per me negli ultimi 25 anni. La possibilità di prendere un tipo di carattere con quel tipo di storia e impatto nel mondo del design e di lavorare con esso nel contesto di una tecnologia nuova di zecca è stata davvero entusiasmante. Ho particolarmente apprezzato la possibilità di lavorare sia con il peso che con il corsivo come parte dello stesso file: mostra davvero bene il valore del formato del carattere variabile.

Ho deciso di non iniziare nemmeno a progettare la pagina fino a quando non ho scritto l'articolo stesso. Volevo scrivere una buona introduzione rivolta a designer e proprietari di marchi al fine di introdurli ai vantaggi dei caratteri variabili in termini che risuonassero con le loro preoccupazioni: linguaggio del design ed espressione del marchio. Una volta che ho sentito di avere una buona bozza, ho aggiunto un po 'più specifico al carattere stesso e al suo posto nel nostro lessico progettuale. Questo mi ha dato alcune idee su come mostrare sia il carattere tipografico che la storia.

Nel pensare alla composizione di base, ho optato per la scala: volevo giocare con gli estremi di peso e dimensioni in modi che non vedi spesso sul web a causa della maggior parte dei disegni più vincolati nei pesi utilizzati. In questo caso ho usato un'intera gamma di pesi da 100 a 900 sia in romano che in corsivo. Una volta che ho iniziato a ottenere un layout che mi piaceva, mi è venuto in mente che invece di creare grafici per illustrare le capacità, sarebbe più interessante fare illustrazioni fuori dal tipo: tirare virgolette e un po 'di dati di carattere in stile "infografica".

L'ultimo tocco della e commerciale in alto è stato in realtà ispirato dalla pagina dei campioni di tipo sul sito FontFont: esiste un campionatore di glifi che mostra tutti i pesi di una e commerciale sovrapposti uno sopra l'altro. Inizialmente li avevo impilati tutti allo stesso modo, con l'animazione in un ciclo - ma questo era un po 'troppo per alcuni browser che implementavano ancora caratteri variabili e animazioni di fotogrammi chiave. Quando ho colpito il layout sovrapposto con un'opzione di riproduzione / pausa, mi piaceva il modo in cui apparivano sparsi (soprattutto su dispositivi mobili). Quindi l'ho capovolto e l'ho avviato staticamente, quindi ho riprodotto l'animazione una volta e sono tornato al layout a strati / strati.

Tutto sommato, sono davvero contento sia del contenuto che del design, e mi piace come si muove e si evolve anche su schermi di dimensioni diverse. Spero che serva anche da ispirazione e istruzione per gli altri.

[Il monotipo mi ha recentemente impegnato a scrivere e progettare una pagina dimostrativa per presentare una nuova versione con caratteri variabili del classico design di Erik Spiekermann FF Meta. Questo è il testo di quella pagina e alcuni elementi visivi. L'intera pagina live è ospitata su CodePen e incorporata sopra. È aperto a tutti, quindi sentiti libero di fare una copia e giocarci da solo. Puoi vedere anche la loro introduzione alla tecnologia.]

Contenuto originale pubblicato sul mio blog