• Like
Typography 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Typography 101

  • 1,176 views
Published

Basics of typography and relevant considerations for print and web designers

Basics of typography and relevant considerations for print and web designers

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,176
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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