1. No category

Interakcija človek – računalnik
Tipografija
Franc Novak
Interakcija človek – računalnik (Tipografija)
Slide 1/45
nastanek tiska
Izumitelj tiska:
Johannes Gutenberg (1398 -1468)
http://en.wikipedia.org
Interakcija človek – računalnik (Tipografija)
Slide 2/45
nastanek tiska
Premične črke iz svinčene litine
http://en.wikipedia.org
Interakcija človek – računalnik (Tipografija)
Slide 3/45
gotska pisava
Gotska pisava:
ƒ tiskane knjige naj bi bile podobne rokopisnim
ƒ varčna pisava (stisnjene črke)
primer gotske pisave fraktura
Interakcija človek – računalnik (Tipografija)
Slide 4/45
gotska pisava
Prvi slovenski knjigi Catechismus in Abecedarium Primoža Trubarja sta
imeli za slovensko besedilo uporabljeno gotsko pisavo.
Interakcija človek – računalnik (Tipografija)
Slide 5/45
renesančne pisave
ƒ spadajo v sklop pisav s tankimi in
podebeljenimi potezami
ƒ prečna poteza pri mali črki “e” je pri
zgodnjih renesančnih pisavah
potegnjena poševno
ƒ razvijajo jih v Italiji (Benetke) in
Franciji
ƒ pomemben predstavnik tipografov:
Nicolas Jenson (1420-1480)
Abecedarium iz leta 1555
Interakcija človek – računalnik (Tipografija)
Slide 6/45
baročne in klasicistične pisave
Baročne pisave:
ƒ za razliko od renesančnih, so pri pisavah baročnega sloga večje razlike
v debelini potez.
ƒ pomembna predstavnika tipografov: William Caslon (1692-1766), John
Baskerville (1706-1775)
Klasicistične pisave:
ƒ imajo največje razlike med tankimi in podebeljenimi potezami
Interakcija človek – računalnik (Tipografija)
Slide 7/45
primerjava
renesančna
baročna
klasicistična
povzeto po: Klementina Možina: Knjižna tipografija
Interakcija človek – računalnik (Tipografija)
Slide 8/45
sodobne pisave
Sodobne izpeljanke
renesančne pisave
povzeto po: Ellen Lupton: Comprendre la typo-graphie
Interakcija človek – računalnik (Tipografija)
Slide 9/45
sodobne pisave
Sodobne pisave:
povzeto po: Ellen Lupton: Comprendre la typo-graphie
Interakcija človek – računalnik (Tipografija)
Slide 10/45
osnovni pojmi
Pri računalniški obdelavi so
pomembni deli le še:
ƒ podoba črke
ƒ črkovna črta
ƒ presledek ob črki
ƒ meso
ƒ velikost črke
ƒ širina črke
povzeto po: Klementina Možina: Knjižna tipografija
Interakcija človek – računalnik (Tipografija)
Slide 11/45
osnovni pojmi
Slovenska terminologija in zgodovinski pregled
Klementina Možina: Knjižna tipografija
Univerza v Ljubljani, 2003
črkovna črta (angl. baseline)
Interakcija človek – računalnik (Tipografija)
Slide 12/45
osnovni pojmi
majuskula (upper case letter)
minuskula (lower case letter)
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 13/45
osnovni pojmi
kapitelka (small capital)
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 14/45
osnovni pojmi
serif
ƒ Je nastavek pri potezi črke in pogosto
potezo tudi zaključuje.
ƒ Serife imajo črke nekaterih pisav, na
primer renesančnih, baročnih in
klasicističnih.
ƒ Serifi so različno oblikovani in veliki,
odvisno od vrste pisave.
http://en.wikipedia.org
Interakcija človek – računalnik (Tipografija)
Slide 15/45
osnovni pojmi
ligatura
ƒ Je povezava dveh črk v samostojno
enoto.
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 16/45
osnovni pojmi
ƒ Pisava je ime za dano vrsto znakov.
ƒ Poznamo različne vrste pisav, kot na
primer Times New Roman, Futura,
Lucida, Helvetica, itd.
ƒ Pisave imajo različne karakteristike.
ƒ S primerno izbiro pisave vplivamo na
uporabnika, da identificira pomembne
elemente na zaslonu.
ƒ Lahko vplivamo na zaporedje branja.
Lahko tudi ustvarimo določeno vzdušje.
Interakcija človek – računalnik (Tipografija)
Slide 17/45
osnovni pojmi
Različice pisav:
ƒ navadna (roman, regular)
ƒ kurzivna
ƒ poudarjena
ƒ izstopajoča,
ƒ zasenčena,
ƒ ...
Primer:
različice pisave helvetica
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 18/45
osnovni pojmi
Različice pisav:
ƒ navadna (roman, regular)
ƒ kurzivna
ƒ poudarjena
ƒ izstopajoča,
ƒ zasenčena,
ƒ ...
Primer:
različice pisave bodoni
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 19/45
osnovni pojmi
Dogovor:
Font (angl.) = ena različica
ene pisave
ene velikosti
Typeface (angl.) = ena od različic (izbrane) pisave
Typeface family (angl.) = vse različice (izbrane) pisave
Interakcija človek – računalnik (Tipografija)
Slide 20/45
osnovni pojmi
Merske enote v tipografiji:
ƒ pica (privzeto iz angleščine, izgovorjava “pajkə”)
ƒ točka (angl. point, okrajšava: pt)
ƒ 1 pt = 0.353mm (povzeto po merskem sistemu DPT, ki se v računalništvu
najpogosteje uporablja od leta 1984, ko so vpeljali Adobe PostScript.)
1pica = 12 točk
6 x 1 pica ≈ 1 palec
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 21/45
osnovni pojmi
velikost črke (body size):
velikost podobe črke skupaj z mesom
nad in pod njo
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 22/45
osnovni pojmi
Razmik med vrsticami (angl. linespacing, leading)
V klasičnih tiskarskih stavnicah so
povečevali razmik med vrsticami tako,
da so vstavljali kovinske trakove
imenovane leads.
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 23/45
osnovni pojmi
Razmik med vrsticami: primer teksta v pisavi Helvetica, velikost pisave je 18pt.
ƒ v prvem primeru ni razmika
ƒ razdalja med zaporednima črkovnima
črtama je 18pt
ƒ to označimo kot 18/18
ƒ v drugem primeru je razmik 6pt
ƒ razdalja med zaporednima črkovnima
črtama je 18pt + 6pt = 24pt
ƒ to označimo kot 18/24
ƒ v tretjem primeru je razmik negativen
ƒ razdalja med zaporednima črkovnima
črtama je 18pt - 2pt = 16pt
ƒ to označimo kot 18/16
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 24/45
osnovni pojmi
Razmik med črkami in med besedami
Razpiranje (angl. tracking):
ƒ povečevanje prostorov med črkami
ƒ gre za enakomerno povečevanje
prostora, enako med vsemi črkami
Z razpiranjem vplivamo na “barvo”
teksta (bolj svetel ali bolj temen tekst).
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 25/45
osnovni pojmi
Razmik med črkami
Prirezovanje (angl. kerning):
ƒ zmanjševanje prostorov v nekaterih
parih črk (na primer: Va, Te, AV)
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 26/45
osnovni pojmi
Celec (em-quad, em)
ƒ Je kvadrat s stranico velikosti stopnje
pisave.
ƒ Uporabljamo ga kot merilo horizontalne
razdalje.
ƒ Dolžina vrstice teksta je izražena v tem
merilu.
ƒ 1 em je prevelika mera za razmak med
dvema besedama, zato so to merilo
razdelili na manjše dele.
ƒ tipična razdalja med besedama je ¼ em,
kar ustreza približno širini črke t.
povzeto po: James Craig, Irene Korol Scala: Designing with type
Interakcija človek – računalnik (Tipografija)
Slide 27/45
priporočila
Izbira primerne dolžine vrstice teksta
ƒ za enostolpični tekst serifne pisave so sprejemljive dolžine od 45 do 75
znakov,
ƒ v splošnem velja za idealno dolžino vrstica s 66 znaki (vključno s črkami in
presledki),
ƒ za večstolpične tekste so sprejemljive dolžine od 40 do 50 znakov.
Interakcija človek – računalnik (Tipografija)
Slide 28/45
priporočila
Kako izbrati primerno dolžino?
ƒ izmerimo dolžino niza
- abcdefghijklmnopqrstuvwxyz v izbrani pisavi
ƒ za izmerjeno dolžino abecede
(izraženo v pt, levi stolpec)
lahko iz tabele razberemo,
koliko znakov vsebuje vrstica
izbrane dolžine (izražene v
picah, zgornja vrstica)
povzeto po: Robert Bringhurst: The Elements Of Typographic
Style
Interakcija človek – računalnik (Tipografija)
Slide 29/45
vrste pisav
Za našo uporabo bomo ločevali med serifnimi in brezserifnimi (sans serif)
pisavami.
Primeri serifnih pisav:
Primeri pisav sans serif:
Interakcija človek – računalnik (Tipografija)
Times New Roman
Bookman
Palatino
Arial
Verdana
Helvetica
Avant Garde
Slide 30/45
priporočila
Priporočila za izbiro pisav:
ƒ Za doseganje hitrega branja uporabljaj enostavne in običajne vrste pisav.
ƒ Priporoča se uporaba brezserifnih pisav, kot na primer
• Arial,
• Verdana.
ƒ Priporoča se tudi uporaba serifnih pisav, kot na primer
• Times New Roman,
• Georgia.
ƒ Izogibaj se specialnih pisav ali “cool” pisav.
Interakcija človek – računalnik (Tipografija)
Slide 31/45
priporočila
Priporočila za izbiro pisav:
ƒ Učinkovit design običajno lahko dosežemo, če uporabljamo isto pisavo.
ƒ Če je že potrebno uporabiti več pisav, je dobra kombinacija uporaba
brezserifne pisave za naslov in oznake poglavij in serifne pisave za tekst.
Tudi obratno je sprejemljivo.
ƒ Omogoči, da ena pisava prevladuje.
ƒ Pri izbiri posav moramo upoštevati, za kakšno vrsto teksta je kakšna
pisava dejansko ustrezna.
ƒ Za nadaljnje branje v tej smeri priporočam knjigo: Stephen Coles, Erik
Spiekermann “The Geometry of Type: The Anatomy of 100 Essential
Typefaces”, Thames & Hudson Ltd, 2013.
Interakcija človek – računalnik (Tipografija)
Slide 32/45
priporočila
Priporočila za izbiro pisav :
ƒ Serifne in brezserifne pisave so še dalje razdeljene v skupine.
ƒ V dani skupini so zbrane podobne pisave.
ƒ Velja splošno priporočilo: če je že potrebno uporabiti več pisav, nikoli ne
mešaj pisav znotraj iste skupine.
Če želimo uporabiti dve pisavi, je seveda potrebno upoštevati njune
značilnosti. Izbira ni enostavna.
Za poglobitev znanja v tej smeri priporočam knjigo: Douglas Bonneville “The
big book of font combinations”, BonFX Press, 2010.
Interakcija človek – računalnik (Tipografija)
Slide 33/45
priporočila
Priporočila za izbiro različic pisave:
ƒ Uporabljaj omejeno (največ dve, izjemoma tri) različice pisave
ƒ na primer: navadno in kurzivno,
ƒ kurzivna se najbolje odraža v serifnih pisavah.
ƒ poudarjena se najbolje odraža v pisavah sans serif.
ƒ Uporabljaj kurzivno pisavo, kadar želiš pritegniti pozornost.
ƒ Uporabljaj poudarjeno pisavo, kadar želiš pritegniti pozornost ali graditi
hierarhijo.
ƒ Na spletnih straneh uporabljaj podčrtano pisavo le tedaj, ko z njo
označuješ navigacijsko povezavo.
Interakcija človek – računalnik (Tipografija)
Slide 34/45
primer
Primer uporabe poudarjene in podčrtane pisave.
Interakcija človek – računalnik (Tipografija)
Slide 35/45
primer
Primer uporabe poudarjene pisave
Interakcija človek – računalnik (Tipografija)
Slide 36/45
primer
Primer uporabe podčrtane pisave
Interakcija človek – računalnik (Tipografija)
Slide 37/45
priporočila
Velikost črk:
ƒ Velikost črk se nanaša na razdaljo od vrha do dna črke.
Za grafične vmesnike se priporoča naslednje velikosti črk:
ƒ 12 pt za menuje,
ƒ 10 pt (ali več) za okna.
Za spletne strani se priporoča naslednje velikosti črk:
ƒ 12 pt do 14 pt za tekst,
ƒ 18 pt do 36 pt za naslove in oznake.
Interakcija človek – računalnik (Tipografija)
Slide 38/45
priporočila
Za primerjavo
Priporočila za velikost črk teksta na papirju:
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
naslovi poglavij: 24 pt poudarjeno
naslovi sekcij: 18 pt poudarjeno
naslovi podsekcij: 14 pt poudarjeno
naslovi odstavkov: 12 pt poudarjeno
tekst: 10 pt
opombe pod črto: 8 pt
Interakcija človek – računalnik (Tipografija)
Slide 39/45
priporočila
Uporaba različnih velikosti črk naj bo omejena. Največ 3 velikosti črk naj
bodo hkrati na zaslonu.
Primer:
Interakcija človek – računalnik (Tipografija)
Slide 40/45
priporočila
Uporaba različnih velikosti črk naj bo omejena. Največ 3 velikosti črk naj
bodo hkrati na zaslonu.
Še en primer:
Interakcija človek – računalnik (Tipografija)
Slide 41/45
čitljivost
Čitljivost (angl. legibility):
ƒ Na čitljivost lahko vplivamo z velikostjo srednjega črkovnega pasu (x-hight).
ƒ Pisave z enako velikostjo črk in različnim srednjim črkovnim pasom lahko
izgledajo zelo različno.
ƒ Nekateri brskalniki omogočajo uporabniške nastavitve, ki spreminjajo
velikost črk.
Interakcija človek – računalnik (Tipografija)
Slide 42/45
priporočila
Tekst z besedami z velikimi začetnicami (angl. mixed-case) uporabi za:
ƒ kontrolne napise
ƒ informacijska sporočila
ƒ navodila
ƒ opis menujev
ƒ opis gumbov
Tekst z besedami z velikimi črkami (angl. upper-case) uporabi za:
ƒ naslove
ƒ poglavja in podpoglavja
ƒ opozorila
Interakcija človek – računalnik (Tipografija)
Slide 43/45
priporočila
Še nekaj navodil.
ƒ Za hitro branje in razumevanje naj bo tekst črn na svetli podlagi. Študije so
pokazale, da beremo črn tekst na beli podlagi 32% hitreje kot svetel tekst
na temni podlagi.
ƒ Izogibaj se vzorčasti podlagi.
ƒ Vedno upoštevaj vidne sposobnosti uporabnika.
ƒ Vedno preveri, če so izbrane ustrezne pisave.
Interakcija človek – računalnik (Tipografija)
Slide 44/45
tipografija
Priporočeno branje:
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
Klementina Možina: Knjižna tipografija, Univerza v Ljubljani, 2003
Emil Ruder: Tipografija, Partizanska knjiga, Znanstveni tisk, 1977
Robert Bringhurst: The Elements Of Typographic Style, 2004
Stephen Coles, Erik Spiekermann: The Geometry of Type: The Anatomy of
100 Essential Typefaces, Thames & Hudson Ltd, 2013.
Douglas Bonneville: The big book of font combinations, BonFX Press,
2010.
Joep Pohlen: Letter Fountain [on printing types], Taschen, 2011
Ellen Lupton: Thinking with Type, Princeton Architectural Press, 2010
James Craig, Irene Korol Scala: Designing with type, The essential Guide
to Typography
Interakcija človek – računalnik (Tipografija)
Slide 45/45