Per una Tipografia degli ePub

Per una tipogra a degli ePub
Matteo Balocco

domenica 17 ottobre 2010

Ha senso parlare - ora - di tipograﬁa 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?

Giudizio sulla qualità tipografica!
media degli ebook!
Ottima 3

Buona 27

Sufficiente 61

Mediocre 18

Insufficiente 1

0 10 20 30 40 50 60 70


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.

Modifiche più frequenti!
80 67
70
60
50 45
40 31
30
20 15 14 12 15
7 6
10
0
t

to

e

ni

ra

tro
ni

t
t
n

n
n

ch

gi
gi
fo

ca

st
fo
fo

Al
ar
ar

ifi

ni
i
to

ne
o

tif

od

m

si
m
bi
en

us

io
am

a
m

ù
o
m

uz
gi

Pi
en

to
o
Au

C

id
to

N

s
M

Te
R
s
Te


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.

In cosa si dovrebbero migliorare gli ebook?
Multimedialità

Gestione DRM

compatibilità
per niente
poco
catalogo
indifferente
molto
navigabilità
assolutamente

tipografia

Interattività

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


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


Cosa signiﬁcano 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 ﬁne rischierebbe di perdere tutte le cause.

Modiﬁche più frequenti!
80 67
70
60
50 45
40 31
30
20 15 14 12 15
7 6
10
0

t

to

e

ni

ra

tro
ni

t
t
n

n
n

ch

gi
gi
fo

ca

st
fo
fo

Al
ar
ar

ifi

ni
i
to

ne
o

tif

od

m

si
m
bi
en

us

io
am

a
m

ù
o
m

uz
gi

Pi
en

to
o
Au

C

id
to

N

s
M

Te
R
s
Te


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 subito
per 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.

Garamond
vs
Minion Pro


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

Garamond
vs
Minion Pro


Non è questione di Garamond versus Minion


Non è questione di Garamond versus Minion

Tipogra a
Il procedimento di stampa per mezzo
di caratteri mobili in rilievo.
Dizionario Devoto Oli


C'è una reale cesura tra ciò che signiﬁca la parola Tipograﬁa per i dizionari italiani

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


Anche quelli online

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


Perﬁno 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 ﬁsicità 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 tipograﬁa 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.

e-Ink reader
web browser
ePub
iBooks
Android


Dall'altra c'è un ﬁle 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 ﬁno 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 signiﬁcativa.
La GD parte dai device.
Il PE prende in considerazione prima il contenuto.
Ecco la chiave.


Quindi, passando ﬁnalmente alle buone pratiche, concentriamoci sul contenuto:

1. Contenuto
Parole → Frasi → Paragra →
Capitoli → Sezioni → Libri


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

Struttura
Liste, 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 condiziona
la 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. Lingua
Quali 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 è approﬁttare di questo passaggio per sostituire eventuali imprecisioni quali apostroﬁ 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 un
adeguato supporto Unicode.


Il tipo di alfabeto usato condiziona radicalmente le scelte possibili.

3. Licenza
Posso 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.

Licenza
Incorporare un carattere in un ePub
equivale 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 ﬁle compresso contenente contenuto xml, foglio di stile e asset, rappresenta insieme
potenza e limite del medium. Incorporare font signiﬁca infatti redistribuirli.

Licenza
SIL Open Font
GNU-GPL
CC
Public Domain
Apache
...


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

Carattere
Veri care i range Unicode
Escludere i font che non coprono
l’intero range richiesto.


Dalla lista di questi font, bisognerà poi togliere quelli che eventualmente non rientrano per estensione di gliﬁ, 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, ﬁnalmente. Indicativamente, ma non
obbligatoriamente:
Un Serif per i blocchi di testo estesi.
Un Sans per le didascalie, le tabelle e i titoli
Un Monospace per i blocchi di codice, se necessari.

4. Subsetting
Incorporare solo i gli effettivamente
usati nel testo.


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

FontSquirrel
http://www.fontsquirrel.com/


Una risorsa semplice da usare è il generator di Fontsquirrel.

5. Presentazione
Reset CSS
html, 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 CSS
html, 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 misura
Pixel & Punti
oppure
Em & 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 tipograﬁca 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 ca
Esempio: 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.

Carattere
Nell’accostare i caratteri, fare attenzione
alle diﬀerenti x-height.


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

x-height x-height
Minion 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-height
Minion 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 ﬁnito, ma qualcuno potrebbe chiedere: ehi, e dov'è ﬁnito il progressive enhancement?

iBooks
Un 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?

iBooks
Custom Fonts
http://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 predeﬁnito.

iBooks
Supporta CSS3
Supporta 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 speciﬁci 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...

Javascript
Si può usare Javascript per correggere
alcune limitazioni di iBooks
limitatamente 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 tipograﬁa 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

Credits
http://www. ickr.com/photos/maureen_sill/2565591589/#/


Ho ﬁnito.
Domande?

Per una Tipografia degli ePub

Recommended

Recommended

More Related Content

Featured

Featured (20)

Per una Tipografia degli ePub