Typografia Osa kurssimateriaalista Verkkomultimedia ICT1tn004 13.9.2009 Elina Ulpovaara

Mitä on typografia? typografia Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Päämääränä on viestin välittyminen. Toimii lukijan apuna. typografia Tavoitteena on hyvä luettavuus. Antaa julkaisusta ensivaikutelman. Ilmaiseen ilman lukemista, mistä julkaisun lajityypistä on kysymys. Suunnitellaan kohderyhmän eli vastaanottajan mukaan. Typografisiin valintoihin vaikuttaa myös julkaisun luonne.

Hopnk Hopnk Typografinen viivasto Kirjainten osia ylälinja versaalilinja gemenalinja peruslinja alalinja Hopnk Kirjainten osia poikkiviiva vastamuoto Hopnk yläpidennys kaari pylväs liitoskulma käsi jalka pääte varsi alapidennys

Sanastoa Kirjaintyyppi Kirjaintyypillä tarkoitetaan yhtenäisen ulkoasun suunnittelua ja piirrettyä merkistöä. Se sisältää kaikki merkit - kirjaimet, numerot jne. Fontti Kirjaintyypistä käytetään yleisesti arkikielessä termiä fontti. Fontti-sana tulee ranskankielestä fondre, joka tarkoittaa valaa. Alunperin fontilla tarkoitettiin yhtä tiettyä kokoa koko kirjaintyypin sijaan.   Kirjainleikkaus Yhdestä kirjaintyypistä on mahdollisesti suunniteltu erilaisia kirjainleikkauksia esim. kaikki eri lihavuudet ovat omia leikkauksiaan.  Kirjainperhe Kirjainperhe sisältää yhden kirjaintyypin kaikki muunnokset esim. kaikki eri lihavuudet ja kursiivit.  Kirjaintyyli Kirjaintyyli on ryhmä ominaisuuksiltaan toisiaan muistuttavia kirjaintyyppejä.

Kirjainten luokittelu Kirjaintyyppejä luokitellaan mm. muotoilun, historian ja käyttötavan mukaan. Yhtä virallista luokitustapaa ei ole olemassa. Yhden tunnetuimmista luokitteluista on tehnyt ranskalainen Maximilien Vox (1954). Siinä luokkia on yhdeksän: neljä ensimmäistä ovat antiikvoja, viides on egyptienne, kuudennessa on kaikki groteskit, seitsemännes on kaiverrettuja muotoja jäljittelevät tyypit, kahdeksas on kaunokirjoitustyypit ja yhdeksäs on sekalainen luokka, joka sisältää kaikki muut. Yksi luokittelutapa on kirjaimen muotoon liittyvä: Antiikvat Groteskit Egyptienne Kalligrafiset Kaiverretun kaltaiset Muut

Antiikvat vahva kontrasti Vanhimmat 1400-luvulta Antiikvoille ominaista: päätteet kirjaimien eri osien paksuusvaihtelut ylöspäin ohuita, alaspäin paksuja Renessanssiantiikvat, siirtymäkauden antiikvat ja uusantiikvat Luettavuus painettuna hyvä. Mm. Garamond, Oldstyle, Bookman, Bembo, Sabon, Didot, Cochin, Bell Mopk päätteiden muoto ja liitos akseli pystysuora tai vasemmalle kalteva Garamond Caslon Bookman Bodoni Baskerville Times New Roman

Mopk Groteskit Gill Sans Arial Franklin Gothic Verdana Yleistyivät 1920-luvulla Groteskeille ominaista tasavahva tai lähes tasavahva viiva Päätteetön Erityisesti Verdana on suunniteltu www-käyttöön. Mm. Folio, Futura, Gill, Helvetica, Univers, Venus, Bauhaus, Arial Gill Sans Arial Franklin Gothic Verdana

verkkomultimedia Kontrastit verkkomultimedia Kontrastit syntyvät eri tekstielementtien välisillä eroilla. Kontrasteja muodostuu myös, kun tekstiin liitetään muita elementtejä kuten kuvia. Käytä kontrastikeinoja harkiten. Mieti tarkkaan, mitä haluat korostaa. Jos korostaa kaikkia, niin mikään ei erotu. Valitse vain yksi tai kaksi kontrastikeinoa typografiseen taittoosi. Kokokontrasti erikokoiset elementit typografiassa: saman fontit erikoot verkkomultimedia verkkomultimedia

verkkomultimedia verkkomultimedia verkkomultimedia Vahvuuskontrasti typografiassa: eri lihavuutta olevat kirjaimet tummat ja vaaleat elementit Värikontrasti eri värit, vastavärit värikuva harmaan tekstipinnan kanssa typografiassa: eri väriset fontit Muotokontrasti eri fonttiperheet normaalit pystykirjaimet vastaan kursiivi/lihavoitu teksti säännölliset ja epäsäännölliset ladelmat: esim. suorakaiteen muotoiset kuvat ja liehureunatekstit verkkomultimedia verkkomultimedia

Typografinen suunnittelu kirjain sana rivi kappale palsta fontti kirjain- leikkaus koko väri fontti kirjain- leikkaus koko väri fontti kirjain- leikkaus koko väri fontti kirjain- leikkaus koko väri fontti kirjain- leikkaus koko väri merkkivälit merkkivälit merkkivälit merkkivälit sanan välit rivin pituus sanan välit rivin pituus sanan välit rivin pituus rivivälit palstan muoto sisennys rivivälit palstan muoto sisennys Muokaten: Markus Itkonen, Typoteeseja – Tarkan typografian opas, 1999, Tammer-Paino palstaväli

Kirjaintyyppi fontti kirjain- leikkaus koko väri Kirjaintyyppi on tärkein typografinen valinta. Päätteetön fontti esim, Arial, Verdana on luettavampaa näytöltä kuin päätteellinen fontti esim. Times New Roman. Käytä vain muutamaa tyyppiä eli fonttia samassa tuotteessa. Valitse hyvin erilaiset fonttiperheet. Muista, että eri fonteilla on myös todellisten ominaisuuksien lisäksi kuvitteelliset ominaisuudet eli luonteet. Tekstityypillä herätetään myöskin mielikuvia. Toiset fontit on tehty selvästikin pitkiin teksteihin ja toiset vain otsikoihin. Yleisnimitys CSS:sä päätteelliselle fontille on serif ja päätteettömille sans-serif. CSS:n avulla voidaan suunnitella eri fontti paperille kuin ruudulle: @media print { paperille tulevat tyylit }

Kirjaintyypin valinta Kirjaintyyppiä valittaessa kiinnitä huomiota kirjaimen muotoilussa seuraaviin yksityiskohtiin: versaalikorkeuteen eli suuraakkosten korkeuteen Tässä kaikkien kirjaimien pistekoko on 36. Yleisin versaalikoko on n. 70% pistekoosta. x-korkeuteen eli pienen x-kirjaimen korkeus suhteessa koko korkeuteen kirjaimen leveyteen

päätteisiin viivojen paksunnoksiin, hiusviivan ja perusviivan eroihin silmukan akselin kulmaan

Näytölle luettavaksi sopivat parhaiten kirjaimet, joissa on vähän kaaria ja vinoja viivoja, koska kirjaimet muodostetaan neliön muotoisten pikselien avulla näytölle. on suuri x-korkeus, jolloin saadaan suurempi teksti samalla rivivälillä on suorat kirjainrungot ja silmukoiden akselit on ylä- ja alapidennykset mahdollisimman lyhyitä ei ole päätteitä Arial Verdana Tahoma

Kirjaimen koko Jos valitsee tekstin eriosille eri kirjainkoot, niin koko erojen täytyy olla riittävän suuri. Kokovalinnoissa myöskin kuten muussakin suunnittelussa kerrannaiset rauhoittavat. Esimerkiksi kultaisen leikkauksen suhde on toimiva: 3:5:8:13:21. Kultaisen leikkauksen suhde muutettuna pisteiksi: 3:5:8 , 3:8:21 10p –16p – 28p, 10p – 28p – 70p 12p – 20p – 32p, 12p – 28p – 84p 14p – 24p – 36p, 14p – 36p – 98p Jos muutat fonttikokoja, käytä suhteellisia arvoja. Hyvä mittayksikkö on em.

Typografisia linkkejä: Kun antiikva fraktuuran seljätti 70-vuotinen fonttien sota vaati perääntymisliikkeitäkin http://www.viestintaliitto.fi/kirjatyo/2004/12/muut/#alku1 Kansalliskirjaston julkaisu: Kiehtova kirja Painokirjaimet http://www.lib.helsinki.fi/julkaisut/kiehtovakirja/mainp_typo.html Jere Majava: Verkkojulkaisemisen opas http://blogit.helsinki.fi/web/index.htm Maritta Inkinen: Taittotaidon perusteet http://www.valt.helsinki.fi/staff/mainkine/3typogr.pdf W3C CSS tekstit http://www.w3.org/TR/CSS21/fonts.html http://www.w3.org/TR/CSS21/text.html