Fonts! Kate Krolicki [email_address]
  Anatomy of Type  
   
   
   
   
   
Categories of Type  
 
   
Oldstyle <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs slanted on lower case letters </li></ul></ul><ul><ul><li...
   
Modern <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs are thin & flat </li></ul></ul><ul><ul><li>thick/thin- rad...
   
Slab Serif <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs are thick, slab-like </li></ul></ul><ul><ul><li>thick/...
   
Sans Serif <ul><ul><li>no serifs </li></ul></ul><ul><ul><li>thick/thin- none, or minor </li></ul></ul><ul><ul><li>x-height...
   
Script <ul><ul><li>emulates hand lettering </li></ul></ul><ul><li>Examples: </li></ul>
   
Monospaced <ul><ul><li>all letters are the same width </li></ul></ul><ul><li>Examples: </li></ul>
   
Distressed <ul><ul><li>blotchy </li></ul></ul><ul><ul><li>distorted </li></ul></ul><ul><ul><li>fun, but use sparingly! </l...
   
Decorative <ul><ul><li>very distinct, eye-catching & flavorful </li></ul></ul><ul><ul><li>fun, but use sparingly! </li></u...
Text Density: Tracking & Leading <ul><li>Tracking  is the general spacing between letters - a.k.a. letter spacing. </li></...
Choosing the Right Font  
Reinforce Your Message <ul><li>Is your message playful or serious? </li></ul>
Evoke the Desired Response <ul><li>. </li></ul>
Readability and Legibility <ul><li>A font is  readable  if you can easily read long blocks of text that are set in it. </l...
Other Features that impair readability/legibility <ul><ul><li>very noticible flourishes/decoration </li></ul></ul><ul><ul>...
The Key to Readability <ul><li>Moderation of features. </li></ul><ul><li>The more time you spend noticing a font, the less...
The Key to Legibility <ul><li>Instant recognition of letterform. </li></ul><ul><li>Most legible font type:  Sans Serif </l...
The font is on YOUR computer <ul><li>Unless it's a  browser safe font , don't count on your printer or viewer having the f...
Font File Types <ul><li>True Type Fonts  ( .ttf ): </li></ul><ul><ul><li>files are platform specific- you need a Mac or PC...
Free vs. Paid <ul><li>Free Fonts : </li></ul><ul><ul><li>Great for one-off jobs </li></ul></ul><ul><ul><li>May have very l...
Fonts as Design Elements <ul><li>Typography Posters </li></ul><ul><li>Typography Layouts </li></ul><ul><li>Keep in mind: <...
Tips for Print Material <ul><ul><li>Avoid delicate serifs and fine lines for light on dark printing or lower quality print...
Resources <ul><li>Free Fonts: </li></ul><ul><li>http://www.fontfreak.com/ </li></ul><ul><li>http://www.1001freefonts.com/ ...
Upcoming SlideShare
Loading in …5
×

Fonts!

854 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
854
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • x-height is the key factor in how large we perceive a font to be.
  • developed along with the first movable type presses mimics lettering of hand scribed books, like the bible. mimics strokes of a broad tip pen. many are named after their designers.
  • developed during the industrial revolution.   stokes no longer look like a pen- deliberately more mechanical.
  • developed later in the industrial revolution specifically for the purpose of advertising take modern, thicken up all strokes to make it more readable
  • came into vogue during the bauhaus movement - form follows function uses simplest, most fuctional representation of the letter
  • variations appear throughout the ages
  • blackletter, calligraphy, comic book, cursive, print,  draft, etc.
  • designed for typewriters, which could only move the same distance forward with each letter typed.
  • aka grunge, garage, fringe, etc. started to see them with the advent of desktop publishing and the ability for people to create their own fonts
  • pronounced ledding- becuase strips of lead were put between lines.
  • (174/178) flavor i quit example? show examples of good use?
  • (174/178) flavor i quit example? show examples of good use?
  • serifs lead the eye from one letter to the next. oldstyle has moderate thick/thin, moderate x-height
  • use for headlines or any short snippet of text that should be easily scanned.
  • tons of free font downloads but sometimes have limits- caps only, no punc, etc. otf  - 65K+ glyphs ttf &amp;quot;pro&amp;quot; adobe are otf show veer options? download links in resource page most free or inexpensive third-party fonts use plain TrueType
  • arno pro example? veer tour? mention resource links
  • Fonts!

    1. 1. Fonts! Kate Krolicki [email_address]
    2. 2.   Anatomy of Type  
    3. 3.    
    4. 4.    
    5. 5.    
    6. 6.    
    7. 7.    
    8. 8. Categories of Type  
    9. 10.    
    10. 11. Oldstyle <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs slanted on lower case letters </li></ul></ul><ul><ul><li>serifs curved where they connect to letter </li></ul></ul><ul><ul><li>thick/thin- gentle </li></ul></ul><ul><ul><li>stress- diagonal </li></ul></ul><ul><ul><li>easy to read </li></ul></ul><ul><li>Examples: </li></ul>
    11. 12.    
    12. 13. Modern <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs are thin & flat </li></ul></ul><ul><ul><li>thick/thin- radical </li></ul></ul><ul><ul><li>stress- vertical </li></ul></ul><ul><li>Examples: </li></ul>
    13. 14.    
    14. 15. Slab Serif <ul><ul><li>has serifs </li></ul></ul><ul><ul><li>serifs are thick, slab-like </li></ul></ul><ul><ul><li>thick/thin- none, all thick </li></ul></ul><ul><ul><li>stress- none or vertical </li></ul></ul><ul><li>Examples: </li></ul>
    15. 16.    
    16. 17. Sans Serif <ul><ul><li>no serifs </li></ul></ul><ul><ul><li>thick/thin- none, or minor </li></ul></ul><ul><ul><li>x-height- usually large </li></ul></ul><ul><li>Examples: </li></ul>
    17. 18.    
    18. 19. Script <ul><ul><li>emulates hand lettering </li></ul></ul><ul><li>Examples: </li></ul>
    19. 20.    
    20. 21. Monospaced <ul><ul><li>all letters are the same width </li></ul></ul><ul><li>Examples: </li></ul>
    21. 22.    
    22. 23. Distressed <ul><ul><li>blotchy </li></ul></ul><ul><ul><li>distorted </li></ul></ul><ul><ul><li>fun, but use sparingly! </li></ul></ul><ul><li>Examples: </li></ul>
    23. 24.    
    24. 25. Decorative <ul><ul><li>very distinct, eye-catching & flavorful </li></ul></ul><ul><ul><li>fun, but use sparingly! </li></ul></ul><ul><li>Examples: </li></ul>
    25. 26. Text Density: Tracking & Leading <ul><li>Tracking  is the general spacing between letters - a.k.a. letter spacing. </li></ul><ul><li>Leading is the space between lines - a.k.a. linespacing. </li></ul>
    26. 27. Choosing the Right Font  
    27. 28. Reinforce Your Message <ul><li>Is your message playful or serious? </li></ul>
    28. 29. Evoke the Desired Response <ul><li>. </li></ul>
    29. 30. Readability and Legibility <ul><li>A font is readable if you can easily read long blocks of text that are set in it. </li></ul><ul><li>A font is  legible  if you can instantly recognize a brief snippet of text written in it. </li></ul>
    30. 31. Other Features that impair readability/legibility <ul><ul><li>very noticible flourishes/decoration </li></ul></ul><ul><ul><li>drastic thick/thin contrast </li></ul></ul><ul><ul><li>very bold or very light </li></ul></ul><ul><ul><li>very narrow (condensed) or very wide (expanded) </li></ul></ul><ul><ul><li>very slanted </li></ul></ul><ul><ul><li>very large or very small x-height </li></ul></ul><ul><ul><li>very wide or very narrow column widths </li></ul></ul><ul><ul><li>poor word spacing </li></ul></ul><ul><ul><li>poor line spacing </li></ul></ul><ul><ul><li>poor letter spacing (inc. monospaced) </li></ul></ul><ul><ul><li>poor use of justification or centering </li></ul></ul><ul><ul><li>low contrast with background color </li></ul></ul><ul><ul><li>WRITING IN ALL CAPS </li></ul></ul>
    31. 32. The Key to Readability <ul><li>Moderation of features. </li></ul><ul><li>The more time you spend noticing a font, the less you're reading it.   </li></ul><ul><li>The most readable fonts are &quot;invisible.&quot; </li></ul><ul><li>Most readable font type: Oldstyle </li></ul>
    32. 33. The Key to Legibility <ul><li>Instant recognition of letterform. </li></ul><ul><li>Most legible font type:  Sans Serif </li></ul>
    33. 34. The font is on YOUR computer <ul><li>Unless it's a  browser safe font , don't count on your printer or viewer having the font on their computer! </li></ul><ul><li>Solutions: </li></ul><ul><ul><li>save/export as a non-vector format: </li></ul></ul><ul><ul><ul><li>PDF </li></ul></ul></ul><ul><ul><ul><li>GIF </li></ul></ul></ul><ul><ul><ul><li>PNG </li></ul></ul></ul><ul><ul><li>convert text to paths before saving as a vector format </li></ul></ul><ul><ul><li>use cufon on web pages (requires javascript) </li></ul></ul>
    34. 35. Font File Types <ul><li>True Type Fonts ( .ttf ): </li></ul><ul><ul><li>files are platform specific- you need a Mac or PC version. </li></ul></ul><ul><ul><li>can only hold 265 gylphs per file, so true type collections can provide extra options. </li></ul></ul><ul><ul><li>most common free font type </li></ul></ul><ul><li>Open Type Fonts ( .otf ): </li></ul><ul><ul><li>cross-platform compatible </li></ul></ul><ul><ul><li>can hold 65K+ glyphs per file </li></ul></ul><ul><ul><li>more common as a paid font </li></ul></ul>
    35. 36. Free vs. Paid <ul><li>Free Fonts : </li></ul><ul><ul><li>Great for one-off jobs </li></ul></ul><ul><ul><li>May have very limited character sets- missing punctuation, upper case, lower case, etc. </li></ul></ul><ul><li>&quot;Pro&quot; Fonts : </li></ul><ul><ul><li>Contain more options, expanded character sets, decorations, and multi-language support. </li></ul></ul><ul><ul><li>Always check the description before buying- not all paid/otf fonts have extra perks.  </li></ul></ul><ul><ul><li>Good for long term identity projects </li></ul></ul>
    36. 37. Fonts as Design Elements <ul><li>Typography Posters </li></ul><ul><li>Typography Layouts </li></ul><ul><li>Keep in mind: </li></ul><ul><ul><li>diagonals add visual interest </li></ul></ul><ul><ul><li>vastly different font sizes can be fun </li></ul></ul><ul><ul><li>opacity & clipping masks can give cool effects </li></ul></ul><ul><ul><li>a good background texture can make a big difference </li></ul></ul>
    37. 38. Tips for Print Material <ul><ul><li>Avoid delicate serifs and fine lines for light on dark printing or lower quality print jobs </li></ul></ul><ul><ul><li>Don't let the pretty font distract you from spell checking! </li></ul></ul><ul><ul><li>Ask your printer how they like material prepared, and what file formats they perfer.  </li></ul></ul><ul><ul><li>Always, always get a proof or look at a test copy before committing to a large run </li></ul></ul>
    38. 39. Resources <ul><li>Free Fonts: </li></ul><ul><li>http://www.fontfreak.com/ </li></ul><ul><li>http://www.1001freefonts.com/ </li></ul><ul><li>http://www.urbanfonts.com/ </li></ul><ul><li>http://www.fontriver.com/ </li></ul><ul><li>http://www.free-fonts.com/ </li></ul><ul><li>The Non-Designers Type Book , by Robin Williams </li></ul><ul><li>Browser safe fonts </li></ul><ul><li>Embedding fonts w/ cufon </li></ul><ul><li>Professional Fonts: </li></ul><ul><li>http://www.linotype.com/ </li></ul><ul><li>http://www.veer.com/ </li></ul><ul><li>http://www.fontshop.com </li></ul><ul><li>http://www.adobe.com/type/ </li></ul><ul><li>http://www.fonts.com </li></ul><ul><li>Create your own fonts </li></ul>

    ×