SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Typografie v elektronických médiích
            N   Ě K O L I   K T E Z Í
            A    O T Á Z    E K , K T E R É
            B   Y M Ě L      V Z Í T D O
            Ú   V A H Y     Ú P R A V C E
            T   E X T U     U R Č E N É H O
            K    S O U V    I S L É M U
            Č   T E N Í




            Jakub Krč / www.sazba.cz / www.typo.cz
Typografie v elektronických médiích
            Několik        tezí
            a otázek, které
            by měl vzít do
            úvahy     úpravce
            textu určeného
            k     souvislému
            č   t   e    n    í




            Jakub Krč / www.sazba.cz / www.typo.cz
Typografie v elektronických médiích
             Několik tezí a otázek,
             které by měl vzít
             do úvahy úpravce
             textu určeného
             k souvislému čtení




             Jakub Krč / www.sazba.cz / www.typo.cz
Jak člověk čte? Jak probíhá proces čtení?
Typografie          Kevin Larson     Konference v řecké
Psychologie         Mary Dyson       Soluni (2004)
Anatomie            Hrant Papazian
Sociologie          Peter Enneson    Revue Typo 13/2005
Pedagogika

Měřitelný jev

Bez jednoznačných
výsledků
Silueta slova
Slovo je
rozpoznáváno na
základě své siluety,
buď kombinací na
základě horní a dolní
dotažnice, nebo
celkového „obrazu“
slova.
Paralelní rozpoznávání písmen
Písmena jsou ve
slově rozpoznávána
současně a slovo je
identifikováno na
základě písmen.
Sakadické pohyby očí




Oko má 200–250 ms Během 20–30 ms        Oko se nefixuje na
na jedno slovo    pohyb kupředu o 7–9 mezery, krátká nebo
                  slov (v 10–15 % vzad) čistě gramatická
                                        slova
Další faktory
Font („kresba“)
Font (velikost)
Font (proklad)
                      pár   mlíkař
                      pán
Světelné podmínky
Psychický stav
Věk
Čtenářská zkušenost
                            mlíkař
                            mlíkař
                      pár
Vztah k textu
Chyby v textu
Vzdálenost od textu
Úhel čtení
„Předpříjem“
Letmé čtení                 mlíkař   mlíkař mlíkař   mlíkař
aj.
Mýty (za jistých okolností)
              Patky usnadňují čtení Písma navržená pro
                                    čtení z obrazovky se
              Minusky se čtou       čtou lépe než písma
              rychleji než verzálky navržená pro tisk
              či kurziva
                                    Na displeje čteme
              Text na vysoké        pomaleji než z papíru
              typografické úrovni
              se čte lépe než text  Proces čtení na
              vysázený amatérsky    monitoru (oko,
                                    mozek) je jiný než
              Užší sloupec textu se proces klasického
              čte lépe než širší    čtení

                                    aj.
Tištěné médium
Tradice

Pravidla, úzus

Zkušenost

Konkrétní čtenář

Na straně čtenáře
fixované médium

200 let vědeckých
výzkumů čtení
Elektronické médium
1.
Mnohovýznamový   CRT, LCD, notebook, telefon, PDA, čtečka
termín           knih, televize, terminál
Elektronické médium
2.
Rychlý vývoj bez     Od textů bez diakritiky přes PDF po Flash,
tradice, pravidel    ePub aj.
a „univerzálního“,
„referenčního“
média
Elektronické médium
3.
Typografická   Unicode
omezení
               HTML (1990)

               embedování písem (teoreticky od 1997,
               dodnes nefunkční spolehlivě, WOFF, CWT...)

               písmo jako služba (javaskript – Typekit)

               webové licence a výpůjčky od písmolijen

               http://www.typotheque.com/webfonts
Elektronické médium
3.
Typografická   Dominance několika fontů, menší možnost
omezení        kvalitativního výběru
Elektronické médium
4.
Na straně čtenáře   Velikost displeje, jeho kvalita, umístění;
proměnlivé médium   čtení u monitoru vs. čtení s „čtečkou“
Elektronické médium
5.
Na straně čtenáře     Podpora Unicode ve starších OS a ve
navíc software a OS   speciálních zařízeních (mobily)

                      Různá interpretace @font-face v různých
                      prohlížečích www.twardoch.com/webfonts/

                      Problematika dělení slov, blokového
                      zarovnání, pevných mezer...

                      DRM vs. OS + aplikace
Elektronické médium
6.
Designér webu vs.   Homepage a kratší texty vs. texty delší
text k souvislému   a zanořené
čtení
Čtenář elektronického média
Nepřijal koncepci
„jiného čtení“
Upřednostňuje své
návyky z tištěných
médií


Zjednodušení textu:
RSS
Instapaper...
Reader...

Odeslání do čtečky:
Stanza, Kindle...
Čtenář elektronického média
Upřednostňuje
zařízení fyzicky bližší
knize

Rozhoduje nebo
spolurozhoduje
o typografii
Budoucnost čtení delších textů
Není na webu, ale ve specializovaných čtečkách, ať už
hardwarových, nebo softwarových

Není ve formátu pdf ani v jeho nejrůznějších „animacích“
(třebas www.floowie.com)

Je v textech dobře připravených pro export do čtecích zařízení
(formátování, exportní pomocníci)

Je v textech dobře typograficky připravených
(role čtenáře)

Je v designérovi poučeném (typografie, procesy čtení) a vzdělaném
(typografie jako čokoláda)
Další zdroje




               webtypography.net/




               webtypography.net/
               sxsw2007/
It’s all our fault.

Weitere ähnliche Inhalte

Mehr von WebExpo

Jakub Vrána: Code Reviews with Phabricator
Jakub Vrána: Code Reviews with PhabricatorJakub Vrána: Code Reviews with Phabricator
Jakub Vrána: Code Reviews with PhabricatorWebExpo
 
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...WebExpo
 
Steve Corona: Scaling LAMP doesn't have to suck
Steve Corona: Scaling LAMP doesn't have to suckSteve Corona: Scaling LAMP doesn't have to suck
Steve Corona: Scaling LAMP doesn't have to suckWebExpo
 
Adii Pienaar: Lessons learnt running a global startup from the edge of the world
Adii Pienaar: Lessons learnt running a global startup from the edge of the worldAdii Pienaar: Lessons learnt running a global startup from the edge of the world
Adii Pienaar: Lessons learnt running a global startup from the edge of the worldWebExpo
 
Patrick Zandl: Energy industry post Edison, Křižík & IoT
Patrick Zandl: Energy industry post Edison, Křižík & IoTPatrick Zandl: Energy industry post Edison, Křižík & IoT
Patrick Zandl: Energy industry post Edison, Křižík & IoTWebExpo
 
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...WebExpo
 
Marli Mesibov - What's in a Story?
Marli Mesibov - What's in a Story?Marli Mesibov - What's in a Story?
Marli Mesibov - What's in a Story?WebExpo
 
Jiří Knesl: Souboj frameworků
Jiří Knesl: Souboj frameworkůJiří Knesl: Souboj frameworků
Jiří Knesl: Souboj frameworkůWebExpo
 
Richard Fridrich: Buď punkový konzument!
Richard Fridrich: Buď punkový konzument!Richard Fridrich: Buď punkový konzument!
Richard Fridrich: Buď punkový konzument!WebExpo
 
Jakub Nešetřil: Jak (ne)dělat API
Jakub Nešetřil: Jak (ne)dělat APIJakub Nešetřil: Jak (ne)dělat API
Jakub Nešetřil: Jak (ne)dělat APIWebExpo
 
Michal Blažej: Zbavte sa account managementu
Michal Blažej: Zbavte sa account managementuMichal Blažej: Zbavte sa account managementu
Michal Blažej: Zbavte sa account managementuWebExpo
 
Denisa Lorencová: UX Designer - Anděl s ďáblem v těle
Denisa Lorencová: UX Designer - Anděl s ďáblem v těleDenisa Lorencová: UX Designer - Anděl s ďáblem v těle
Denisa Lorencová: UX Designer - Anděl s ďáblem v těleWebExpo
 
Petr Ludwig: Jak bojovat s prokrastinací?
Petr Ludwig: Jak bojovat s prokrastinací?Petr Ludwig: Jak bojovat s prokrastinací?
Petr Ludwig: Jak bojovat s prokrastinací?WebExpo
 
Jan Vlček: Gamifikace 101
Jan Vlček: Gamifikace 101Jan Vlček: Gamifikace 101
Jan Vlček: Gamifikace 101WebExpo
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstWebExpo
 
Adam Hrubý: Evoluce designéra
Adam Hrubý: Evoluce designéraAdam Hrubý: Evoluce designéra
Adam Hrubý: Evoluce designéraWebExpo
 
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačka
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačkaJan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačka
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačkaWebExpo
 
Jana Štěpánová: Neziskovky Goes Web
Jana Štěpánová: Neziskovky Goes WebJana Štěpánová: Neziskovky Goes Web
Jana Štěpánová: Neziskovky Goes WebWebExpo
 
Douglas Crockford: Serversideness
Douglas Crockford: ServersidenessDouglas Crockford: Serversideness
Douglas Crockford: ServersidenessWebExpo
 
Richard Fridrich: 5 x *, * a */5
Richard Fridrich: 5 x *, * a */5Richard Fridrich: 5 x *, * a */5
Richard Fridrich: 5 x *, * a */5WebExpo
 

Mehr von WebExpo (20)

Jakub Vrána: Code Reviews with Phabricator
Jakub Vrána: Code Reviews with PhabricatorJakub Vrána: Code Reviews with Phabricator
Jakub Vrána: Code Reviews with Phabricator
 
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...
Jaroslav Šnajdr: Getting a Business Collaboration Service Into Cloud: A Case ...
 
Steve Corona: Scaling LAMP doesn't have to suck
Steve Corona: Scaling LAMP doesn't have to suckSteve Corona: Scaling LAMP doesn't have to suck
Steve Corona: Scaling LAMP doesn't have to suck
 
Adii Pienaar: Lessons learnt running a global startup from the edge of the world
Adii Pienaar: Lessons learnt running a global startup from the edge of the worldAdii Pienaar: Lessons learnt running a global startup from the edge of the world
Adii Pienaar: Lessons learnt running a global startup from the edge of the world
 
Patrick Zandl: Energy industry post Edison, Křižík & IoT
Patrick Zandl: Energy industry post Edison, Křižík & IoTPatrick Zandl: Energy industry post Edison, Křižík & IoT
Patrick Zandl: Energy industry post Edison, Křižík & IoT
 
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...
Ameya Kanitkar: Using Hadoop and HBase to Personalize Web, Mobile and Email E...
 
Marli Mesibov - What's in a Story?
Marli Mesibov - What's in a Story?Marli Mesibov - What's in a Story?
Marli Mesibov - What's in a Story?
 
Jiří Knesl: Souboj frameworků
Jiří Knesl: Souboj frameworkůJiří Knesl: Souboj frameworků
Jiří Knesl: Souboj frameworků
 
Richard Fridrich: Buď punkový konzument!
Richard Fridrich: Buď punkový konzument!Richard Fridrich: Buď punkový konzument!
Richard Fridrich: Buď punkový konzument!
 
Jakub Nešetřil: Jak (ne)dělat API
Jakub Nešetřil: Jak (ne)dělat APIJakub Nešetřil: Jak (ne)dělat API
Jakub Nešetřil: Jak (ne)dělat API
 
Michal Blažej: Zbavte sa account managementu
Michal Blažej: Zbavte sa account managementuMichal Blažej: Zbavte sa account managementu
Michal Blažej: Zbavte sa account managementu
 
Denisa Lorencová: UX Designer - Anděl s ďáblem v těle
Denisa Lorencová: UX Designer - Anděl s ďáblem v těleDenisa Lorencová: UX Designer - Anděl s ďáblem v těle
Denisa Lorencová: UX Designer - Anděl s ďáblem v těle
 
Petr Ludwig: Jak bojovat s prokrastinací?
Petr Ludwig: Jak bojovat s prokrastinací?Petr Ludwig: Jak bojovat s prokrastinací?
Petr Ludwig: Jak bojovat s prokrastinací?
 
Jan Vlček: Gamifikace 101
Jan Vlček: Gamifikace 101Jan Vlček: Gamifikace 101
Jan Vlček: Gamifikace 101
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
Adam Hrubý: Evoluce designéra
Adam Hrubý: Evoluce designéraAdam Hrubý: Evoluce designéra
Adam Hrubý: Evoluce designéra
 
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačka
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačkaJan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačka
Jan Sotorník: Grafika e-shopu jako sexy a chytrá prodavačka
 
Jana Štěpánová: Neziskovky Goes Web
Jana Štěpánová: Neziskovky Goes WebJana Štěpánová: Neziskovky Goes Web
Jana Štěpánová: Neziskovky Goes Web
 
Douglas Crockford: Serversideness
Douglas Crockford: ServersidenessDouglas Crockford: Serversideness
Douglas Crockford: Serversideness
 
Richard Fridrich: 5 x *, * a */5
Richard Fridrich: 5 x *, * a */5Richard Fridrich: 5 x *, * a */5
Richard Fridrich: 5 x *, * a */5
 

Jakub Krč: Typografie v elektronických médiích

  • 1. Typografie v elektronických médiích N Ě K O L I K T E Z Í A O T Á Z E K , K T E R É B Y M Ě L V Z Í T D O Ú V A H Y Ú P R A V C E T E X T U U R Č E N É H O K S O U V I S L É M U Č T E N Í Jakub Krč / www.sazba.cz / www.typo.cz
  • 2. Typografie v elektronických médiích Několik tezí a otázek, které by měl vzít do úvahy úpravce textu určeného k  souvislému č t e n í Jakub Krč / www.sazba.cz / www.typo.cz
  • 3. Typografie v elektronických médiích Několik tezí a otázek, které by měl vzít do úvahy úpravce textu určeného k souvislému čtení Jakub Krč / www.sazba.cz / www.typo.cz
  • 4. Jak člověk čte? Jak probíhá proces čtení? Typografie Kevin Larson Konference v řecké Psychologie Mary Dyson Soluni (2004) Anatomie Hrant Papazian Sociologie Peter Enneson Revue Typo 13/2005 Pedagogika Měřitelný jev Bez jednoznačných výsledků
  • 5. Silueta slova Slovo je rozpoznáváno na základě své siluety, buď kombinací na základě horní a dolní dotažnice, nebo celkového „obrazu“ slova.
  • 6. Paralelní rozpoznávání písmen Písmena jsou ve slově rozpoznávána současně a slovo je identifikováno na základě písmen.
  • 7. Sakadické pohyby očí Oko má 200–250 ms Během 20–30 ms Oko se nefixuje na na jedno slovo pohyb kupředu o 7–9 mezery, krátká nebo slov (v 10–15 % vzad) čistě gramatická slova
  • 8. Další faktory Font („kresba“) Font (velikost) Font (proklad) pár mlíkař pán Světelné podmínky Psychický stav Věk Čtenářská zkušenost mlíkař mlíkař pár Vztah k textu Chyby v textu Vzdálenost od textu Úhel čtení „Předpříjem“ Letmé čtení mlíkař mlíkař mlíkař mlíkař aj.
  • 9. Mýty (za jistých okolností) Patky usnadňují čtení Písma navržená pro čtení z obrazovky se Minusky se čtou čtou lépe než písma rychleji než verzálky navržená pro tisk či kurziva Na displeje čteme Text na vysoké pomaleji než z papíru typografické úrovni se čte lépe než text Proces čtení na vysázený amatérsky monitoru (oko, mozek) je jiný než Užší sloupec textu se proces klasického čte lépe než širší čtení aj.
  • 10. Tištěné médium Tradice Pravidla, úzus Zkušenost Konkrétní čtenář Na straně čtenáře fixované médium 200 let vědeckých výzkumů čtení
  • 11. Elektronické médium 1. Mnohovýznamový CRT, LCD, notebook, telefon, PDA, čtečka termín knih, televize, terminál
  • 12. Elektronické médium 2. Rychlý vývoj bez Od textů bez diakritiky přes PDF po Flash, tradice, pravidel ePub aj. a „univerzálního“, „referenčního“ média
  • 13. Elektronické médium 3. Typografická Unicode omezení HTML (1990) embedování písem (teoreticky od 1997, dodnes nefunkční spolehlivě, WOFF, CWT...) písmo jako služba (javaskript – Typekit) webové licence a výpůjčky od písmolijen http://www.typotheque.com/webfonts
  • 14. Elektronické médium 3. Typografická Dominance několika fontů, menší možnost omezení kvalitativního výběru
  • 15. Elektronické médium 4. Na straně čtenáře Velikost displeje, jeho kvalita, umístění; proměnlivé médium čtení u monitoru vs. čtení s „čtečkou“
  • 16. Elektronické médium 5. Na straně čtenáře Podpora Unicode ve starších OS a ve navíc software a OS speciálních zařízeních (mobily) Různá interpretace @font-face v různých prohlížečích www.twardoch.com/webfonts/ Problematika dělení slov, blokového zarovnání, pevných mezer... DRM vs. OS + aplikace
  • 17. Elektronické médium 6. Designér webu vs. Homepage a kratší texty vs. texty delší text k souvislému a zanořené čtení
  • 18. Čtenář elektronického média Nepřijal koncepci „jiného čtení“ Upřednostňuje své návyky z tištěných médií Zjednodušení textu: RSS Instapaper... Reader... Odeslání do čtečky: Stanza, Kindle...
  • 19. Čtenář elektronického média Upřednostňuje zařízení fyzicky bližší knize Rozhoduje nebo spolurozhoduje o typografii
  • 20. Budoucnost čtení delších textů Není na webu, ale ve specializovaných čtečkách, ať už hardwarových, nebo softwarových Není ve formátu pdf ani v jeho nejrůznějších „animacích“ (třebas www.floowie.com) Je v textech dobře připravených pro export do čtecích zařízení (formátování, exportní pomocníci) Je v textech dobře typograficky připravených (role čtenáře) Je v designérovi poučeném (typografie, procesy čtení) a vzdělaném (typografie jako čokoláda)
  • 21. Další zdroje webtypography.net/ webtypography.net/ sxsw2007/
  • 22. It’s all our fault.