Todays Agenda

1
Todays Agenda

• Fonts
• Downloading Fonts
• Installing Fonts
• Creating Banners in Fireworks

2
04 Type

• By Doug Holschuh

3
Fonts Have Meaning

• The Middle Ages
• The Coffee Klatch
• The Elegant Bride
• Pong

4
My Bad!

• The Middle Ages
• The Coffee Klatch
• The Elegant Bride
• Pong

5
Fonts Have Meaning

• Classic Adobe Jenson
• Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.

6
Fonts Have Meaning

• Modern Century Gothic
• Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.

7
Fonts Have Meaning

• Fun Marker Felt
• Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.

8
Fonts Have Meaning

• Retro Century Schoolbook
• Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.

9
Serif Fonts

• A tail or stroke appears at the end of some
  characters
• Serif fonts generally used in text passages

10
Sans Serif Fonts

• No tail or stroke appears at the end of any
  character
• Sans Serif fonts generally used for headlines

11
What Makes Fonts Different?
12
Two Fonts
Times New Roman Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
Adobe Minion Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
13
Lets Look Closer
ee
RR
aa
AA
gg
SS
14
Type Can Take a Back Seat
15
Or It Can Be In Your Face
16
The Web Limits Type

• Thats why we have to stick with
• Arial/Helvetica/sans-serif
• Courier New/Courier/monospace
• Times New Roman/Times/serif
• But thanks to Microsofts monopoly
• Comic Sans MS
• Trebuchet MS
• Georgia
• Verdana

17
But I Wanna Usefill in with your favorite font!

• Fonts as graphics (heading and logos only) are
  key to distinguishing your site.
• Some other online technology
• Macromedia Flash
• Streaming Video

18
Which Font Is Better?

• Traditionally for print publications, a serif
  font like Times New Roman, published by Monotype
  and Microsoft, is considered easier to read.
• On the screen, it is generally believed that a
  sans-serif font like Arial, published Monotype
  and Microsoft, is easier to read.

19
Font Combinations
Heading Helvetica Text Times
Heading Big Caslon Text Lucida Grande
Heading Verdana Text Verdana
Heading Gill Sans Text Adobe Caslon
Heading Curlz MT Text Verdana
Heading Adobe Myriad Text Adobe Minion
http//www.will-harris.com/esperfonto/
20
Problems/Solutions

• Fonts too small or too large (1012 pt is about
  right)
• Lines too long (60 characters per line)
• Font and background color without high contrast
  (think black white)
• Overuse of Times New Roman (use Georgia or
  sans-serif)
• General lack of control (Cascading Style Sheets)

21
Line Length

• Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Integer nisl. Vivamus elementum
  libero eu risus. Vestibulum semper. Phasellus
  scelerisque, wisi nec ultricies malesuada, est
  enim molestie eros, eget aliquam ante dolor in
  magna. Cras lacinia. Duis felis eros, commodo in,
  venenatis sed, rhoncus nec, lectus. Sed euismod,
  pede eu gravida eleifend, turpis tellus
  vestibulum odio, non sollicitudin libero mi
  congue dui. Curabitur metus arcu, consectetuer
  vitae, tincidunt eu, convallis at, est.
  Vestibulum justo eros, consequat non, feugiat
  quis, lobortis sit amet, purus. Praesent mollis
  tortor eu est.
• Quisque adipiscing posuere diam. Aenean ornare,
  sapien a condimentum porta, pede est fermentum
  risus, ut semper eros diam eu libero. Nunc nec
  felis vel felis condimentum volutpat. Nam wisi.
  Etiam mauris tortor, scelerisque sed, gravida
  quis, tristique ac, dui. Nullam aliquet, elit sed
  elementum aliquam, eros est ornare ante, et
  euismod orci odio dictum justo. In vitae nunc.
  Etiam rhoncus sagittis risus. Sed id leo euismod
  sem convallis viverra. Morbi tortor diam,
  venenatis quis, venenatis eget, pharetra sit
  amet, erat.
• Nunc ultricies. Praesent id justo. Sed sagittis
  risus nonummy leo ornare scelerisque. Phasellus
  vitae libero nec risus hendrerit vehicula. Mauris
  bibendum nunc eget eros. Ut felis justo, sagittis
  vitae, elementum et, egestas quis, mauris. Nullam
  a tellus ut libero posuere gravida. Nullam eu
  nulla at dui hendrerit dictum. In at velit.
  Vestibulum et tellus et lacus bibendum varius.
  Praesent hendrerit volutpat ipsum.
• Donec fringilla euismod felis. Proin porta
  rhoncus nunc. Maecenas dapibus, lacus eu
  convallis scelerisque, nibh lacus vulputate nunc,
  a mollis wisi ligula sed justo. In ac orci a enim
  scelerisque tempus. Quisque risus mauris,
  pulvinar in, dapibus et, imperdiet eget, orci.
  Nam sed pede. Class aptent taciti sociosqu ad
  litora torquent per conubia nostra, per inceptos
  hymenaeos. Nulla pharetra, ante ut egestas
  dignissim, mauris nulla semper turpis, pharetra
  scelerisque enim nulla sed purus. Morbi
  consectetuer cursus neque. Curabitur eu metus
  eget orci sagittis laoreet. Duis vulputate
  posuere dui. Integer id tellus. Nulla quis enim.
  Nulla semper urna quis neque. Donec quis mi at
  mauris sagittis tempus. Ut felis lectus, luctus
  in, consequat tempus, aliquam vel, libero. Fusce
  non arcu. Suspendisse a lorem id leo facilisis
  venenatis.

22
Line Length

• Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Integer nisl. Vivamus elementum
  libero eu risus. Vestibulum semper. Phasellus
  scelerisque, wisi nec ultricies malesuada, est
  enim molestie eros, eget aliquam ante dolor in
  magna. Cras lacinia. Duis felis eros, commodo in,
  venenatis sed, rhoncus nec, lectus. Sed euismod,
  pede eu gravida eleifend, turpis tellus
  vestibulum odio, non sollicitudin libero mi
  congue dui. Curabitur metus arcu, consectetuer
  vitae, tincidunt eu, convallis at, est.
  Vestibulum justo eros, consequat non, feugiat
  quis, lobortis sit amet, purus. Praesent mollis
  tortor eu est.
• Quisque adipiscing posuere diam. Aenean ornare,
  sapien a condimentum porta, pede est fermentum
  risus, ut semper eros diam eu libero. Nunc nec
  felis vel felis condimentum volutpat. Nam wisi.
  Etiam mauris tortor, scelerisque sed, gravida
  quis, tristique ac, dui. Nullam aliquet, elit sed
  elementum aliquam, eros est ornare ante, et
  euismod orci odio dictum justo. In vitae nunc.
  Etiam rhoncus sagittis risus. Sed id leo euismod
  sem convallis viverra. Morbi tortor diam,
  venenatis quis, venenatis eget, pharetra sit
  amet, erat.
• Nunc ultricies. Praesent id justo. Sed sagittis
  risus nonummy leo ornare scelerisque. Phasellus
  vitae libero nec risus hendrerit vehicula. Mauris
  bibendum nunc eget eros. Ut felis justo, sagittis
  vitae, elementum et, egestas quis, mauris. Nullam
  a tellus ut libero posuere gravida. Nullam eu
  nulla at dui hendrerit dictum. In at velit.
  Vestibulum et tellus et lacus bibendum varius.
  Praesent hendrerit volutpat ipsum.
• Donec fringilla euismod felis. Proin porta
  rhoncus nunc. Maecenas dapibus, lacus eu
  convallis scelerisque, nibh lacus vulputate nunc,
  a mollis wisi ligula sed justo. In ac orci a enim
  scelerisque tempus. Quisque risus mauris,
  pulvinar in, dapibus et, imperdiet eget, orci.
  Nam sed pede. Class aptent taciti sociosqu ad
  litora torquent per conubia nostra, per inceptos
  hymenaeos. Nulla pharetra, ante ut egestas
  dignissim, mauris nulla semper turpis, pharetra
  scelerisque enim nulla sed purus. Morbi
  consectetuer cursus neque. Curabitur eu metus
  eget orci sagittis laoreet. Duis vulputate
  posuere dui. Integer id tellus. Nulla quis enim.
  Nulla semper urna quis neque. Donec quis mi at
  mauris sagittis tempus. Ut felis lectus, luctus
  in, consequat tempus, aliquam vel, libero. Fusce
  non arcu. Suspendisse a lorem id leo facilisis
  venenatis.

23
Learn More

• Bringhurst, R. (1997). The elements of
  typographic style (2nd ed.). Point Roberts, WA
  Hartley Marks.
• Dowding, G. (1995). Finers points in the spacing
  arrangment of type. Point Roberts, WA Hartley
  Marks. (Original work published 1966)
• Tschichold, J. (1998). The new typography A
  handbook for modern designers (R. McLean,
  Trans.). Berkeley, CA University of California
  Press. (Original work published 1928)
• Tschichold, J. (1991). The form of the book
  Essays on the morality of good design (H.
  Hadeler, Trans.). Point Roberts, WA Hartley
  Marks. (Original work published 1975)

24
Fun Games

• Try to stump Identifont(http//www.identifont.com
  /index.html)

25
A Few More Things

• Type
• http//typographi.com/000969.php
• http//www.identifont.com/index.html
• http//www.linotype.com/7-31-7-16896/thesansserifw
  avepart1.html

26
Downloading Fonts

• http//www.1001fonts.com
• Find a font that you like
• Download the font to your desktop
• Right click on the zipped folder and choose
  Extract All
• Click next through the wizard
• Double click on the folder with the font name
• Right click on the font and choose Copy
• Navigate to the Control Panel
• Start gt Control Panel
• Double Click on the fonts folder
• Choose Edit gt Paste to add your font to this
  folder
• The font you downloaded should now be available
  in Fireworks or Photoshop

27
Questions?