Post on 25-May-2015
description
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!
domenica 17 ottobre 2010
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!
domenica 17 ottobre 2010
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?
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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!
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
Però non sarebbe giusto considerare la questione come una semplice faccenda di scelta/imposizione di font.
Garamondvs
Minion Pro
domenica 17 ottobre 2010
Non è questione di Garamond versus Minion
domenica 17 ottobre 2010
Non è questione di Garamond versus Minion
Tipogra!aIl procedimento di stampa per mezzo di caratteri mobili in rilievo. Dizionario Devoto Oli
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
Anche quelli online
Tipogra!aTecnologia per produrre testi stampati usando matrici composte di caratteri mobili o di lastre inchiostrate. Wikipedia Italia
domenica 17 ottobre 2010
Perfino wikipedia
Typography is the art of creating and setting type with the purpose of honoring the text it sets. Pascal Klein
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
(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
domenica 17 ottobre 2010
Un'arte che riguarda il rapporto tra stampa e contenuto, informazione e lingua.
domenica 17 ottobre 2010
Ripartiamo da qui, allora.Ha senso parlare di tipografia degli epub. Come si può fare?
domenica 17 ottobre 2010
Ci sono decine di device, tecnologie, schermi, risoluzioni.
domenica 17 ottobre 2010
Da una parte c'è il libro, nella sua tangibile unicità di fruizione.
ePub
e-Ink readerweb browser
iBooksAndroid
domenica 17 ottobre 2010
Dall'altra c'è un file e molteplici modi di fruirlo. Come fare?
Progressive Enhancement
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
Quindi, passando finalmente alle buone pratiche, concentriamoci sul contenuto:
1. ContenutoParole → Frasi → Paragra! → Capitoli → Sezioni → Libri
domenica 17 ottobre 2010
La prima cosa da fare è conoscere bene il contenuto che si va a impaginare.
StrutturaListe, tabelle, immagini, codice, epistole, aforismi, dediche, citazioni …
domenica 17 ottobre 2010
Qual è la sua struttura...
Struttura<b> → <span> → <p> →
<h1> → <div> →…
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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!?
domenica 17 ottobre 2010
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 …
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
Il tipo di alfabeto usato condiziona radicalmente le scelte possibili.
3. LicenzaPosso davvero usare quel carattere?
domenica 17 ottobre 2010
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;}
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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...
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
Per contenere le dimensioni dei file da incorporare si può fare riferimento (se la licenza consente la modifica) al subsetting.
FontSquirrelhttp://www.fontsquirrel.com/
domenica 17 ottobre 2010
Una risorsa semplice da usare è il generator di Fontsquirrel.
5. PresentazioneReset CSShtml, body, div, span, p {
margin:0; padding:0; border:0; outline:0; font-size:100%;
}
domenica 17 ottobre 2010
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%;
}
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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; }
domenica 17 ottobre 2010
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.
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
E' necessario ridurre il corpo del Bell Gothic all'80% del suo valore originale perchè abbia la stessa altezza della x.
domenica 17 ottobre 2010
Abbiamo quasi finito, ma qualcuno potrebbe chiedere: ehi, e dov'è finito il progressive enhancement?
iBooksUn esempio pratico
domenica 17 ottobre 2010
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/
domenica 17 ottobre 2010
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.
iBooksSupporta CSS3Supporta Javascript
domenica 17 ottobre 2010
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" />
domenica 17 ottobre 2010
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 (device-width: 768px)"
href="../styles/ipad.css" />
domenica 17 ottobre 2010
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" />
domenica 17 ottobre 2010
oppure per un iphone 4, con retina display...
JavascriptSi può usare Javascript per correggerealcune limitazioni di iBookslimitatamente allo stile tipogra!co(ma non solo)
domenica 17 ottobre 2010
Javascript invece può essere usato per sostituire tutti i testi compresi nei tag P in tag SAMP, i quali possono essere stilati correttamente.
Caveat
domenica 17 ottobre 2010
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
domenica 17 ottobre 2010
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/matteo@matteobalocco.it
Creditshttp://www.%ickr.com/photos/maureen_sill/2565591589/#/
domenica 17 ottobre 2010
Ho finito.Domande?