Nota degli editori: Siamo lieti di condividere con voi un estratto dal Capitolo 2 del nuovo libro di Richard Rutter, “Web Typography”.
Quando si tratta di numeri, abbiamo solo dieci cifre. Mettici dentro una virgola e un punto e abbiamo un totale di dodici caratteri. Potreste pensare che questo non rappresenti poi questa gran sfida per un tipografo, ma per un tipografo professionista (come siete voi se siete designer) i numeri richiedono molte più sfumature e variazioni di quanto si possa pensare di primo acchito. I numeri meritano la stessa cura e attenzione del testo: questo estratto rivela le situazioni in cui sono coinvolti i numeri a cui dovreste prestare attenzione e come affrontarle a beneficio del vostro lettore.
Usate numeri vecchio stile nel testo in riga#section1
In ‘Ligatures and abbreviations’ abbiamo stabilito che i sistemi di scrittura basati sull’alfabeto Latino, oltre che quelli basati sul Greco e sul Cirillico, usano un tipo di scrittura a due modelli, con ogni lettera rappresentata da due forme diverse: maiuscola e minuscola. Lo stesso vale per le cifre. Abbiamo a nostra disposizione i numeri ‘maiuscoli’ 0123456789 chiamati numeri lining o titling, e le cifre ‘minuscole’ 0123456789 chiamate vecchio stile o cifre di testo.
A differenza delle lettere maiuscole o minuscole, diverse forme di numeri non convogliano diversi significati: sono, tuttavia, componenti essenziali della palette del tipografo. Proprio come una stringa di lettere maiuscole nel mezzo di una frase URLA al lettore, così i numeri lining richiamano su sé stessi un’attenzione non dovuta. Le sterline, i dollari, le date e le quote davvero più importanti delle parole e delle idee che danno loro contesto e significato?
Trattate i numeri come trattereste le lettere, assicurandovi che non risaltino senza motivo. Fatelo usando i numeri vecchio stile in tutto il testo in riga. I font più moderni e professionali includono sia le cifre vecchio stile sia quelle lining come feature OpenType. Uno o l’altro di questi stili verrà usato per i numeri di default. Più spesso saranno i numeri vecchio stile, ma non c’è una regola o una coerenza rigorosa e la scelta di default spetta al type designer.
Si dà anche il caso che la vasta maggioranza dei font non siano né moderni né professionali, se moderno significa “OpenType enabled” e professionale significa progettato con entrambe i set di cifre. Prendete per esempio Georgia. Creato da Matthew Carter nel 1993 come un font per schermo per Microsoft, è estremamente ben fatto, elegante e affascinante e uno dei font più popolari e ampiamente distribuiti nel mondo. Ma non è equipaggiato con un font OpenType e quindi contiene un solo insieme di numeri, in questo caso cifre vecchio stile. Times New Roman, che è altrettanto diffuso, ma anch’esso non come font OpenType, è equipaggiato solo con le cifre lining. Georgia e Times New Roman sono così ampiamente distribuiti perché sono inclusi gratuitamente nei sistemi operativi Windows e Mac. Tuttavia, entrambe questi font, come molti altri, possono essere comprati nelle loro versioni professionali, che si presentano come font OpenType completi di entrambe i set di cifre, maiuscoletto e molte altre feature.
Sopra: Cifre in Times New Roman Pro.
Sotto: Cifre in Georgia Pro.
Per specificare le cifre vecchio stile, impostate la proprietà font-variant-numeric a un valore di oldstyle-nums. Se la maggior parte di quello che state progettando su una pagina è testo in riga, allora il miglior approccio per voi consiste nell’impostare le cifre a vecchio stile così che vengano ereditate dal <body>.
body {
font-variant-numeric: oldstyle-nums;
}
Per i browser legacy che richiedono font-feature-settings, usate il feature tag onum di OpenType. Come spiegato in ‘Ligatures and abbreviations’; potete aggiungere una regola @supports per gestire i browser legacy che supportano solo font-feature-settings:
body {
font-feature-settings: "onum" 1;
}
@supports (font-variant-numeric: oldstyle-nums) {
body {
font-feature-settings: normal;
font-variant-numeric: oldstyle-nums;
}
}
Molti font sans serif dell’inizio fino alla metà del ventesimo secolo, incluso Helvetica, non sono mai stati progettati con null’altro che le cifre lining. Questo è uno dei motivi per cui Helvetica è raramente la scelta ottimale per il corpo del testo. Detto ciò, le cifre lining sono meno un problema in Helvetica di quanto non lo siano in altri caratteri. Come abbiamo visto in ‘Designing paragraphs: line spacing’, Helvetica ha una grande x-height. Una conseguenza di ciò è che le sue lettere minuscole sono più vicine in altezza ai suoi numeri lining quando confrontate con altri font sans serif come Futura e Avenir, che hanno delle x-heights molto più piccole.
Confrontati con le cifre vecchio stile, i numeri lining gridano forte in Avenir.
Chiaramente Paul Renner e Adrian Frutiger, i designer rispettivamente di Futura e Avenir, hanno riconosciuto la necessità di numeri vecchio stile nei loro font, dal momento che entrambe questi caratteri sono stati disegnati incorporandoli fin dall’inizio. Tristemente, le versioni ampiamente distribuite con i device Apple di Futura e Avenir hanno i numeri lining come default e non includono i numeri vecchio stile come feature OpenType (tuttavia, la versione di Avenir Next in macOS li include).
Usate i numeri lining negli heading#section2
I numeri vecchio stile sono i glifi che dovete usare per far star bene i numeri nel corpo del testo. Per la stessa ragione vanno bene con le lettere minuscole, pertanto i numeri vecchio stile non sembrano stare bene quando sono molto vicini alle lettere maiuscole. Se impostate i titoli in qualunque cosa diversa dal “sentence case” (prima lettera della frase maiuscola), in particolare in ALL CAPS o in Title Case, allora non usate i numeri vecchio stile. I numeri lining sembreranno molto più naturali in compagnia delle lettere maiuscole.
I numeri lining sembrano molto più naturali nei titoli rispetto ai numeri vecchio stile.
In quelle occasioni in cui i numeri sono l’attrazione principale, i numeri lining sono il modo per dare loro l’attenzione che bramano. I numeri vecchio stile hanno un intrinseco ritmo ondulato, con alcuni numeri che svettano verso l’alto, verso le maiuscole, altri che si accucciano alla x-height e altri che si abbassano sotto la baseline: 1234567890. Questo è il motivo per cui funzionano così bene nella lettura continua: replicano il pattern delle parole nel corpo del testo. Tuttavia, se il vostro lettore sta dando una scorsa a una sequenza di numeri, cercando dei pattern, facendo confronti o ricercando dei dati in un elenco, in una tabella o in una qualche altra configurazione, troveranno molto più semplice farlo con la famigliarità e l’uniformità dei numeri lining. Per specificare i numeri lining, impostate la proprietà font-variant-numeric al valore lining-nums:
h1 {
font-variant-numeric: lining-nums;
}
Per i legacy browser che richiedono font-feature-settings, usate il feature tag lnum di OpenType.
Usate pedici e apici appropriati#section3
Pedici e apici sono piccoli numeri che vengono abbassati o alzati. Sono usati nelle formule chimiche e matematiche, come indicatori di note a piè di pagina e in altre situazioni specialistiche. Per esempio: ‘Caffeina1 è C8H10N4O2’. In HTML, utilizzate il markup appropriato per queste figure, usando gli elementi <sup> e <sub>:
Caffeine<sup>1</sup> is C<sub>8</sub>H<sub>10</sub>
N<sub>4</sub>O<sub>2</sub>.
Gli stili di default dei browser per <sup> e <sub> consistono nel prendere un numero regolare, rimpicciolirlo un po’ e alzarlo o abbassarlo di conseguenza:
Questo funziona bene fino a un certo punto, ma i numeri sono ancora un po’ troppo grandi esteticamente e influenzano il line spacing, causando un’irregolarità nel ritmo:
La maggior parte dei font professionali contiene degli apici e dei pedici progettati in maniera appropriata, inclusi come feature OpenType. Questi numeri sono più piccoli dei numeri regolari e dal momento che la loro posizione relativa ad altri caratteri fa parte del loro design, la line space non ne è influenzata:
Per usare i pedici e gli apici giusti, usate la proprietà font-variant-position, in questo modo:
sub { font-variant-position: sub; }
sup { font-variant-position: super; }
Sfortunatamente, questo ci lascia con un problema: si applicano ancora gli stili di default del browser. Il nostro carattere pedice speciale viene reso più piccolo e spostato in basso, influenzano la line space:
In alto: Stili di default di <sub>. Centro: pedici giusti con stili di default del browser. In basso: solo pedici giusti.
Gli stili che il browser applica ai nostri caratteri pedice sono questi:
vertical-align: sub;
font-size: smaller;
Dobbiamo rimuovere quegli stili per ottenere l’effetto desiderato, quindi la nostra regola adesso diventa:
sub { vertical-align: baseline;
font-size: inherit;
font-variant-position: sub; }
Questo funziona bene per i browser che supportano OpenType. Gli altri browser otterranno C8H10N4O2, un rendering degradato in confronto ai default del browser. Per gestirlo possiamo usare la regola @supports per controllare se il browser supporta font-variant-position e sovrascrivere solo gli stili di default del browser per <sub> se questo è il caso:
sub { font-variant-position: sub; }
@supports ( font-variant-position: sub ) {
sub { vertical-align: baseline;
font-size: inherit; }
}
Per i browser legacy che richiedono font-feature-settings, usate il feature tag sups di OpenType per gli apici e subs per i pedici. Se includiamo questi, otteniamo delle regole di stile complete e compatibili all’indietro, ma laddove due semplici proprietà avrebbero dovuto svolgere il lavoro, adesso abbiamo una proposizione molto più verbosa:
Pedici#section4
sub { font-feature-settings: "subs" 1; }
@supports (font-variant-position: sub) {
sub { font-feature-settings: normal;
font-variant-position: sub; }
}
@supports ((font-variant-position: sub) or (font-feature-settings: "subs" 1)) {
sub { vertical-align: baseline;
font-size: inherit; }
}
Apici#section5
sup { font-feature-settings: "sups" 1; }
@supports (font-variant-position: super) {
sup { font-feature-settings: normal;
font-variant-position: super; }
}
@supports ((font-variant-position: super) or (font-feature-settings: "sups" 1)) {
sup { vertical-align: baseline;
font-size: inherit; }
}
Note di riferimento con apici#section6
Un particolare uso degli apici è per le note a piè di pagina. Quando fate riferimento alle note usando i numeri, usate i veri apici nel testo ma numeri a dimensione intera nelle note stesse.
Mostrare le note a piè di pagina nel contesto#section7
Dal momento che stiamo trattando le note a piè di pagina, vale la pena fare una breve digressione nel modo in cui il web migliora la loro usabilità rispetto alle limitazioni imposte dalla carta.
Molte forme di scrittura, inclusi gli articoli accademici, i romanzi storici, il giornalismo dettagliato e i saggi come questo contengono ulteriori citazioni, spiegazioni e pensieri che fanno riferimento a punti all’interno del testo stesso. Si usa un simbolo per collegare la nota alla posizione rilevante nel testo. I simboli impiegati come riferimenti alle annotazioni sono o dei numeri in apice o delle serie esoteriche di simboli che cominciano con gli asterischi* per arrivare ai pugnali† e ai doppi pugnali‡ e così via.
Dall’avvento della stampa di massa nell’era Vittoriana, le note stesse sono state tipicamente posizionate o alla fine della pagina stampata in cui vi si fa riferimento (note a piè di pagina), o alla fine di un capitolo o di un’intera opera (note di chiusura). Tuttavia, questo approccio implica che le note siano localizzate lontane dalla loro posizione all’interno del corpo del testo. Questo può disturbare il lettore che vorrebbe far riferimento all’annotazione man mano che procede nel testo. I punti connessi nel testo potrebbero benissimo essere a metà di una frase nel mezzo di un paragrafo in un qualche punto in alto nella pagina o addirittura in una pagina precedente e cercare di ritornarvi interrompe il ritmo di lettura del lettore.
Un approccio antecedente adottato dagli scrivani medievali e dagli stampatori rinascimentali piazzava le note nei margini (note a margine) piuttosto che in fondo alla pagina. Includendo le note come note a margine, le annotazioni sono presenti dove necessario e possono essere lette distogliendo un attimo lo sguardo dal testo principale.
Una nota a margine in un manoscritto del Nono Secolo. Fonte: Einsiedeln, Stiftsbibliothek, Codex 172(1128)
Sebbene le note a margine siano un miglioramento rispetto alle note a piè di pagina, entrambe le soluzioni sono progettate all’interno dei confini bidimensionali della pagina stampata. Il web è un medium interattivo e ci fornisce almeno tre dimensioni in cui lavorare, il che implica che possiamo usare l’asse z per mettere le note sopra al testo principale.
Permette al vostro lettore di rivelare le note “on demand” nel medesimo posto in cui stanno leggendo. In soldoni, collegate la nota a piè di pagina usando un simbolo convenzionale ma fatela apparire in prossimità del link, fornendo così una soluzione davvero moderna impossibile all’interno dei limiti imposti dalla carta stampata.
Cliccare su un apice potrebbe far saltar fuori una nota in situ.
Volete leggerne ancora?#section8
Questo estratto da Web Typography vi ha aiutato a cominciare. Ordinate oggi la vostra copia completa.
Nessun commento
Altro da ALA
Webwaste
Uno strumento essenziale per catturare i vostri progressi lavorativi
Andiamo al cuore dell’accessibilità digitale
JavaScript Responsabile, Parte II
JavaScript Responsabile: parte prima