Per una Tipografia degli ePub

Per una tipogra!a degli ePubMatteo Balocco

domenica 17 ottobre 2010

Ha senso parlare - ora - di tipografia degli ePub?Di questi tempi la priorità sembra un’altra: gli editori stanno facendo enormi sforzi per “esserci”, per avere piccolo posticino al sole, magari con il loro back-catalog.E i lettori, tutto sommato, si leggono di tutto. Non è vero?

1

18

61

27

3

0 10 20 30 40 50 60 70

Insufficiente

Mediocre

Sufficiente

Buona

Ottima

Giudizio sulla qualità tipografica!media degli ebook!


Per dare una risposta più precisa a questo interrogativo ho preparato un breve questionario, niente di strettamente scientifico, quanto piuttosto qualcosa che mi aiutasse a definire i contorni di un contesto, quello della lettura di libri elettronici in rapporto alla qualità tipografica.Il questionario, tra le altre cose, ha fatto emergere alcuni risultati a mio parere interessanti.Il primo è che solo un lettore su 4 del campione è realmente soddisfatto della qualità tipografica dei libri elettronici.La fascia intermedia, come spesso accade in questi casi, è molto popolata. Per avere un quadro più preciso conviene prendere in considerazione altri dati.

67

45

31

15 14 12 7 6 15

0 10 20 30 40 50 60 70 80

Aumen

to fon

t

Cambio

font

Testo

gius

tifica

to

Meno m

argin

i

No mod

ifiche

Riduzio

ne fo

nt

Più mar

gini

Testo

a sin

istra

Altro

Modifiche più frequenti!


E si arriva al secondo dato: una larghissima maggioranza di lettori modifica l'aspetto degli ebook che legge, in un modo o nell'altro. Solo 14 persone su 110 non apportano modifiche di alcun tipo.

0% 20% 40% 60% 80% 100%

Interattività

tipografia

navigabilità

catalogo

compatibilità

Gestione DRM

Multimedialità

per niente

poco

indifferente

molto

assolutamente

In cosa si dovrebbero migliorare gli ebook?


Terzo dato: se escludiamo la disponibilità dell'offerta a catalogo, gli argomenti sentiti come migliorabili da parte dei lettori sono la qualità tipografica, la navigabilità degli ebook e la compatibilità cross-device. Tutti argomenti tra loro strettamente correlati.


Cosa significano questi dati? Che lettura darne?Per lungo tempo abbiamo visto passare di tutto sui nostri ebook reader: impaginati pdf con crocini di registro (quando andava bene), txt, html, pdf di documenti txt, ecc...

Eppure non basta avere il testo completo di un libro, in versione digitale, per poterlo considerare un prodotto compiuto.Il libro è contenuto e presentazione.


Qual è la frase che pronunciano più spesso i detrattori degli ebook?Non c’è l'odore della carta. Balle!Quello che manca, spesso, è altro: il colore, il timbro, l'intonazione del testo.Un avvocato che arringasse l'uditorio con un tono monocorde, potrebbe essere un brillante esperto di norme e cavilli, ma sarebbe noioso e alla fine rischierebbe di perdere tutte le cause.

67

45

31

15 14 12 7 6 15

0 10 20 30 40 50 60 70 80

Aumen

to fon

t

Cambio

font

Testo

gius

tifica

to

Meno m

argin

i

No mod

ifiche

Riduzio

ne fo

nt

Più mar

gini

Testo

a sin

istra

Altro

Modifiche più frequenti!


Questa cosa vale anche per i libri. E ce lo fanno notare i lettori stessi, cercando di rimediare con soluzioni proprie, o quelle messe a disposizione dai reader.

Un ebook Kindle si riconosce subitoper la sua tipogra!a.

Il PMN Caecilia èormai un marchio distintivo.


Inoltre, non è secondario, l'aspetto tipografico di un libro, insieme alla scuderia di autori, è la cifra che identifica una casa editrice. Il bibliofilo sa distinguere le edizioni da una sola semplice pagina stampata.Questo a suo modo l'ha capito bene Bezos. Il Kindle ha una sua forma tipografica molto rigida - discutibile quanto si vuole - ma efficace e soprattutto riconoscibile, grazie anche all’uso del font PMN Caecilia.

Garamondvs

Minion Pro


Però non sarebbe giusto considerare la questione come una semplice faccenda di scelta/imposizione di font.

Garamondvs

Minion Pro


Non è questione di Garamond versus Minion


Non è questione di Garamond versus Minion

Tipogra!aIl procedimento di stampa per mezzo di caratteri mobili in rilievo. Dizionario Devoto Oli


C'è una reale cesura tra ciò che significa la parola Tipografia per i dizionari italiani

Tipogra!aIl procedimento di stampa più comune, quello con i caratteri in rilievo. Dizionario Garzanti


Anche quelli online

Tipogra!aTecnologia per produrre testi stampati usando matrici composte di caratteri mobili o di lastre inchiostrate. Wikipedia Italia


Perfino wikipedia

Typography is the art of creating and setting type with the purpose of honoring the text it sets. Pascal Klein


E per chi ci lavora. Si passa da una descrizione che riguarda la fisicità dei caratteri mobili, delle lastre, qualcosa che riguarda prettamente la tecnologia a qualcosa che invece riguarda una missione, una competenza, un'arte.

Typography has one plain duty and that is to convey information in writing. Emil Ruder


(Emil Ruder, uno dei padri della Scuola Svizzera.)

Most people think typography is about fonts.Most designers think typography is about fonts.

Typography is more than that: it’s expressing language through type.Mark Boulton


Un'arte che riguarda il rapporto tra stampa e contenuto, informazione e lingua.


Ripartiamo da qui, allora.Ha senso parlare di tipografia degli epub. Come si può fare?


Ci sono decine di device, tecnologie, schermi, risoluzioni.


Da una parte c'è il libro, nella sua tangibile unicità di fruizione.

ePub

e-Ink readerweb browser

iBooksAndroid


Dall'altra c'è un file e molteplici modi di fruirlo. Come fare?

Progressive Enhancement


Steven Champeon, nel 2003 presento al SxSW di Austin, il paradigma del Progressive Enhancement. Era un concetto rivoluzionario e quindi passò inosservato fino a quando, Aaron Gustafson, giusto 2 anni fa, pubblicò due articoli su A List Apart.

Graceful Degradation


Il PE sostanzialmente inverte il principio della Graceful Degradation, per cui un sito web deve essere sviluppato per i browser di ultima generazione e garantire un aspetto decente per i browser meno moderni.Si prepara inizialmente invece un sito ridotto all'osso, fruibile da tutti i browser allo stesso modo, e poi si migliora gradualmente la fruizione e l'esperienza utente all'aumentare delle possibilità offerte dai singoli browser.


La differenza tra i due modelli è sottile ma significativa. La GD parte dai device. Il PE prende in considerazione prima il contenuto.Ecco la chiave.


Quindi, passando finalmente alle buone pratiche, concentriamoci sul contenuto:

1. ContenutoParole → Frasi → Paragra! → Capitoli → Sezioni → Libri


La prima cosa da fare è conoscere bene il contenuto che si va a impaginare.

StrutturaListe, tabelle, immagini, codice, epistole, aforismi, dediche, citazioni …


Qual è la sua struttura...

Struttura<b> → <span> → <p> →

<h1> → <div> →…


che equivale, sostanzialmente, a un mark up molto minimale e coerente dal punto di vista semantico, fatto di P, SPAN, DIV, ecc...

Perché è importante?La struttura di un testo ne condizionala sua composizione, la sua presentazione,la sua navigazione.


Sarà questo lo scheletro su cui lavorare con i fogli di stile, ma non solo. Sulla base di questa struttura, della sua reale comprensione, verrà costruita la navigazione del libro.

2. LinguaQuali lingue vengono usate nel testo?Quali alfabeti? Quali gli!?


Subito dopo, o anche contemporaneamente, deve essere fatta un'altra operazione, ovvero controllare che tipo di caratteri sono coinvolti.Non si sta parlando di grazie o bastoni, bensì di range unicode: accenti, diacritici, simboli, interpunzioni.

“ apertura doppie virgolette “” chiusura doppie virgolette ”‘ apertura virgolette ‘‘ chiusura virgolette ’– trattino en –— trattino em —− meno −… puntini di sospensione …


Non solo: la cosa migliore è approfittare di questo passaggio per sostituire eventuali imprecisioni quali apostrofi al posto di virgolette semplici, tre punti al posto dell'ellissi, il meno al posto del trattino, e così via.

Perché è importante?Non tutti i caratteri tipogra!ci hanno unadeguato supporto Unicode.


Il tipo di alfabeto usato condiziona radicalmente le scelte possibili.

3. LicenzaPosso davvero usare quel carattere?


Arrivati fin qui bisogna affrontare un passaggio obbligato: la verifica sull'effettiva disponibilità dei font che intendiamo usare. La questione della Licenza è particolarmente delicata e rappresenta anzi una delle sfide più interessanti per chi si occuperà in futuro di ebook design.

@font-face { font-family: 'Junicode'; src: local('☺'), url('../fonts/Junicode-Regular.otf ') format('opentype'); font-weight: normal; font-style: normal;}


Com'è noto, gli epub consentono l'incorporamento di font esterni attraverso la direttiva CSS @font-face. Sembra il paradiso.

LicenzaIncorporare un carattere in un ePubequivale a distribuirlo.


Scordatevi però di poter utilizzare la maggior parte dei font commerciali, come il Garamond, il Sabon, Minion Pro, eccetera eccetera. La natura stesa dell'epub, ovvero un file compresso contenente contenuto xml, foglio di stile e asset, rappresenta insieme potenza e limite del medium. Incorporare font significa infatti redistribuirli.

LicenzaSIL Open FontGNU-GPLCCPublic DomainApache...


Meglio concentrarsi su font rilasciati con licenze generose, che consentono l'uso, la distribuzione e - se possibile - la modifica (vedremo dopo perchè).

CarattereVeri!care i range UnicodeEscludere i font che non copronol’intero range richiesto.


Dalla lista di questi font, bisognerà poi togliere quelli che eventualmente non rientrano per estensione di glifi, con quelli richiesti dal testo da impaginare.

Quali caratteri?Considerare un serif, un sans e, se serve, un monospace


Se siamo sopravvissuti a questo primo round preparatorio dovremo operare alcune scelte, finalmente. Indicativamente, ma non obbligatoriamente:Un Serif per i blocchi di testo estesi.Un Sans per le didascalie, le tabelle e i titoliUn Monospace per i blocchi di codice, se necessari.

4. SubsettingIncorporare solo i gli! effettivamenteusati nel testo.


Per contenere le dimensioni dei file da incorporare si può fare riferimento (se la licenza consente la modifica) al subsetting.

FontSquirrelhttp://www.fontsquirrel.com/


Una risorsa semplice da usare è il generator di Fontsquirrel.

http://www.fontsquirrel.com

http://www.fontsquirrel.com

5. PresentazioneReset CSShtml, body, div, span, p {

margin:0; padding:0; border:0; outline:0; font-size:100%;

}


La cosa migliore, a mio parere, è impostare da subito una serie di stili che consentano di lavorare il più possibile con misure coerenti, a prescindere dal device utilizzato.Questi stili, comunemente si chiamano Reset CSS, sono discretamente diffusi nel webdesign, e anche per quel che riguarda i lettori di ebook, dalle prime prove empiriche, danno buoni risultati.

Reset CSShtml, body, div, span, p {

margin:0; padding:0; border:0; outline:0; font-size:100%;

}


Il Reset CSS imposta normalmente anche il font base, ovvero quello usato nei blocchi di testo estesi, quello che stampa il testo più presente in un libro. Un font base al 100% di solito viene restituito dagli ebook reader a 12pt (un pica). Ci sono delle eccezioni, ADE per desktop in particolare, ma niente che determini problemi insormontabili.

Don’t compose without a scale.Robert Bringhurst


Robert Bringhurst, uno dei padri della tipografia moderna, ammonisce così:Non fate composizione senza usare una scala.Non si riferisce alla musica ma alla tipografia, e in realtà quello che ha in mente è proprio il ritmo. Si tratta però di ritmo tipografico, orizzontale e verticale.Definire un corretto rapporto tra le dimensioni del testo e dei titoli, mantenendo al contempo la giusta interlinea, è una delle sfide più appassionanti per chi lavora sull'impaginazione dei libri.

6. Unità di misuraPixel & PuntioppureEm & Percentuali


E abbiamo risolto, per ora, la questione dei caratteri, ma abbiamo toccato quella delle unità di misura.Quali usare? Assolute o proporzionali?Potendo scegliere la mia preferenza va sempre sulle proporzionali, perchè consentono l’adattabilità anche in caso di ridimensionamento da parte dell’utente.

Scala tradizionale

6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 96


Tra le scale utilizzabili si può partire con la scala tipografica tradizionale, che ritroviamo normalmente anche nel dropdown menu di Word o di altri editor di testo.

Scala Fibonacci

8 13 21 34 55 89 144


Quella di Fibonacci, secondo la quale ogni valore è il risultato della somma dei due valori precedenti. La scala di Fibonacci tende a seguire anche il rapporto noto come sezione aurea.

Scala Modulor

8 10,5 13 17 21 27,5 34 44,5 55 72 89


O il Modulor creato da Le Corbusier.

Scala tipogra!caEsempio: Fibonacci (8:13)body { font-size:100%; line-height:1.25; }h1 { font-size:2.61538em; padding:1.28666em 0; }h2 { font-size:1.61538em; padding:1.30936em 0; }h3 { font-size:1em; padding:1.25em 0; }


Essenziale è esprimere queste dimensioni utilizzando valori proporzionali, in questo caso gli Em. In questo modo, ogni ridimensionamento forzato dall'utente, avverrà in forma armoniosa non solo sul testo base ma anche su tutte le altre porzioni di testo che fanno riferimento ad esso, come titoli, liste, eccetera.

CarattereNell’accostare i caratteri, fare attenzionealle differenti x-height.


Non basta seguire le scale tipografiche.Bisogna anche fare in modo che le dimensioni dei font siano armoniose tra loro, in caso di font differenti.

x-height x-heightMinion Pro 72pt Bell Gothic Std 72pt


Nel caso si usino più caratteri contemporaneamente può essere utile prendere in considerazione la differenza di ratio tra le x-height.La x-height misura l'altezza della x minuscola di un carattere e, visto che tutti i caratteri minuscoli privi di ascendente hanno quell'altezza, la x-height determina anche la reale percezione della grandezza di un carattere.Ogni carattere ha una sua x-height e due caratteri, pur con dimensioni uguali, possono avere x-height differenti e quindi apparire uno più grande dell'altro. E' il caso del Minion Pro e del Bell Gothic Std.

x-height x-heightMinion Pro 72pt Bell Gothic Std 58pt


E' necessario ridurre il corpo del Bell Gothic all'80% del suo valore originale perchè abbia la stessa altezza della x.


Abbiamo quasi finito, ma qualcuno potrebbe chiedere: ehi, e dov'è finito il progressive enhancement?

iBooksUn esempio pratico


Non me l'ero scordato, e lo accennerò solamente, facendo un esempio pratico.iBooks, secondo quanto espresso un po' ovunque, non consente l'embedding di font personalizzati.Giusto?

iBooksCustom Fontshttp://www.totanus.net/journal/47/


Sbagliato!Si può fare. Qui vedete una schermata del mio ipad. Ho trovato una tecnica per visualizzare font custom su iBooks. Purtroppo il problema riguarda la memoria dell'iPad, per cui oltre un certo numero di sostituzioni, il device non riesce a far fronte alla richiesta e visualizza il font predefinito.

http://www.totanus.net/journal/47/

http://www.totanus.net/journal/47/

iBooksSupporta CSS3Supporta Javascript


Per visualizzare un font alternativo, tra quelli preinstallati su iPad, bisogna ricorrere a una serie di hack che spesso comportano l’uso di markup non semantico.La cosa positiva però è che ibooks si basa su Webkit e quindi supporta, pur parzialmente, una serie di opzioni che ADE, per esempio non considera: in particolare i CSS3 e javascript.

Media Queries

<link rel="stylesheet" media="only screen and (device-width: 768px)"

href="../styles/ipad.css" />


I CSS3 per esempio prevedono la possibilità di servire fogli di stile specifici sulla base di alcune caratteristiche del client usato: si tratta delle cosiddette Media Queries.Per esempio, fornire un foglio di stile solo in caso di visualizzazione di un epub su ipad orientato in modalità landscape.

Media Queries

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="../styles/retina.css" />


oppure per un iphone 4, con retina display...

JavascriptSi può usare Javascript per correggerealcune limitazioni di iBookslimitatamente allo stile tipogra!co(ma non solo)


Javascript invece può essere usato per sostituire tutti i testi compresi nei tag P in tag SAMP, i quali possono essere stilati correttamente.

Caveat


Attraverso i css, insomma, si può iniziare un primo processo di device detection che, in alcuni casi, può essere potenziata anche dal supporto javascript. Attenzione, però: CSS3 e Javascript non sono standard ePub e quindi, a seconda dell’implementazione, potrebbero non passare l’esame del validatore ePubCheck.

Conclusioni


Per chiudere, la risposta alla domanda iniziale è : sì, si può parlare di tipografia negli epub; si può iniziare a lavorarci sopra e, credo, farlo può solo portare buoni frutti per l'industria editoriale e per i lettori. Gli strumenti ci sono.

Domande?http://www.totanus.net/[email protected]

Creditshttp://www.%ickr.com/photos/maureen_sill/2565591589/#/


Ho finito.Domande?

mailto:[email protected]










Per una Tipografia degli ePub

Design

Transcript of Per una Tipografia degli ePub