TYPOGRAFIA 1.2.2016
Kirjain on ylivoimaisesti useimmin nähtävä visuaalisen viestinnän väline
Kirjainmuodot ja niiden kehitys ovat aina olleet tiiviisti yhteydessä käytettyihin kirjoitusmenetelmiin. Papyrus/ruokokynä, meisselikirjoitus/kivi, kirjakepatriisit(kirjapainotaito)/paperi.
Kirjaimet ovat kehittyneet äänteiden tunnusmerkeiksi ja niiden kuvallinen alkuperä on täysin hävinnut
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.
Kaikkien suuraakkosten perusmuodot löytyvät geometrisista peruskuvioista.
Roomalaiset meisselikirjaimet 2. vuosisadan alusta.
Kehitys suuraakkosista pienaakkosiksi.
Versaali = suuraakkonen Gemena = pienaakkonen
Kirjasinleikkauksen muodostavat kirjaimet, numerot ja erikoismerkit. Erikokoiset ja muotoiset kirjasinleikkaukset (regular, bold, italic) muodostavat yhdessä kirjasintyypin (Georgia, Futura...)
Yksinkertaisin kirjasintyyppien lajitteluperuste on päätteettömiin ja päätteellisiin Päätteetön = Groteski/sans-serif Päätteellinen = Antiikva/serif
Geneeriset kirjasintyypit webissä http://www.w3.org/tr/css2/fonts.html Päätteetön = sans-serif Päätteellinen = serif Tasalevyinen = monospace Kursiivi/käsinkirjoitettu = Cursive Fantasia = fantasy font: normal 12px/17px Arial, Helvetica, sans-serif;
Webissä kirjasinten välisten suhteiden määrittäminen ei ole mahdollista niin tarkoin kuin esimerkiksi printtimediassa.
Merkkivälin määrittäminen(kerning) on tietyn kirjainparin välin lisäämistä tai vähentämistä. Me rkkivälin...
Merkkitiheyden määrittäminen(tracking) on valitun tekstin tai koko tekstilohkon merkkien välisen etäisyyden suurentamista tai tiivistämistä. Merkkitiheyden...
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.
Typografisen suunnittelun tavoitteena on selkeys, ymmärrettävyys ja helppolukuisuus.
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
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
Typografisilla valinnoilla luot kontrastia ja jännitettä sisältöön. kevyt - raskas ISO - pieni sans-serif - serif
Fonttien valitseminen www-layoutiin, Serif vai Sans-serif?
Suurikokoiset päätteelliset fontit ovat helppolukuisia ja näyttäviä. Niitä käytetään usein otsikoinneissa.
Leipätekstissä voi käyttää sekä päätteellistä että päätteetöntä fonttia.
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
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.
Lorem ipsum dolor sit amet 11.11.2011 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.
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. 40-80 merkkiä (max 550px)
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
Käytä typografista skaalaa a a a a a a a a a a a a a a a a
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.
Toisin kuin painettaessa, webissä fontin fyysinen koko määräytyy lopullisesti käyttäjän päätelaitteen ja sen resoluution mukaan
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
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.
Web-safe fontit: http://www.w3schools.com/cssref/css_websafe_fonts.asp http://web.mit.edu/jmorzins/www/fonts.html
Vaihtoehtoisia tapoja saada harvinaisemmat fontit toimimaan www-sivuilla. @font-face Google Web Fonts http://www.google.com/webfonts TypeKit - typekit.com Fontdeck - fontdeck.com Lukuisia palveluntarjoajia: http://www.fonts.com/web-fonts http://www.myfonts.com/search/is_webfont:true/fonts/
LINKKEJÄ http://www.fontsquirrel.com/ http://ilovetypography.com http://typecast.com http://typophile.com http://www.typetester.org http://typographica.org http://www.myfonts.com/whatthefont/ http://www.w3.org/tr/css2/fonts.html KIRJALLISUUS Grid Systems in Graphic Design, Josef Muller-Brockmann, 1996 http://www.amazon.com/systems-graphic-systeme-visuele-gestaltung/dp/3721201450/ref=sr_1_1?ie=utf8&s=books&qid=1299501665&sr=8-1 Thinking with Type, 2nd revised and expanded edition, Ellen Lupton, 2010 http://www.amazon.com/thinking-type-2nd-revised-expanded/dp/1568989695/ref=pd_sim_b_7 The Elements of Typographic Style, Robert Bringhurst, 2004 http://www.amazon.com/elements-typographic-style-robert-bringhurst/dp/0881791326 Graafisen tyylin perusteet, Olof Eriksson, 1974