{"id":793,"date":"2018-02-19T15:35:28","date_gmt":"2018-02-19T14:35:28","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/tipografia-web-numeri\/"},"modified":"2018-02-19T15:35:28","modified_gmt":"2018-02-19T14:35:28","slug":"tipografia-web-numeri","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/tipografia-web-numeri\/","title":{"rendered":"Tipografia Web: numeri"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere con voi un estratto dal Capitolo 2 del nuovo libro di Richard Rutter, \u201cWeb Typography\u201d<\/a>.<\/p>\n<\/div>\n

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\u00f9 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.<\/p>\n

\n

Usate numeri vecchio stile nel testo in riga<\/h2>\n

In \u2018Ligatures and abbreviations\u2019 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 \u2018maiuscoli\u2019 0123456789<\/span> chiamati numeri lining<\/em> o titling<\/em>, e le cifre \u2018minuscole\u2019 0123456789 chiamate vecchio stile<\/em> o cifre di testo<\/em>.<\/p>\n

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\u00ec i numeri lining richiamano su s\u00e9 stessi un’attenzione non dovuta. Le sterline, i dollari, le date e le quote davvero pi\u00f9 importanti delle parole e delle idee che danno loro contesto e significato?<\/p>\n

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\u00f9 moderni e professionali includono sia le cifre vecchio stile sia quelle lining come feature OpenType. Uno o l’altro di questi stili verr\u00e0 usato per i numeri di default. Pi\u00f9 spesso saranno i numeri vecchio stile, ma non c’\u00e8 una regola o una coerenza rigorosa e la scelta di default spetta al type designer.<\/p>\n

Si d\u00e0 anche il caso che la vasta maggioranza dei font non siano n\u00e9 moderni n\u00e9 professionali, se moderno significa \u201cOpenType enabled\u201d 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, \u00e8 estremamente ben fatto, elegante e affascinante e uno dei font pi\u00f9 popolari e ampiamente distribuiti nel mondo. Ma non \u00e8 equipaggiato con un font OpenType e quindi contiene un solo insieme di numeri, in questo caso cifre vecchio stile. Times New Roman, che \u00e8 altrettanto diffuso, ma anch’esso non come font OpenType, \u00e8 equipaggiato solo con le cifre lining. Georgia e Times New Roman sono cos\u00ec ampiamente distribuiti perch\u00e9 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.<\/p>\n

\"Grafica<\/p>\n

Sopra:<\/em> Cifre in Times New Roman Pro<\/span>.
Sotto:<\/em> Cifre in Georgia Pro.<\/p>\n<\/div>\n

Per specificare le cifre vecchio stile, impostate la propriet\u00e0 font-variant-numeric<\/code> a un valore di oldstyle-nums<\/code>. Se la maggior parte di quello che state progettando su una pagina \u00e8 testo in riga, allora il miglior approccio per voi consiste nell’impostare le cifre a vecchio stile cos\u00ec che vengano ereditate dal <body><\/code>.<\/p>\n

body <\/span>{<\/span>\n    font-variant-numeric<\/span>:<\/span> oldstyle-nums;<\/span>\n}<\/span>\n<\/code><\/pre>\n
Per i browser legacy che richiedono font-feature-settings<\/code>, usate il feature tag onum<\/code> di OpenType. Come spiegato in \u2018Ligatures and abbreviations\u2019; potete aggiungere una regola @supports<\/code> per gestire i browser legacy che supportano solo font-feature-settings<\/code>:<\/p>\n
body <\/span>{<\/span>\n    font-feature-settings<\/span>:<\/span> \"onum\"<\/span> 1;<\/span>\n}<\/span>\n@supports (font-variant-numeric: oldstyle-nums) <\/span>{<\/span>\n    body <\/span>{<\/span>\n        font-feature-settings<\/span>:<\/span> normal;<\/span>\n        font-variant-numeric<\/span>:<\/span> oldstyle-nums;<\/span>\n    }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Molti font sans serif dell’inizio fino alla met\u00e0 del ventesimo secolo, incluso Helvetica, non sono mai stati progettati con null’altro che le cifre lining. Questo \u00e8 uno dei motivi per cui Helvetica \u00e8 raramente la scelta ottimale per il corpo del testo. Detto ci\u00f2, le cifre lining sono meno un problema in Helvetica di quanto non lo siano in altri caratteri. Come abbiamo visto in \u2018Designing paragraphs: line spacing\u2019, Helvetica ha una grande x-height. Una conseguenza di ci\u00f2 \u00e8 che le sue lettere minuscole sono pi\u00f9 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\u00f9 piccole.<\/p>\n
\"Graphic<\/p>\n
Confrontati con le cifre vecchio stile, i numeri<\/span> lining gridano forte in Avenir.<\/p>\n<\/div>\n
Chiaramente Paul Renner e Adrian Frutiger, i designer rispettivamente di Futura e Avenir, hanno riconosciuto la necessit\u00e0 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).<\/p>\n
Usate i numeri lining negli heading<\/h3>\n
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 \u201csentence case\u201d (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\u00f9 naturali in compagnia delle lettere maiuscole.<\/p>\n
\"Grafica<\/p>\n
I numeri lining sembrano molto pi\u00f9 naturali nei titoli rispetto ai numeri vecchio stile.<\/p>\n
\u00a0<\/p>\n<\/div>\n
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 \u00e8 il motivo per cui funzionano cos\u00ec 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\u00f9 semplice farlo con la famigliarit\u00e0 e l’uniformit\u00e0 dei numeri lining. Per specificare i numeri lining, impostate la propriet\u00e0 font-variant-numeric<\/code> al valore lining-nums<\/code>:<\/p>\n
h1 <\/span>{<\/span>\n    font-variant-numeric<\/span>:<\/span> lining-nums;<\/span>\n}<\/span>\n<\/code><\/pre>\n
Per i legacy browser che richiedono font-feature-settings<\/code>, usate il feature tag lnum<\/code> di OpenType.<\/p>\n<\/div>\n
\n
Usate pedici e apici appropriati<\/h2>\n
Pedici e apici sono piccoli numeri che vengono abbassati o alzati. Sono usati nelle formule chimiche e matematiche, come indicatori di note a pi\u00e8 di pagina e in altre situazioni specialistiche. Per esempio: \u2018Caffeina1<\/sup> \u00e8 C8<\/sub>H10<\/sub>N4<\/sub>O2<\/sub>\u2019. In HTML, utilizzate il markup appropriato per queste figure, usando gli elementi <sup><\/code> e <sub><\/code>:<\/p>\n
Caffeine<sup>1<\/sup> is C<sub>8<\/sub>H<sub>10<\/sub>\nN<sub>4<\/sub>O<sub>2<\/sub>.\n<\/code><\/pre>\n
Gli stili di default dei browser per <sup><\/code> e <sub><\/code> consistono nel prendere un numero regolare, rimpicciolirlo un po’ e alzarlo o abbassarlo di conseguenza:<\/p>\n
\"Grafica<\/div>\n
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\u00e0 nel ritmo:<\/p>\n
\"Grafica<\/div>\n
La maggior parte dei font professionali contiene degli apici e dei pedici progettati in maniera appropriata, inclusi come feature OpenType. Questi numeri sono pi\u00f9 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 \u00e8 influenzata:<\/p>\n
\"Grafica<\/div>\n
Per usare i pedici e gli apici giusti, usate la propriet\u00e0 font-variant-position<\/code>, in questo modo:<\/p>\n
sub <\/span>{<\/span> font-variant-position<\/span>:<\/span> sub;<\/span> }<\/span>\nsup <\/span>{<\/span> font-variant-position<\/span>:<\/span> super;<\/span> }<\/span>\n<\/code><\/pre>\n
Sfortunatamente, questo ci lascia con un problema: si applicano ancora gli stili di default del browser. Il nostro carattere pedice speciale viene reso pi\u00f9 piccolo e spostato in basso, influenzano la line space:<\/p>\n
\"Grafica<\/p>\n
In alto:<\/em> Stili<\/span> di default di <sub>. Centro:<\/em> pedici giusti con stili di default del browser. In basso:<\/em> solo pedici giusti.<\/p>\n
\u00a0<\/p>\n<\/div>\n
Gli stili che il browser applica ai nostri caratteri pedice sono questi:<\/p>\n
vertical-align<\/span>:<\/span> sub;<\/span>\nfont-size<\/span>:<\/span> smaller;<\/span>\n<\/code><\/pre>\n
Dobbiamo rimuovere quegli stili per ottenere l’effetto desiderato, quindi la nostra regola adesso diventa:<\/p>\n
sub <\/span>{<\/span> vertical-align<\/span>:<\/span> baseline;<\/span>\n      font-size<\/span>:<\/span> inherit;<\/span>\n      font-variant-position<\/span>:<\/span> sub;<\/span> }<\/span>\n<\/code><\/pre>\n
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<\/code> per controllare se il browser supporta font-variant-position<\/code> e sovrascrivere solo gli stili di default del browser per <sub><\/code> se questo \u00e8 il caso:<\/p>\n
sub <\/span>{<\/span> font-variant-position<\/span>:<\/span> sub;<\/span> }<\/span>\n\n@supports ( font-variant-position: sub ) <\/span>{<\/span>\n  sub <\/span>{<\/span> vertical-align<\/span>:<\/span> baseline;<\/span>\n        font-size<\/span>:<\/span> inherit;<\/span> }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Per i browser legacy che richiedono font-feature-settings<\/code>, usate il feature tag sups<\/code> di OpenType per gli apici e subs<\/code> per i pedici. Se includiamo questi, otteniamo delle regole di stile complete e compatibili all’indietro, ma laddove due semplici propriet\u00e0 avrebbero dovuto svolgere il lavoro, adesso abbiamo una proposizione molto pi\u00f9 verbosa:<\/p>\n
Pedici<\/h4>\n
sub <\/span>{<\/span> font-feature-settings<\/span>:<\/span> \"subs\"<\/span> 1;<\/span> }<\/span>\n\n@supports (font-variant-position: sub) <\/span>{<\/span>\n    sub <\/span>{<\/span> font-feature-settings<\/span>:<\/span> normal;<\/span>\n          font-variant-position<\/span>:<\/span> sub;<\/span> }<\/span>\n}<\/span>\n<\/code><\/pre>\n
@supports ((font-variant-position: sub) or (font-feature-settings: \"subs\" 1)) <\/span>{<\/span>\n    sub <\/span>{<\/span> vertical-align<\/span>:<\/span> baseline;<\/span>\n          font-size<\/span>:<\/span> inherit;<\/span> }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Apici<\/h4>\n
sup <\/span>{<\/span> font-feature-settings<\/span>:<\/span> \"sups\"<\/span> 1;<\/span> }<\/span>\n\n@supports (font-variant-position: super) <\/span>{<\/span>\n    sup <\/span>{<\/span> font-feature-settings<\/span>:<\/span> normal;<\/span>\n          font-variant-position<\/span>:<\/span> super;<\/span> }<\/span>\n}<\/span>\n<\/code><\/pre>\n
@supports ((font-variant-position: super) or (font-feature-settings: \"sups\" 1)) <\/span>{<\/span>\n    sup <\/span>{<\/span> vertical-align<\/span>:<\/span> baseline;<\/span>\n          font-size<\/span>:<\/span> inherit;<\/span> }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Note di riferimento con apici<\/h3>\n
Un particolare uso degli apici \u00e8 per le note a pi\u00e8 di pagina. Quando fate riferimento alle note usando i numeri, usate i veri apici nel testo ma numeri a dimensione intera nelle note stesse.<\/p>\n
Mostrare le note a pi\u00e8 di pagina nel contesto<\/h4>\n
Dal momento che stiamo trattando le note a pi\u00e8 di pagina, vale la pena fare una breve digressione nel modo in cui il web migliora la loro usabilit\u00e0 rispetto alle limitazioni imposte dalla carta.<\/p>\n
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\u2020 e ai doppi pugnali\u2021 e cos\u00ec via.<\/p>\n
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\u00e8 di pagina<\/dfn>), o alla fine di un capitolo o di un’intera opera (note di chiusura<\/dfn>). Tuttavia, questo approccio implica che le note siano localizzate lontane dalla loro posizione all’interno del corpo del testo. Questo pu\u00f2 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\u00e0 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.<\/p>\n
Un approccio antecedente adottato dagli scrivani medievali e dagli stampatori rinascimentali piazzava le note nei margini (note a margine<\/dfn>) 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.<\/p>\n
\"Parte<\/p>\n
Una nota a margine in un manoscritto del Nono Secolo. Fonte: Einsiedeln, Stiftsbibliothek, Codex 172(<\/span>1128)<\/span><\/a><\/cite><\/p>\n<\/div>\n
Sebbene le note a margine siano un miglioramento rispetto alle note a pi\u00e8 di pagina, entrambe le soluzioni sono progettate all’interno dei confini bidimensionali della pagina stampata. Il web \u00e8 un medium interattivo e ci fornisce almeno tre dimensioni in cui lavorare, il che implica che possiamo usare l’asse z<\/em> per mettere le note sopra<\/em> al testo principale.<\/p>\n
Permette al vostro lettore di rivelare le note \u201con demand\u201d nel medesimo posto in cui stanno leggendo. In soldoni, collegate la nota a pi\u00e8 di pagina usando un simbolo convenzionale ma fatela apparire in prossimit\u00e0 del link, fornendo cos\u00ec una soluzione davvero moderna impossibile all’interno dei limiti imposti dalla carta stampata.<\/p>\n
\"screenshot<\/p>\n
Cliccare su un apice potrebbe far saltar fuori una nota in situ.<\/p>\n<\/div>\n<\/div>\n
\n
Volete leggerne ancora?<\/h2>\n
Questo estratto da Web Typography<\/cite> vi ha aiutato a cominciare. Ordinate oggi la vostra copia completa<\/a>.<\/p>\n
<\/div>\n
\"Copertina<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In questo estratto dal Capitolo 2 di Web Typography, Richard Rutter spiega l’importanza dell’uso corretto dei numeri nel nostro lavoro, incluso quando dovreste e non dovreste usare i caratteri numerici vecchio stile.<\/p>\n","protected":false},"author":818,"featured_media":7000830,"comment_status":"open","ping_status":"open","template":"","categories":[204,275],"tags":[],"coauthors":[522],"class_list":["post-793","article","type-article","status-publish","has-post-thumbnail","hentry","category-numero-226-24-ottobre-2017","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000830"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=793"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}