Basics of typography and relevant considerations for print and web designers

1. design 101

2. saedI •
saedI •
sttniih dna seniillediiuG •
s n h dna sen ed u G •
noiittamrofnii llaciinhceT •
no amrofn ac nhce T •
ttnempolleved llaciirottsiiH •
nempo eved ac ro s H •
Presentation Synopsis

3. Historical Development
of the
Art Craft
&
of
TYPOGRAPHY

4. From inscriptions in stone
to printed pages and digital
images on the web ...

5. ...typography is still all about
the effective transfer of
information.

6. ..gniihsiillbup koob
gn hs bup koob ..yrottsiih
yro s h
dna srepapswen
dna srepapswen nii skoob ffo
n skoob o
roff epytt ffo gniittttes
ro epy o gn es noiittcudorp ssam
no cudorp ssam
ehtt deziillaiirttsudnii
eh dez a r sudn ttsriiff ehtt dewolllla
sr eh dewo a
eniihcam epyttoniiL
en hcam epy on L epytt ellbavom
epy e bavom
ehtt ffo noiittnevnii
eh o no nevn ffo noiittnevnii
o no nevn
s’’rellahttnegreM •
s re ah negre M • s’’grebnettuG •
s grebne uG •
Two important guys

7. ..derutam gniitniirp dna gniittesepyt
derutam gn tn rp dna gn ttesepyt
ffo seiigollonhcet detaller eht sa
o se go onhcet deta er eht sa
repap ot knii ffo reffsnart detamotua eht
repap ot kn o re snart detamotua eht
ot yaw evag tnemhcrap no yhpargiillllac
ot yaw evag tnemhcrap no yhparg ac
dna snoiitpiircsnii dellesiihc-enotS
dna sno tp rcsn de es hc-enotS
..devllove evah
dev ove evah
seiigollonhcet ellballiiava eht sa yrotsiih
se go onhcet e ba ava eht sa yrots h
hguorht devllove evah smroffretteL
hguorht dev ove evah smro retteL

8. tuc esicerp ,niht dna kciht
tuc esicerp ,niht dna kciht
ereves ,sserts latnoziroh ereves :nredoM –
ereves ,sserts latnoziroh ereves :nredoM –
sretnuoc rediw ,tsartnoc niht
sretnuoc rediw ,tsartnoc niht
dna kciht regnorts ,sserts lacitrev :lanoitisnarT –
dna kciht regnorts ,sserts lacitrev :lanoitisnarT –
slatipac naht rellat srednecsa
slatipac naht rellat srednecsa
,sserts delgna euqilbo :elytS dl O –
,sserts delgna euqilbo :elytS dl O –
scilati evisruc
scilati evisruc
,sekorts niht dna kciht ,srettel fo spit
,sekorts niht dna kciht ,srettel fo spit
e h t n o s e k o r t s - s s o r c t r o h s - - FIRES •
e h t n o s e k o r t s - s s o r c t r o h s - - FIRES •

9. gnitnirp tesffo dna gnittesepyt
gnitnirp tesffo dna gnittesepyt
-otohp fo tnevda htiw esu desaercn l –
-otohp fo tnevda htiw esu desaercn l –
thgiew ekorts fo noitairav elttiL
thgiew ekorts fo noitairav elttiL –
–
seerged 21 ta detnalls tsom
seerged 21 ta detna s tsom
- secaf namor fo snoiisrev
- secaf namor fo sno srev
euqiillbo yllpmiis era secaf ciillatI –
euq bo y pm s era secaf c atI –
sfires gnitcejorp on evah sretteL –
–
”ttuohttiiw“ roff drow hcnerF
” uoh w“ ro drow hcnerF
ehtt sii ”snas“ -- FIIRES SNAS •
eh s ”snas“ -- F RES SNAS •

10. erehpsomta
erehpsomta
niiatrec a ekove ot dengiised secaF –
n atrec a ekove ot deng sed secaF –
noitnetta
noitnetta
s’redaer eht barg stnof yssarb ,dloB –
s’redaer eht barg stnof yssarb ,dloB –
ecnagele fo hcuot a dda secaf tpircS –
ecnagele fo hcuot a dda secaf tpircS –
..esu gniitttteg-noiittnetttta
esu gn eg-no ne a
ro eviittaroced roff dengiised
ro ev aroced ro deng sed
secaffepytt -- EVIITAROCED •
seca epy -- EV TAROCED •

11. A Short Review of
Typographic Terminology

12. .enil esab eht woleb sdnetxe
taht rettel esacrewol a fo trap eht - r e d n e c s e D •
.thgieh-x eht evoba sdnetxe
taht rettel esacrewol a fo trap eht - r e d n e c s A •
.tnof a nihtiw srettel
esacrewol dna latipac neewteb pihsnoitaler
eht fo erusaem A .nwod ro pu dnetxe t’nod
t a h t s r e t t e l e s a c r e w o l f o t h g i e h e h t - thgieh-X •
srettel
n e e w t e b d n a e d i s n i e c a p s e t i h w - retnuoC •
s r e t t e l e h t f o s e n i l n w a r d l a u t ca - e k o r t S •
Elements of Letter Forms

13. .ezis tnof ot setalerroc htdiw nmuloC .tuoyal
nmuloc elpitlum ro nmuloc elgnis rof pu tes
eb yam egap A .nihtiw tes si epyt eht ecaps
l a t n o z i r o h f o e r u s a e m e h t - htdiW nmuloC •
.epyt tes-dnah fo senil neewteb detresni spirts
dael fo esu ni detanigiro mreT .epyt fo senil
n e e w t e b e c a p s y n a f o n o i t i d d a e h t - gnidaeL •
.tnof eht woleb dna
evoba ecaps enil fo tnuoma na sedulcni hcihw
)hcni rep sacip 6/acip rep stniop 21( stniop
n i d e r u s a e m t n o f a f o e z i s e h t - ezis tnioP •
Basic Type Specs

14. .ssenetairporppa no gnidneped ,)hsulf
sedis htob( deifitsuj ro ,deretnec ,)deggar
-tfel( thgir hsulf ,)deggar-thgir( tfel hsulf
snmuloc epyt fo gnittes eht - noitacifitsuJ •
ytilibigel ecnahne
ot sretcarahc laudividni neewteb ecaps
fo esaerced ro esaercni eht - gninreK •
.ytilibigel ezimitpo ot detsujda
era seulav kcarT .ecneuqes ni smrof
rettel ezingocer ylisae dna enil a gnola
kcart ot eye eht fo ytiliba eht - g n i k c a r T •
Fine-tuning

15. ...gnidaer elihw daerfoorp
...gnidaer elihw daerfoorp
t’now ffoloK os epyt tes ot woh …rO
t’now ffoloK os epyt tes ot woh …rO
Guidelines and Hints
Stylistic Considerations,

16. .sevlesmeht yb senil no srevo-tfel
detanehpyh on yletulosbA .nmuloc a fo
enil tsal ro tsrif eht etanehpyh )reve( reve N •
.nehpyh eht retfa
ro erofeb sretcarahc 3 naht ssel reven dna
,epyt fo senil 5 rep nehpyh eno naht erom
reveN .esiwrehto tnemnrecsid taerg htiw
dna ylgniraps esu ,elbissop lla ta fi diovA •
Hyphens

17. .stops ylthgisnu eseht xif yllausu
nac nehpyh decalp-llew a neve ,gninrek
,tnemtsujda kcart emoS .txet deifitsuj fo
snmuloc ruoy ni ”seloh“ ro ”srevir“ rof hcta W •
.wollof taht senil txet fo gnipparw-er
esuac ot enil txen eht ot nwod drow a
gnicnuob seriuqer siht semitemoS .shtdiw
enil regnol no ecnereffid sacip 5-4 naht
erom on dna shtdiw nmuloc trohs no nac
uoy tseb sa pu neve shtgnel enil eht ekaM
.wolf sgnidne enil ruoy yaw eht hcta W •
Rag Control

18. .sserp eht hguorht teehs eht llup ot reppirg
eht rof nigram hguone retnirp eht evaeL •
.sdlof neewteb retnec snmuloc eht taht os
ecaps rettug eht rof snigram eht elbuod ot
rebmemer ,eceip dedlof a pu gnittes neh W •
.aera egami eht dna egap eht neewteb dna
,srettug eht dna snmuloc eht neewteb
,sretnuoc dna sekorts eht neewteb si
ecnalab fo tniop taht erehw wonk ot te G •
.dneirf ruoy si ecaps etihw ,rebmeme R •
White Space

19. .scilati dna spac-lla fo esu eht
timiL .redaer eht sserts t’nseod dna elbigel
ylhgih si ti erus ekaM .tnemucod eht nihtiw
noitacinummoc niam eht si txet ydoB •
.ot sniatrep ti taht kcolb
txet eht otni yllarutan swolf ti taht os retfa
naht daehbus a erofeb gnidael erom esU
.noitinifed dna erutcurts meht gnivig ,skcolb
txet hguorht redaer eht ediug sdaehbuS •
.daer ot ysae dna psirc ,raelc meht ekaM
.segap ruoy rof spam daor era senildaeH •
Legibility

20. .elbigel erom si ti sa stnemucod gnol ni
txet ydob rof retteb skrow yllausu epyt fireS •
.secaf cilati dna tpircs no yllaicepse
,elbissop nehw sgnittes spac-lla diovA •
.rehtegot llew krow yllausu t’now tnof
enildaeh dlob gib a dna tpircs etaciled A
. e z i n o m r a h t a h t s t n o f y r a t n e m e l p m o c e sU •
.tnemucod rep
ytnelp era seilimaf epyt owt ,sesoprup tsom
roF !ekil kool ot eceip ruoy tnaw uoy tahw
s’taht sselnu ,kool ”eton mosnar“ eht diov A •
Font Compatibility

21. .noitinifed dna tsartnoc doog evah uoy erus
ekaM .tnemucod ruoy ni desu sroloc eht ot
noitaler ni txet ruoy fo ytilibigel eht kceh C •
.dekoolrevo ev’uoy gnihtemos
ees yam yeht esuaceb llew sa foorp
ypoc drah ruoy daer esle enoemos eva H •
.gnihtyreve hctac
t’nod srekcehc lleps esuaceb ,ypoc drah a
d a e r f o o r p n e h t , t n e m u c o d r u o y k c e h c l l e pS •
Proofread

22. .ylthgit oot ton tub ylluferac denrek
dna ecnatsid a morf daer eb ot hguone
egral eb dluohs egangis rof tes epyT •
.srettel neewteb ecaps
erom tib a wolla ot pu denesool gnikcart
eht evah dluohs noisivelet rof tes epyT •
.)TNT( denrek dna dekcart eb dluohs
sdraobllib ro syalpsid egral rof tes epyT •
.smrof rettel denifed-llew htiw secafepyt dna
sezis tnof regral esu ot erus eb ,nerdlihc ro
s t l u d a r o i n e s o t d e t e g r a t s i t n e m u c o d r u o y fI •
Special Considerations

23. Be Creative!

24. .tnemtaert fo epyt siht rof etairporppa
ylhgih si sroloc gnitnemelpmoc dna spac
latnemanro evitaroced fo esu ehT .otni ti pord
ot hsiw uoy senil ynam revewoh ro ,)elpmaxe
siht ekil( pac pord enil-2 a sa ro )enil eno( pac
laitini na sa deificeps era yehT .hpargarap wen
a ffo tes ot evres htdiw nmuloc eht fo
htgnel eht nihtiw tes srettel latipac egra
L
Drop caps are fun!

25. .tceffe siht eveihca pleh
nac gnidael detareggaxE
.nmuloc s’ralohcs a ro
,etouq tuollup a sa hcus
,txet fo kcolb cificeps a ot
noitnetta ward ot tnaw uoy
semitemoS
Use leading creatively!

26. .ylgnidrocca ngila snoitces taht os
txet detellub no stnedni gnignah esu syawlA •
.ereh enod ev’I sa ,osla ,noisacco
no stnedni esrever esu ot eerf leef tuB
.stnedni rediw deen snmuloc rediw elihw
,stnedni worran deen shtdiw nmuloc worraN
.hguoht ,ylisae os stluafed tpecca t’noD
.eulav tluafed eht sa demmargorp-erp tnedni
hcni-flah citamotua na evah smargorp tsoM
Adjust indent values for effect!

27. ❇ ❇ ❇ ❇ ❇ ❇ ❇
.egassem ruoy
esufnoc t’nod uoy os
noituac esicrexe tub
,esu ot nuf taerg era
skcolb txet tesffo ot
stabgnid evitaroced
dna selur ,sredroB
❇ ❇ ❇ ❇ ❇ ❇ ❇
Borders, rules, & dingbats...

28. .erehwemos ereht
ni tsol teg lliw
egassem ruoy ro
,daolrevo ot ton
luferac eb tuB
.ytilauq doog fo si ti
fi dna ,noitaredom ni ,gniht
lufrednow a si tra pilc ,seY
Clip art and more clip art...

29. erutuf eht htiw drawrof
og ,tsap eht morf nraeL •
keew
hcae wen gnihtemos yrT •
”ha“ ruoy dniF •
nuf eva H •
Above all...