Typografia Verkkomultimedia ICT1tn004 13.9.2009 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan kohderyhmän eli vastaanottajan mukaan. typografia Päämääränä on viestin välittyminen. Toimii lukijan apuna. Tavoitteena on hyvä luettavuus. Ilmaiseen ilman lukemista, mistä julkaisun lajityypistä on kysymys. Typografisiin valintoihin vaikuttaa myös julkaisun luonne. 1
Typografinen viivasto ylälinja Hopnk versaalilinja gemenalinja peruslinja alalinja Kirjainten osia pylväs liitoskulma poikkiviiva Hopnk kaari vastamuoto yläpidennys käsi jalka pääte alapidennys varsi 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. Fonttisana 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ä. 2
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 Mopk Antiikvoille ominaista: päätteet t kirjaimien eri osien päätteiden paksuusvaihtelut muoto ja ylöspäin ohuita, alaspäin liitos paksuja Renessanssiantiikvat, siirtymäkauden antiikvat ja uusantiikvat Luettavuus painettuna hyvä. Mm. Garamond, Oldstyle, Bookman, Bembo, Sabon, Didot, Cochin, Bell Garamond Caslon Bookman Bodoni Baskerville Times New Roman akseli pystysuora tai vasemmalle kalteva 3
Groteskit Yleistyivät 1920-luvulla Mopk Groteskeille ominaista tasavahva tai lähes tasavahva viiva Päätteetön Erityisesti Verdana on suunniteltu www-käyttöön. Mm. Folio, Futura, Gill, Gll Helvetica, Univers, Venus, Bauhaus, Arial Gill Sans Arial Franklin Gothic Verdana Kontrastit 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 4
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 verkkomultimedia verkkomultimedia Muotokontrasti eri fonttiperheet normaalit pystykirjaimet vastaan kursiivi/lihavoitu teksti säännölliset ja epäsäännölliset ladelmat: esim. suorakaiteen muotoiset kuvat ja liehureunatekstit Tekstielementit Logo Logo on jonkin asian tunnuksena käytetty yksilöllisesti välistetty ja muotoiltu teksti. Otsikko Otsikon tehtävänä on kertoa pääasia tekstin sisällöstä ja motivoida käyttäjää lukemaan tekstiä eteenpäin. Väliotsikoiden tehtävänä on erottaa ja opastaa. Ingressi Sekä perinteisen sanomalehden että websivun taitossa voidaan käyttää ingressiä eli johdantotekstiä referoimaan sisältöä ja kertomaan pääaiheet leipätekstistä. Ingressissä kannattaa käyttää valitun kirjasimen lihavointia. Toinen hyvä korostuskeino on päätteetön-päätteellinen kontrasti. Leipis Leipätekstillä ladotaan varsinainen teksti. Kiinnitä huomiota luettavuuteen ja sisältöön. Leipis muotoillaan palstoituksen ja välistyksien avulla. Anfangi Anfangilla nostetaan tekstin, kappaleen tai luvun ensimmäinen merkki muusta tekstistä poikkeavaksi. 5
Typografinen suunnittelu kirjain sana rivi kappale palsta fontti kirjain- leikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri merkkivälit merkkivälit merkkivälit merkkivälit Muokaten: Markus Itkonen, Typoteeseja Tarkan typografian opas, 1999, Tammer-Paino sanan välit rivin pituus sanan välit rivin pituus rivivälit palstan muoto sisennys sanan välit rivin pituus rivivälit palstan muoto sisennys palstaväli fontti Kirjaintyyppi kirjainleikkaus 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 sansserif. CSS:n avulla voidaan suunnitella eri fontti paperille kuin ruudulle: @media print { paperille tulevat tyylit } 6
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 7
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. Arial Verdana Th Tahoma 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ä CSS-tyylit typografiassa Fontti - font-family Kuvaus: - Asettaa fonttityypin. - Tyyppi voidaan antaa fonttien niminä tai käyttämällä jotain viidestä fonttiperheestä. - fonttien nimet - fonttiperheet: serif, sans-serif, cursive, fantasy, monospace Esimerkki: 1-tason otsikot tulostetaan ensisijaisesti fontilla Garamond, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. h1 {font-family: Garamond, Arial } Kappaleet tulostetaan sans-serif-fonttiperheeseen kuuluvalla oletusfontilla. p {font-family: sans-serif} 8
Fontin koko - font-size Kuvaus: - Fontin koko - Arvo annetaan absoluuttisena (avainsanat ja pituusmitat), suhteellisena tai prosentteina - absoluuttiset: xx-small, x-small, small, medium, largr, x-large, xx-large - suhteelliset: larger, smaller -prosentit - pituusyksiköt, em, px, cm, pt... Esimerkki: Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna (korkeuteen suhteutettuna). p {font-size: 200%} Huom. Suhteelliset fonttikoot ovat suhteessa ympäröivän elementin fonttikokon. 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. t Ei Esimerkiksi kikikultaisen 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. 9
Tyyli - font-style - oblique: kallistettu teksti - italic: kursivoitu teksti - normal: normaali teksti Esimerkki: 2-tason otsikot tulostetaan kallistettuna. h2 {font-style:oblique} Fontin lihavuus - font-weight - numeeriset arvot:100, 200, 300, 400, 500, 600, 700, 800, 900 - avainsanat: normal(400), bold(700), bolder, lighter Esimerkki: Kappaleen teksti on lihavoitu. p {font-weight:bold} Tekstipalstan sisällä yleensä käytetään tehokeinona kallistettua tekstiä tai lihavointia. Lihavointi on tehokkaampi kuin kallistettu teksti. Varsinkin verkkojulkaisussa kannattaa välttää näytön ominaisuuksien vuoksi kalistettua tekstiä. Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimet esittävät font-weight-arvot 100-300 arvona 400, joka on perusteksti. 10
Kapiteeliteksti - font-variant Kuvaus: - Teksti tulostetaan kapiteelikirjaimilla eli isoilla kirjaimilla tavallisten pienten kirjaimien asemasta. - Small-caps: kapiteelikirjaimet - normal: normaalit kirjaimet Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla. Fontin väri - color p {font-variant: small-caps} -värin nimi - värin heksadesimaaliarvo - värin rgb-arvo Esimerkki: Koko dokumentin teksti sinisenä: body {color: blue} body {color: #0000FF} body {color: rgb(0,0,255)} Korostuksia - text-decoration Kuvaus: - Tekstiin liitettäviä korostuksia - tavallinen teksti: none - alleviivaus: underline - viiva tekstin yläpuolelle: overline - päälleviivaus: line-trough Esimerkki: Kappaleen teksti alleviivattu: p {text-decoration: underline} Linkkiteksti ilman alleviivausta: a {text-decoration: none} - yhdistelmä: useampi yllämainittu välilyönnillä erotettuna 11
Isot/pienet kirjaimet - text-transform Kuvaus: - Tekstin muuntaminen pienistä kirjaimista isoihin ja päinvastoin. - tavallinen teksti: none - kaikki kirjaimet versaaliksi: uppercase - kaikki kirjaimet gemenaksi: lowercase - sanojen ensimmäiset kirjaimet versaaliksi: capitalize Esimerkki: kappale isoilla kirjaimilla p{ {text-transform: uppercase} Huom. Parempi vaihtoehto on kirjoittaa suoraan versaaleilla kirjaimilla, jos niitä tarvitsee. merkkivälit sanan välit Merkkien ja sanojen välit - letter-spacing, word-spacing Kuvaus: - Merkkien oletusvälin muuttaminen: letter-spacing - Sanojen oletusvälien muuttaminen: word-spacing -mittayksiköt Esimerkki: h2 {letter-spacing: 0.5em} p.valit {word-spacing: 0.3em} p.nor {word-spacing: 0} 12
Kappaleen ja palstan muotoilu rivin pituus rivivälit palstan muoto sisennys Pitkäsanaisissa kielissä kuten suomen kielessä kirjaimia saa olla riviä kohden vähemmän kuin lyhyt sanaisessa kielessä. Suomen kielessä saisi olla korkeintaan 70-80 merkkiä rivillä. Hyvään luettavuuteen päästään rivinpituudella, joka on 55-60 merkkiä. Rivin pituuteen voi vaikuttaa marginaaleille ja width-ominaisuudella. Kappalejaoksi tyhjä rivi on käytännöllinen Tekstipalstan leveys ei yksin vaikuta luettavuuteen vaan myöskin marginaalilla ja palstanväleillä on merkitystä. Palstan leveys suhteessa kirjaisinkokoon kannattaa valita siten, että rivinväli asettuu 35-65 merkkiin. Rivien suljenta: Tavallisin vaihtoehto rivien suljennalle on latoa kaikki rivit yhtä pitkiksi eli käyttää tasareunaista palstaa. Tämä toimii hyvin, jos kielen tavutus onnistuu oikein. Tätä ei kuitenkaan suositella verkkojulkaisussa. Oikeanpuoleinen liehuladonta on helppolukuista ja sopii varsinkin verkkoon, jossa tavutus ei yleensä ole mahdollista. Vasemmanpuoleinen liehuladinta on harvinainen ja huonommin luettavaa kuin oikeapuoleinen. Harvinaisuudesta johtuen se on erittäin hyvä tehokeino. Kannattaa käyttää lyhyisiin teksteihin esim. ilmoituksiin. Keskitettyä ladontaa ei kannata käyttää pitkissä teksteissä. Se sopii parhaiten tittelisivuihin, kutsukortteihin, menuhin jne. 13
Tasaus vaakasuunnassa: text-align - vasemmalle: left - keskelle: center - oikealle: right - molempien reunojen tasaus: justify Esimerkki: Otsikko on keskellä ja kappaleteksti on tasattu oikeaan reunaan. h2 {text-align: center} p {text-align: right;} Rivitys - white-space Kuvaus: white-space-ominaisuudella muutetaan tekstin rivitystä nowrap: ei rivien katkaisua normal pre 14
Ensimmäisen rivin sisennys: text-indent -mittayksiköt - prosentit: suhteessa kappaleen leveyteen Riviväli - line-height Kuvaus: Kahden rivin jalkalinjojen välinen etäisyys eli tekstirivien etäisyys toisistaan. - Mittayksiköt, jolloin arvot voivat vaihdella tekstin koon ja elementin maksimikorkeuden välillä - prosentteina oletusarvosta p {text-indent: 10%: line-height: 200%} Sisennys Painotekstissä käytetään kappaleiden erottamiseksi sisennystä. Normaali sisennys Ensimmäistä kappaletta ei sisennetä. Muiden kappaleiden sisennys on rivivälin tai kirjain koon levyinen. Tekstinmukainen sisennys Tekstiä ei sisennetä vaan tekstin eteen laitetaan jokin merkki esim. ajatusviiva tai luetelmapallo. Riippuva sisennys Ensimmäinen rivi alkaa palstan reunasta ja muut sisennetysti. Www-taitossa kappaleiden väleissä on yleensä tyhjä rivi ja tekstiä ei sisennetä. 15
Pseudoluokka :first-line Ensimmäisen rivin ulkoasu Kotiviljely ja kaupallinen hedelmänviljely on p:first-line {color:red} vähitellen opittu erottamaan toisistaan. Kotipuutarhuri, joka kasvattaa omenia vain perheensä tarpeeksi... Pseudoluokka :first-letter Kappaleen ensimmäinen kirjain p:first-letter {font-size:24px; color:red} Kotiviljely ja kaupallinen hedelmänviljely on vähitellen opittu erottamaan toisistaan. Kotipuutarhuri, joka kasvattaa omenia vain perheensä tarpeeksi... Lohkon korkeus ja leveys Kuvaus: Leveys - width Korkeus - height - mittayksiköt -prosentit -auto h2 {height: 50px; background-color: #FFFFCC; text-align: center;} p {width: 75%; text-align: left;} 16
Ylivuoto overflow Kuvaus: Ehdottaa, mitä elementille, jolle on määritetty korkeus ja leveys, tapahtuu, jos se ei mahdu sille varattuun tilaan. p {width: 75%; height:100px; overflow:auto} - auto, vierityspalkit näkyvissä, jos ylivuoto tapahtuu - scroll, vierityspalkit näkyvissä - visible, ylivuotava osa leikkautuu pois - hidden, elementin sisältö vuotaa vieressä olevan elementin päälle (huonosti tuettu) Palstat Yksi keino rakentaa www-sivuille palstat on käyttää float-ominaisuutta. #palsta_1 {float:left; width:15em} #palsta_2 {margin-left:17em; width:15em} <p id="palsta_1">kotiviljely ja kaupallinen hedelmänviljely on vähitellen opittu erottamaan toisistaan. Kotipuutarhuri, joka kasvattaa omenia vain </p> <p id="palsta_2"> Kauppaa varten omena on asianmukaisesti lajiteltava ja mieluiten viljeltävä vakiolajikkeita. Kotiviljely ja kaupallinen hedelmänviljely on vähitellen opittu erottamaan toisistaan. </p> 17
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 18