Tipografia più significativa

Scale modulari e loro applicazioni nel web design#section1

Una scala modulare, come una scala musicale, è un insieme precostituito di proporzioni armoniche.
—Robert Bringhurst

E’ facile creare una scala modulare. Si comincia con una proporzione (ad esempio, 1:1,618) ed un numero (supponiamo 10), poi lo si moltiplica e lo si divide per ottenere i numeri risonanti:

• 10,000 * 1,618 = 16,180
• 16,180 * 1,618 = 26,179
• 26,179 * 1,618 = 42,358
• 42,358 * etc.

• 10,000 / 1,618 = 6,180
• 6,180 / 1,618 = 3,819
• 3,819 / 1,618 = 2,360
• 2,360 / etc.

Ho creato un calcolatore per aiutarci a fare i conti. Presenta delle opzioni per creare delle scale modulari a doppio filo come la seguente, che richiedono almeno due proporzioni iniziali e due numeri iniziali per generare l’equivalente di due scale modulari distinte fuse insieme in una sola sequenza. Le scale a doppio filo in generale forniscono più opzioni per quel che riguarda le misure (includono più numeri e solitamente riempiono gli intervalli l’una dell’altra).

Fig 3: Una scala modulare a doppio filo: 10@1:1.618, 20@1:1.618

Utilizzare le scale modulari nel web significa scegliere dei numeri da una scala per le dimensioni dei caratteri, delle line height, dei margini, delle larghezze delle colonne e per molto altro ancora. In questo modo, ha senso che le scale modulari siano maggiormente efficaci quando gli input, ossia le proporzioni iniziali ed i numeri iniziali che generano l’intera scala, sono significativi per il design del progetto, per il suo contenuto o per entrambe.

Un modo per assicurarsi questa efficacia è quello di cominciare dai caratteri. Scegliendo un carattere tipografico all’inizio del progetto, prima di prendere decisioni sul layout o sulla composizione tipografica, possiamo utilizzare la misura alla quale il corpo del testo appare più incisivo come base per la scala modulare del progetto. Se l’Adobe Caslon a 16px è leggibile e rende bene, faremo le nostre moltiplicazioni e divisioni partendo da 16 per creare la nostra scala. In questo modo, un intero sistema di misure armoniche porterà a decisioni visuali (la dimensione del corpo del testo) che i designer prendono quotidianamente con sicurezza ed avrà un forte impatto in tutta l’esperienza.

Ma ovviamente, questo numero di partenza è solo un elemento in una scala modulare a doppio filo. Nel paragrafo successivo, esaminando in dettaglio il nostro esempio, spiegherò non solo come ho scelto la dimensione di partenza del carattere, ma anche come ho scelto un rapporto ed un secondo numero “importante” per la scala modulare di questo progetto.

Creare una scala modulare per il web design#section2

L’esempio che stiamo prendendo in considerazione è partito come un’esplorazione dell’utilizzo congiunto di Minion e Myriad Condensed, pertanto la mia scelta dei caratteri tipografici era già stata stabilita. Avevo pronto un testo (alcune riflessioni sulla composizione tipografica che avrei voluto condividere) e avevo fatto un rapido schizzo per pianificare la composizione. In breve: avevo gli ingredienti per la composizione tipografica per il web. Passiamo quindi alla ricetta.

Avevo scelto Minion come carattere per il testo, così mi misi a guardare attentamente i suoi Web Font Specimen per trovare una misura che funzionasse per lo scopo del mio design e che avesse un aspetto accattivante. Trovare la misura giusta per i caratteri sul web è piuttosto complicato a causa della risoluzione limitata propria della visualizzazione. Un pixel in più o in meno nella dimensione del carattere può far cambiare completamente l’aspetto di un carattere tipografico e di conseguenza quello dell’intero testo. Ma una volta trovata la misura desiderata, 18px, avevo un numero su cui basare la mia scala modulare. Mi occorreva quindi trovare una proporzione.

Scelsi la sezione aurea (1:1,618): è una proporzione bellissima, con connessioni storiche e culturali che avevano un senso anche per i caratteri tipografici che avevo scelto e per il testo che stavo preparando. Sebbene sia un design contemporaneo, Minion prende ispirazione in tutto da ideali Rinascimentali: dalla sua struttura umanistica ai modi in cui parti delle lettere rivelano una storia a penna ed inchiostro

Perfino le proporzioni della pagina e dei blocchi di testo nelle opere Rinascimentali erano basati sulla sezione aurea e, dal momento che il mio testo riguarda l’arte della composizione tipografica e come prendere spunto dalla tradizione per avere una guida, aveva senso usare una proporzione significativa per le nostre radici tipografiche.

Quindi, ho preso la misura del testo (18) e la proporzione (1:1,618) e le ho inserite nel calcolatore su modularscale.com. Ho deciso inoltre di includere un secondo, “importante” numero, perché volevo la flessibilità di una scala modulare a doppio filo.

Ho scoperto che una gran varietà di cose può fungere da numero importante. Ad esempio, la dimensione alla quale il testo della caption appare migliore o un numero molto grande come la larghezza di una parte di un supporto (media), se, ad esempio, per il progetto che avete tra le mani siete obbligati ad avere delle pubblicità o ad inserire dei video: vi assicura che qualcosa riguardante questi elementi avrà un forte impatto sull’intero layout.

Per trovare il mio numero significativo, ho marcato con h2 “Typesetting” e vi ho applicato degli stili base in accordo alla mia bozza. Sapevo di volere questo titolo molto grande e volevo che avesse sufficiente presenza da fungere come ancora della composizione, ma non volevo che fosse travolgente. Così, ho fatto delle prove con il testo e la risultante font-size, 190px, divenne il mio numero significativo. Ecco la scala finita.

Ora, diamo un’occhiata al CSS che ho scritto per applicare i numeri di questa scala alle reali misure della mia composizione.

Applicazione di una scala modulare al web design#section3

Avendo applicato il markup al mio testo e avendo sotto mano la mia scala, ho messo le regole CSS al nostro esempio, prendendo dalla mia scala un numero preciso per ciascuna decisione. Durante tutto il processo, ho fatto delle ipotesi ragionevoli che hanno dato vita ad una composizione armonica, creata misura per misura.

Esaminiamo il CSS. Le dichiarazioni qui sotto sono state ottimizzate così che possiamo studiare in maniera più semplice la matematica della scala modulare: queste regole appaiono nel CSS completo, ma sono organizzate in maniera differente (per ragioni che spiegherò alla fine di questo paragrafo).

/*
-----------------------------------------------
Typesetting for ALA
Author:   Tim Brown
Date:     21 Apr 2011
 
http://modularscale.com/scale/?px1=18&px2=190&ra1=1.618
18px @ 1:1.618
190px @ 1:1.618
 
http://alistapart.com/articles/more-meaningful-typography/
----------------------------------------------- */

La prima cosa che potete notare è un commento all’inizio del documento, in cui ho scritto una breve nota riguardante la mia scala. Tutto ciò per due motivi: primo, rendere noto che sto usando una scala modulare e secondo, fornire un modo per ricreare la scala, così che le mie decisioni possano essere analizzate e le mie misure possano essere cambiate accuratamente e utilizzate come base per altri progetti. Visitate l’URL per vedere la scala modulare esatta che ho utilizzato per questo lavoro.

body {
  font-family: "Minion-Pro-1", "Minion-Pro-2";
  font-size: 18px; /* Scale origin */
}

Quindi, ho assegnato una dimensione al font di base (la dimensione del testo a partire dalla quale ho creato la mia scala) nell’elemento body.

.main {
  float: right;
  width: 497.406px;
}
 
p {
  margin: 1em 0;
  line-height: 1.54;
}

Poi ho scelto un numero dalla mia scala per la larghezza della colonna principale di testo. Spesso penso a questa come alla giustezza dei miei paragrafi (un altro termine per indicare la lunghezza della linea), piuttosto che come larghezza. Anni fa, quando i designer mandavano istruzioni scritte ai tipografi, le loro note assomigliavano a questa: dimensione/interlinea x giustezza. Oggi, gli shorthand delle proprietà dei font in CSS riflettono solo i due-terzi di quella notazione tradizionale, tuttavia, la giustezza è ancora cruciale per ottenere un blocco di testo ben bilanciato.

Così, avendo determinato in precedenza la mia dimensione del font, ho provato molti e differenti numeri per la giustezza e per la line-height prima di impostarle rispettivamente a 497,406 pixel e a 1,54 pixel.

Per quel che mi riguarda, bilanciare un blocco di testo richiede sempre molti tentativi ed errori. Passo dall’editor CSS al browser per verificare come appaia il tutto per ogni valore che assegno. Tengo sott’occhio la densità generale dei miei paragrafi (colore tipografico) e la leggibilità del testo nel suo insieme. Sto particolarmente attento allo spazio tra le righe, affinché non ve ne sia troppo o troppo poco. Poco spazio tra le righe fa distrarre i lettori, attirando la loro attenzione ai pezzi di testo sopra o sotto la riga che stanno cercando di leggere. Molto spazio tra una riga e l’altra risulta in uno spreco, è brutto e diluisce lo spazio negativo cosicché i margini e le pause altrove nella composizione sono meno efficaci.

body {
  font-family: "Minion-Pro-1", "Minion-Pro-2";
  font-size: 18px; /* Scale origin */
  color: #031634;
}

Avendo sempre in mente l’obiettivo di un blocco di testo ben bilanciato, ho provato alcuni colori per il testo. Per quanto possa sembrare assurdo, il colore può avere un effetto su quanto bello appaia un testo: i pixel sono fatti di colore, pertanto questo può far cambiare la rappresentazione del carattere. La mia decisione è caduta su un blu scuro, per mantenere un alto contrasto, utile per ottenere la massima fedeltà dei dettagli di Minion, specialmente perché il colore di sfondo non è un bianco brillante.

h1, h2, h3, p.intro { 
  text-rendering: optimizeLegibility; 
}

Poi mi sono messo al lavoro sui titoli. La prima cosa che solitamente faccio con i titoli è applicare text-rendering: optimizeLegibility. In Firefox 3, Safari 5+ e Chrome 4+ questa coppia proprietà-valore abilita le istruzioni di kerning native di un font, ovvero le lettere avranno esattamente la spaziatura pensata dal type designer. Usatela con cura: optimizeLegibility potrebbe causare degli svantaggi in termini di performance, che però io trovo trascurabili. La situazione per voi potrebbe essere diversa.

h2 {
  margin-left: 20px; /* Optical alignment of T stem to left edge of »
  .side */ 
  font-family: "Myriad-Pro-Condensed-1", "Myriad-Pro-Condensed-2";
  font-size: 190px; /* Scale origin */
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: #033649;
}

Come ricorderete, la font-size del mio h2 (190px) era uno dei miei valori di partenza su cui avevo creato la mia scala modulare. Impostare il testo tutto in maiuscolo rafforza ed aiuta ad ancorare la composizione ma poiché è molto grande, ho ristretto il letter-spacing (nota: quest’ultimo è diverso dal kerning, perché tutte le lettere sono avvicinate o allontanate contemporaneamente e nello stesso modo). Il margine sinistro è stato aggiunto dopo, per allineare il gambo della “T” con il bordo sinistro della sidebar: tale valore non proviene dalla mia scala, ma piuttosto posso affermare che è emerso dalla posizione delle lettere mentre lavoravo. Va bene improvvisare, ne discuterò più avanti.

’Typesetting’ utilizza un weight semibold di Myriad Pro Condensed (font-weight: 600). Ho provato altri pesi, ma questo mi sembrava il migliore. Ho scelto un blu scuro come colore, poi ho deciso di usare colori diversi per le singole lettere mediante Lettering.js.

h1 {
  margin: 44.856px 0 0 307.420px;
  font-size: 29.124px;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
}

La dimensione e la spaziatura del tag h1, “Markup & Style,”, sono state definite utilizzando dei numeri dalla mia scala. Ne ho provati alcuni prima di trovare quello giusto. Sebbene il mio primo istinto fosse quello di allineare al centro questo titolo, ho poi scoperto che un posizionamento fuori dal centro era più accattivante.

.group {
  width: 845.479px;
  margin: 0 auto 18px;
}
 
.side {
  float: right;
  width: 274px; /* horizontal photos in this col are 190px high »
  uncropped */
  margin: 27.723px 29.124px 0 0;
}

Prima di addentrarmi nelle specifiche della sidebar, ho trovato le soluzioni per il container, per i float e per il clearfix.

Ho cercato un numero nella scala per la larghezza del mio container, .group, assicurandomi che fosse abbastanza largo da contenere il mio h2 e poi ho scelto una larghezza per la sidebar. Dopo aver provato alcuni numeri presi dalla scala, non ero soddisfatto dall’aspetto delle cose: 199,603px era troppo stretto e 307,420px troppo largo.

Così ho affrontato la cosa da un’altra parte: ho ridimensionato l’immagine del quaderno degli appunti e della penna, andando per tentativi con vari numeri presi dalla scala per definirne un’altezza. Impostando l’altezza a 190px (un numero da cui ha avuto origine la mia scala) e la larghezza a 274px, questa chiave visiva nella mia sidebar sembrava avere un forte impatto nella composizione e quella dimensione mi ha infine dato la larghezza ideale della colonna (274px).

.side p {
  font-family: "Minion-Pro-Caption-1", "Minion-Pro-Caption-2";
  font-size: 15px; /* Improvisation! It's okay! */
  line-height: 1.54;
}

Volevo che il carattere nella sidebar fosse più piccolo di quello del testo principale, per due motivi: volevo che indietreggiasse visivamente dal momento che è meno importante del testo principale e volevo essere sicuro di poter impostare le righe ad una lunghezza agevole. Avendo predefinito una giustezza piuttosto stretta basando la larghezza della colonna sulla dimensione della mia immagine, dovevo rendere il font-size un po’ più piccolo per poter inserire più caratteri per riga. La grande domanda era: quanto più piccolo?

Dopo qualche tentativo con i numeri della mia scala per la dimensione del font della sidebar e non essendo soddisfatto del risultato, mi sono ricordato che Minion Pro ha una versione creata per dimensioni più piccole, chiamata Caption. Il Minion Pro Caption è un po’ più robusto del normale Minion Pro, perciò faceva proprio al caso mio. Ho continuato a provare con diversi valori di font-size per trovare quello che mi piacesse e alla fine ho improvvisato. Il numero 15 non fa parte della mia scala modulare, ma Minion Pro Caption a 15px sicuramente sta bene accostato ad un Minion Pro a 18px.

Proprio così, ho improvvisato.

Le scale modulari sono uno strumento, non sono magiche. Non funzioneranno per tutte le misure, ma va bene così. La matematica non può sostituire l’occhio di un designer esperto, ma può fornire dei suggerimenti e dei vincoli da rispettare mentre si prendono delle decisioni. Considerate i numeri della scala come ipotesi ragionevoli. Arrotondateli se preferite (22,162 diventa 22). Combinateli (3,56 + 16 = 19,56). O, come mi avete visto fare in questo caso, uscite completamente dalla scala.

/* Intro
----------------------------------------------- */
/*p.intro {
  margin: 0.809em 0;
  font-size: 22.250px;
  line-height: 1.309;
}*/
 
p.intro {
  margin: 0.952em 1.54em 0.952em 0;
  font-size: 21.178px; /* 27.723 - 6.545 */
  line-height: 1.394; /* 1.54 - 0.146 */
}

Le decisioni che ho preso per le impostazioni dei due paragrafi p.intro sono un’ulteriore dimostrazione dell’improvvisazione. Inoltre, fanno riferimento a quella che chiamo “matematica nei commenti”, qualcosa che ritengo essere importante per la chiarezza e l’efficienza del nostro lavoro.

Qui avevo un intero insieme di misure che mi piacevano (ora sono commentate). Ma ad un certo punto mi sono reso conto che non avevo idea da dove venissero. Non sono numeri della mia scala. Sospetto che una volta a tarda sera mentre me ne stavo seduto a lavorare a tutto ciò (prima che il calcolatore di scale modulari divenisse un URL che si potesse salvare tra i preferiti) io abbia inserito i numeri sbagliati nel calcolatore e abbia continuato a lavorare. Ma aveva un bell’aspetto! Nello spirito dell’improvvisazione, posso aver tenuto i numeri come erano. Ma volevo spiegare un’altra tecnica che uso.

Per ottenere dei numeri vicini a quelli che mi piacevano pur continuando ad utilizzare la scala giusta, ho mischiato i numeri della scala. Il valore di font-size di questi paragrafi introduttivi, 21,178, non fa parte della mia scala, ma è il risultato della combinazione di due numeri che ne fanno parte. Ogni volta che sommo o sottraggo per arrivare ai valori che non hanno avuto origine dalla mia scala, metto l’operazione in un commento nel CSS. Questo mi aiuta a ricordare e aiuta gli altri a capire da dove arrivano certi numeri.

Un’ultima cosa che vale la pena far notare: poiché ho creato il mio layout in base ad una scala modulare in parte derivante da una dimensione specifica di un carattere specifico, le mie misure non hanno senso se non si usa quel dato carattere. Così, quando i miei font ideali non sono presenti, e può capitare per una serie di ragioni (connessione lenta, vecchio browser/OS, preferenze utente che disabilitano i font web, etc.), i font generici (e misure generiche) prendono il sopravvento. Infatti, per il progressive enhancement, specifico prima un font di base e delle misure generiche, seguite poi dai font che preferisco e da misure ideali, basate su una scala. Osservate l’intero stylesheet del nostro esempio per i dettagli. Potete approfondire questa tecnica leggendo una serie di articoli di Sean McBride. (Si noti inoltre che sono arrivato a questi particolari font di base con l’aiuto di Ffffallback di Josh Brewer).

Come inserirla nel nostro modo di lavorare#section4

Per certi versi è differente dal modo in cui lavoriamo solitamente, ma sembra più naturale. Per parafrasare Mark Boulton, andare dal contenuto verso l’esterno piuttosto che dalla tela verso l’interno è un modo di progettare molto più nativo del web. Gente come Mr. Boulton, Andy Clarke e Luke Wroblewski hanno per anni profetizzato un capovolgimento nel modo di affrontare il design per il web e adesso è ora che accada.

Utilizzare le scale modulari per creare un’esperienza a partire dal carattere può essere un po’ disorientante se normalmente progettate i siti web disegnando dei riquadri da riempire con il contenuto (come usavo fare io). Le scelte di dimensioni arbitrarie che ero solito fare non avevano nulla a che vedere con quello che intendo comunicare con un design. Nel caso migliore, sceglievo misure approssimative nel CSS, mi spostavo sul browser e osservavo i risultati. Se quello che ottenevo era nel complesso decente e la pagina funzionava ancora, per me andava bene.

Riconoscere il carattere come l’elemento atomico nel web design ci dà l’opportunità di prendere decisioni migliori che hanno un forte impatto su tutta l’esperienza. Inoltre, veniamo posti di fronte alla sfida di evitare le convenzioni come l’uso di framework prefabbricati e template riutilizzabili e di accettare un nuovo equilibrio nel nostro programma: dobbiamo stanziare investimenti e sforzi maggiori per dare più importanza alla tipografia.

E’ bene conoscere le dimensioni della viewport, ma impostare la larghezza di una composizione a uno di questi valori esatti e metterci dentro il testo non è l’ideale. I numeri facilmente divisibili vanno bene solo in quanto facilmente divisibili (ossia vanno bene per le bozze), ma in quanto professionisti dovremmo puntare più in alto. Scegliamo piuttosto i numeri perché sono idonei, perché stanno bene e perché servono a convogliare il significato del design.

I reset stylesheet come quello che si può trovare in HTML5 Boilerplate sono molto importanti quando si progetta con le scale modulari. Dobbiamo essere sicuri che le decisioni matematiche che prendiamo si riflettano accuratamente nel browser e in maniera il più consistente possibile nei vari browser.

In effetti, molte delle pratiche più diffuse si incastrano molto bene con le misure basate su scala modulare. Progettare con le scale modulari non preclude i sistemi grid-based o il responsive design. I numeri più piccoli di una scala possono essere utilizzati come larghezza della colonna in un sistema basato sulle griglie oppure i numeri più grandi possono essere divisi in colonne (è utile arrotondare prima i numeri). Quando si costruisce in funzione del punto di riferimento del responsive design, un layout misurato molto precisamente per una impostazione particolare, possiamo usare i numeri di una scala modulare e poi convertirli in percentuali come faremmo normalmente.

Conclusioni#section5

Progettare con le scale modulari è un modo per prendere decisioni coscienti e importanti riguardanti le misure sul web. Le scale modulari sono un efficace strumento da usare nel responsive design e nei sistemi basati sulle griglie e non sono in contrapposizione a questi. Forniscono inoltre un’alternativa assennata rispetto al costruire le nostre composizioni sugli ultimi limiti della viewport e ci aiutano ad ottenere un’armonia visiva che non si può trovare nelle composizioni che usano numeri arbitrari, convenzionali o facilmente divisibili.

Come abbiamo visto in questo articolo, tuttavia, le scale modulari sono uno strumento, non un dogma. La cosa importante per i nostri lettori, per la nostra arte e per la nostra cultura è che ci assumiamo la responsabilità delle nostre decisioni riguardanti il design, perché solo così ne prenderemo di migliori.

Letture di approfondimento#section6

• The Elements of Typographic Style: non raccomanderò mai abbastanza il libro di Robert Bringhurst The Elements of Typographic Style, particolarmente la sezione intitolata “Shaping the Page”. Qui è dove ho imparato a conoscere il potere delle scale modulari, come costruirle, in cosa differiscono dalle griglie e come la loro flessibilità ci può aiutare a raggiungere un equilibrio naturale tra l’esattezza tipografica e l’improvvisazione ragionata.
• More Perfect Typography: partire dai caratteri ed utilizzare le scale modulari sono stati i soggetti di una presentazione di mezz’ora che ho fatto a Build nel Novembre del 2010. Potete guardare l’intero talk online, se vi va. E’ un buon supplemento a questo articolo, più di ispirazione che di informazione. Parlo di Aldus Manutius, spiego il mio metodo per valutare il carattere tipografico per il testo e condivido un altro layout come l’esempio di questo articolo.

Illustrazioni: {carlok}