• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Per una Tipografia degli ePub
 

Per una Tipografia degli ePub

on

  • 3,681 views

Alcune riflessioni e qualche buona pratica - secondo un approccio UX - per iniziare a considerare la tipografia nel design degli ebook usando lo standard epub. ...

Alcune riflessioni e qualche buona pratica - secondo un approccio UX - per iniziare a considerare la tipografia nel design degli ebook usando lo standard epub.

Il video della mia presentazione all'ebookCamp 2010. http://vimeo.com/16703675 #epub #tipografia

Statistics

Views

Total Views
3,681
Views on SlideShare
3,482
Embed Views
199

Actions

Likes
4
Downloads
44
Comments
2

6 Embeds 199

http://www.totanus.net 175
http://totanus.net 20
http://static.slidesharecdn.com 1
http://www.mefeedia.com 1
http://a0.twimg.com 1
http://ww.totanus.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ciao Matteo, grazie per il tuo apprezzamento.
    Riguardo agli ePub esistono tecniche css per incorporare i font e, soprattutto, esistono (non molte, ma esistono) famiglie di caratteri tipografici che garantiscono leggibilità e affidabilità (unicode range esteso).
    La cosa migliore, a mio parere, è sempre verificare di volta in volta il range unicode usato nel testo con quello messo a disposizione dal font che s'intende usare.
    Comunque, più che TypeKit io consiglierei di usare FontSquirrel (modificando ove necessario il codice @font-face autogenerato).
    Are you sure you want to
    Your message goes here
    Processing…
  • ho trovato molto interessante la presentazione.
    è difficile trovare pagine web create con una visione compositiva corretta. purtroppo il problema più grande non si va ancora a risolvere: l'utilizzo dei caratteri continua ad essere limitato.
    typekit e altre fonderie, come segnalato nella presentazione, offrono la possibilità di usare altri font, ma per la loro corretta funzionalità e necessario che il dispositivo in utilizzo sia connesso a internet.
    rimangono quindi a disposizione solamente gli ormai noti caratteri preinstallati sul device in utilizzo (e qui sarebbe bene stilare una lista di ciò che i nuovi device mettono a disposizione) o le risorse tipografiche open source.
    non sentendomi ancora in grado di disegnare un carattere tipografico, mi chiedo quando qualcuno si cimenterà nella realizzazione di un font dall'aspetto soddisfacente rilasciato sotto licenza open source.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Per una Tipografia degli ePub Per una Tipografia degli ePub Presentation Transcript

    • Per una tipogra a degli ePub Matteo Balocco lunedì 20 settembre 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?
    • 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 lunedì 20 settembre 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.
    • 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 lunedì 20 settembre 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.
    • 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% lunedì 20 settembre 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.
    • lunedì 20 settembre 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.
    • lunedì 20 settembre 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.
    • 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 lunedì 20 settembre 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 subito per la sua tipogra a. Il PMN Caecilia è ormai un marchio distintivo. lunedì 20 settembre 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.
    • Garamond vs Minion Pro lunedì 20 settembre 2010 Però non sarebbe giusto considerare la questione come una semplice faccenda di scelta/imposizione di font.
    • Garamond vs Minion Pro lunedì 20 settembre 2010 Non è questione di Garamond versus Minion
    • lunedì 20 settembre 2010 Non è questione di Garamond versus Minion
    • Tipogra a Il procedimento di stampa per mezzo di caratteri mobili in rilievo. Dizionario Devoto Oli lunedì 20 settembre 2010 C'è una reale cesura tra ciò che significa la parola Tipografia per i dizionari italiani
    • Tipogra a Il procedimento di stampa più comune, quello con i caratteri in rilievo. Dizionario Garzanti lunedì 20 settembre 2010 Anche quelli online
    • Tipogra a Tecnologia per produrre testi stampati usando matrici composte di caratteri mobili o di lastre inchiostrate. Wikipedia Italia lunedì 20 settembre 2010 Perfino wikipedia
    • Typography is the art of creating and setting type with the purpose of honoring the text it sets. Pascal Klein lunedì 20 settembre 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 lunedì 20 settembre 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 lunedì 20 settembre 2010 Un'arte che riguarda il rapporto tra stampa e contenuto, informazione e lingua.
    • lunedì 20 settembre 2010 Ripartiamo da qui, allora. Ha senso parlare di tipografia degli epub. Come si può fare?
    • lunedì 20 settembre 2010 Ci sono decine di device, tecnologie, schermi, risoluzioni.
    • lunedì 20 settembre 2010 Da una parte c'è il libro, nella sua tangibile unicità di fruizione.
    • e-Ink reader web browser ePub iBooks Android lunedì 20 settembre 2010 Dall'altra c'è un file e molteplici modi di fruirlo. Come fare?
    • Progressive Enhancement lunedì 20 settembre 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 lunedì 20 settembre 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.
    • lunedì 20 settembre 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.
    • lunedì 20 settembre 2010 Quindi, passando finalmente alle buone pratiche, concentriamoci sul contenuto:
    • 1. Contenuto Parole → Frasi → Paragra → Capitoli → Sezioni → Libri lunedì 20 settembre 2010 La prima cosa da fare è conoscere bene il contenuto che si va a impaginare.
    • Struttura Liste, tabelle, immagini, codice, epistole, aforismi, dediche, citazioni … lunedì 20 settembre 2010 Qual è la sua struttura...
    • Struttura <b> → <span> → <p> → <h1> → <div> →… lunedì 20 settembre 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 condiziona la sua composizione, la sua presentazione, la sua navigazione. lunedì 20 settembre 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. Lingua Quali lingue vengono usate nel testo? Quali alfabeti? Quali gli ? lunedì 20 settembre 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 &#8220; ” chiusura doppie virgolette &#8221; ‘ apertura virgolette &#8216; ‘ chiusura virgolette &#8217; – trattino en &#8211; — trattino em &#8212; − meno &#8722; … puntini di sospensione &#8230; lunedì 20 settembre 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 un adeguato supporto Unicode. lunedì 20 settembre 2010 Il tipo di alfabeto usato condiziona radicalmente le scelte possibili.
    • 3. Licenza Posso davvero usare quel carattere? lunedì 20 settembre 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; } lunedì 20 settembre 2010 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. lunedì 20 settembre 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.
    • Licenza SIL Open Font GNU-GPL CC Public Domain Apache ... lunedì 20 settembre 2010 Meglio concentrarsi su font rilasciati con licenze generose, che consentono l'uso, la distribuzione e - se possibile - la modifica (vedremo dopo perchè).
    • Carattere Veri care i range Unicode Escludere i font che non coprono l’intero range richiesto. lunedì 20 settembre 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 lunedì 20 settembre 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 titoli Un Monospace per i blocchi di codice, se necessari.
    • 4. Subsetting Incorporare solo i gli effettivamente usati nel testo. lunedì 20 settembre 2010 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/ lunedì 20 settembre 2010 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%; } lunedì 20 settembre 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 CSS html, body, div, span, p { margin:0; padding:0; border:0; outline:0; font-size:100%; } lunedì 20 settembre 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 lunedì 20 settembre 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 misura Pixel & Punti oppure Em & Percentuali lunedì 20 settembre 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 lunedì 20 settembre 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 lunedì 20 settembre 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 lunedì 20 settembre 2010 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; } lunedì 20 settembre 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.
    • Carattere Nell’accostare i caratteri, fare attenzione alle differenti x-height. lunedì 20 settembre 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-height Minion Pro 72pt Bell Gothic Std 72pt lunedì 20 settembre 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-height Minion Pro 72pt Bell Gothic Std 58pt lunedì 20 settembre 2010 E' necessario ridurre il corpo del Bell Gothic all'80% del suo valore originale perchè abbia la stessa altezza della x.
    • lunedì 20 settembre 2010 Abbiamo quasi finito, ma qualcuno potrebbe chiedere: ehi, e dov'è finito il progressive enhancement?
    • iBooks Un esempio pratico lunedì 20 settembre 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?
    • iBooks Custom Fonts http://www.totanus.net/journal/47/ lunedì 20 settembre 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.
    • iBooks Supporta CSS3 Supporta Javascript lunedì 20 settembre 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" /> lunedì 20 settembre 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" /> lunedì 20 settembre 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" /> lunedì 20 settembre 2010 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) lunedì 20 settembre 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 lunedì 20 settembre 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 lunedì 20 settembre 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.balocco@gmail.com Credits http://www. ickr.com/photos/maureen_sill/2565591589/#/ lunedì 20 settembre 2010 Ho finito. Domande?