Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara

Transkriptio

1 Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara

2 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.

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

4 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ä.

5 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

6 Antiikvat 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 päätteiden muoto ja liitos vahva kontrasti Mopk Garamond Caslon Bookman Bodoni Baskerville Times New Roman akseli pystysuora tai vasemmalle kalteva

7 Groteskit 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 Mopk Gill Sans Arial Franklin Gothic Verdana

8 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

9 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 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

10 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.

11 Typografinen suunnittelu kirjain sana rivi kappale palsta fontti kirjainleikkaus 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 sanan välit rivin pituus sanan välit rivin pituus sanan välit rivin pituus Muokaten: Markus Itkonen, Typoteeseja Tarkan typografian opas, 1999, Tammer-Paino rivivälit palstan muoto sisennys rivivälit palstan muoto sisennys palstaväli

12 Kirjaintyyppi Kirjaintyyppi on tärkein typografinen valinta. fontti kirjainleikkaus koko väri 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 print { paperille tulevat tyylit }

13 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

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

15 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 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ä

16 CSS-tyylit typografiassa Fontti - font-family Kuvaus: - Asettaa fonttityypin. - Tyyppi voidaan antaa fonttien niminä tai käyttämällä jotain viidestä fonttiperheestä. Arvot: - 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}

17 Fonttien nimistä: Jos fontin nimi koostuu kahdesta tai useammasta sanasta, niin käytetään -merkkejä p {font-family: Times New Roman, serif} Fonttiperheet serif: päätteelliset fontit, esim. Times New Roman sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier New Ero Serif- ja Sans-serif-fonteille (lähde: ) ICT1TN004 17

18 Fontin koko - font-size Kuvaus: - Fontin koko - Arvo annetaan absoluuttisena (avainsanat ja pituusmitat), suhteellisena tai prosentteina Arvot: - 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.

19 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.

20 Tyyli - font-style Arvot: - oblique: kallistettu teksti - italic: kursivoitu teksti - normal: normaali teksti Esimerkki: 2-tason otsikot tulostetaan kallistettuna. h2 {font-style:oblique}

21 Fontin lihavuus - font-weight Arvot: - numeeriset arvot:100, 200, 300, 400, 500, 600, 700, 800, 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 arvona 400, joka on perusteksti.

22 Kapiteeliteksti - font-variant Kuvaus: - Teksti tulostetaan kapiteelikirjaimilla eli isoilla kirjaimilla tavallisten pienten kirjaimien asemasta. Arvot: - Small-caps: kapiteelikirjaimet - normal: normaalit kirjaimet Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla. Fontin väri - color p {font-variant: small-caps} Arvot: -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)}

23 Korostuksia - text-decoration Kuvaus: - Tekstiin liitettäviä korostuksia Esimerkki: Kappaleen teksti alleviivattu: Arvot: - tavallinen teksti: none - alleviivaus: underline - viiva tekstin yläpuolelle: overline - päälleviivaus: line-trough - yhdistelmä: useampi yllämainittu välilyönnillä erotettuna p {text-decoration: underline} Linkkiteksti ilman alleviivausta: a {text-decoration: none}

24 Isot/pienet kirjaimet - text-transform Kuvaus: - Tekstin muuntaminen pienistä kirjaimista isoihin ja päinvastoin. Arvot: - 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.

25 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 Arvot: - mittayksiköt Esimerkki: h2 {letter-spacing: 0.5em} p.valit {word-spacing: 0.3em}

26 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 merkkiä rivillä. Hyvään luettavuuteen päästään rivinpituudella, joka on 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 merkkiin.

27 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.

28 Tasaus vaakasuunnassa: text-align Arvot: - 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;}

29 Rivitys - white-space Kuvaus: white-space-ominaisuudella muutetaan tekstin rivitystä. Huom. Tämä ominaisuus ei muuta tekstin fonttia. Arvot: nowrap: ei rivien katkaisua normal pre

30 Ensimmäisen rivin sisennys: text-indent Arvot: - mittayksiköt - prosentit: suhteessa kappaleen leveyteen Riviväli - line-height p {text-indent: 50px} Kuvaus: Kahden rivin jalkalinjojen välinen etäisyys eli tekstirivien etäisyys toisistaan. Arvot: - Mittayksiköt, jolloin arvot voivat vaihdella tekstin koon ja elementin maksimikorkeuden välillä - prosentteina oletusarvosta p {line-height: 200p%}

31 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ä.

32 Pseudoluokka :first-line Ensimmäisen rivin ulkoasu p:first-line {color:red} Pseudoluokka :first-letter Kappaleen ensimmäinen kirjain p:first-letter {font-size:24px; color:red}

33 Lohkon korkeus ja leveys Kuvaus: Leveys - width Korkeus - height Arvot: - mittayksiköt - prosentit -auto h2 {height: 50px; background-color: #FFFFCC; text-align: center;} p {width: 75%; text-align: left;}

34 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} Arvot: - 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)

35 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>

36 Typografisia linkkejä: Kun antiikva fraktuuran seljätti 70-vuotinen fonttien sota vaati perääntymisliikkeitäkin Kansalliskirjaston julkaisu: Kiehtova kirja Painokirjaimet Jere Majava: Verkkojulkaisemisen opas Maritta Inkinen: Taittotaidon perusteet W3C CSS tekstit