TYPOGRAFIA WWW-VISUALISOINTI - IIM TYPOGRAFIA

Transkriptio

1 TYPOGRAFIA

2 Kirjain on ylivoimaisesti useimmin nähtävä visuaalisen viestinnän väline

3 Kirjainmuodot ja niiden kehitys ovat aina olleet tiiviisti yhteydessä käytettyihin kirjoitusmenetelmiin. Papyrus/ruokokynä, meisselikirjoitus/kivi, kirjakepatriisit(kirjapainotaito)/paperi.

4 Kirjaimet ovat kehittyneet äänteiden tunnusmerkeiksi ja niiden kuvallinen alkuperä on täysin hävinnut

5 Kreikkalaiset täsmensivät kirjoitusmerkkien graafista muotoa ja muodostivat yhtenäisen aakkoston. Roomalaiset ottivat esikuvaksi kreikkalaisen aakkoston ja kehittivät sen pohjalta oman latinalaisen aakkostonsa.

6 Kaikkien suuraakkosten perusmuodot löytyvät geometrisista peruskuvioista.

7 Roomalaiset meisselikirjaimet 2. vuosisadan alusta.

8 Kehitys suuraakkosista pienaakkosiksi.

9 Versaali = suuraakkonen Gemena = pienaakkonen

10 Kirjasinleikkauksen muodostavat kirjaimet, numerot ja erikoismerkit. Erikokoiset ja muotoiset kirjasinleikkaukset (regular, bold, italic) muodostavat yhdessä kirjasintyypin (Georgia, Futura...)

11 Yksinkertaisin kirjasintyyppien lajitteluperuste on päätteettömiin ja päätteellisiin Päätteetön = Groteski/sans-serif Päätteellinen = Antiikva/serif

12 Geneeriset kirjasintyypit webissä Päätteetön = sans-serif Päätteellinen = serif Tasalevyinen = monospace Kursiivi/käsinkirjoitettu = Cursive Fantasia = fantasy font: normal 12px/17px Arial, Helvetica, sans-serif;

13

14

15 Webissä kirjasinten välisten suhteiden määrittäminen ei ole mahdollista niin tarkoin kuin esimerkiksi printtimediassa.

16 Merkkivälin määrittäminen(kerning) on tietyn kirjainparin välin lisäämistä tai vähentämistä. Me rkkivälin...

17 Merkkitiheyden määrittäminen(tracking) on valitun tekstin tai koko tekstilohkon merkkien välisen etäisyyden suurentamista tai tiivistämistä. Merkkitiheyden...

18 Taulukkovälistys (automaattinen välistys)/ Metrics kerning (Auto kerning) perustuu välistyspareihin (esim. LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya ja Yo), jotka sisältyvät useimpiin kirjasimiin.

19 Typografisen suunnittelun tavoitteena on selkeys, ymmärrettävyys ja helppolukuisuus.

20 Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam Est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Otsikko Ingressi Leipäteksti Sisennys - yleisesti otsikon tai väliotsikon jälkeen tulevassa kappaleessa ei käytetä sisennystä (printtimedia). Väliotsikko - ylös enemmän tilaa kuin alle, jotta lukija hahmottaa minkä tekstin yhteyteen otsikko kuuluu

21 Tasapalsta consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Liehupalsta consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Tekstipalstan tasausta kannattaa välttää www-layoutissa

22 Typografisilla valinnoilla luot kontrastia ja jännitettä sisältöön. kevyt - raskas ISO - pieni sans-serif - serif

23 Fonttien valitseminen www-layoutiin, Serif vai Sans-serif?

24 Suurikokoiset päätteelliset fontit ovat helppolukuisia ja näyttäviä. Niitä käytetään usein otsikoinneissa.

25 Leipätekstissä voi käyttää sekä päätteellistä että päätteetöntä fonttia.

26 Mikäli käytät päätteellistä fonttia leipätekstissä, varmista että sen koko on riittävä. Esimerkkilause pienikokoisella sans-serif -fontilla - Esimerkkilause pienikokoisella serif-fontilla

27 Fonttien yhdistäminen layoutissa 1. Vältä kahden samaan perheeseen kuuluvan fontin yhdistämistä (Futura - Myriad, Bodoni - Didot) 2. Vältä kahden vahvan fontin yhdistämistä 3. Jos mahdollista, katso että x-korkeus ja välistys ovat mahdollisimman samankaltaisia kummassakin fontissa 4. Serif + Sans-serif yhdistelmä on usein tehokas 5. Kiinnitä huomiota kirjasinten muotoihin, löytyykö niistä saman tyyppisiä muotoja.

28 Lorem ipsum dolor sit amet KATEGORIA Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. DUIS AUTEM VEL EUM IRIURE Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Yhdelläkin fontilla saa riittävästi variaatiota sisältöön.

29 Lorem ipsum dolor sit amet Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Typi non habent claritatem insitam Est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum merkkiä (max 550px)

30 Lorem ipsum dolor sit amet Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Typi non habent claritatem insitam Est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Optimaalinen riviväli on n. 1,5 kertaa fontin koko esim. 12px/18px tai 14px/21px

31 Käytä typografista skaalaa a a a a a a a a a a a a a a a a

32 24px 14px 18px Lorem ipsum dolor sit amet Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Typi non habent claritatem insitam Est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

33 Toisin kuin painettaessa, webissä fontin fyysinen koko määräytyy lopullisesti käyttäjän päätelaitteen ja sen resoluution mukaan

34 Lorem ipsum dolor sit amet Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Koon ohella riittävä kontrasti on tärkeä luettavuuden kannalta

35 Korostamiseen kannattaa käyttää yhtä tyyliä kerralla. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Usean tyylin yhdistämien sekoittaa sisällön hierarkiaa.

36 Web-safe fontit:

37 Vaihtoehtoisia tapoja saada harvinaisemmat fontit toimimaan Google Web Fonts TypeKit - typekit.com Fontdeck - fontdeck.com Lukuisia palveluntarjoajia:

38 LINKKEJÄ KIRJALLISUUS Grid Systems in Graphic Design, Josef Muller-Brockmann, Thinking with Type, 2nd revised and expanded edition, Ellen Lupton, The Elements of Typographic Style, Robert Bringhurst, Graafisen tyylin perusteet, Olof Eriksson, 1974