1. Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication

2. Proportional vs. Monospace

3. Serif vs. sans serif Serif font (Times New Roman)
Sans Serif font (Helvetica)
For body text
Serif best for print
Sans serif best for web

4. Standard serif and sans serif fonts:
PC: Times New Roman/Arial
Mac: Times/Helvetica
Android: Roboto/Droid Serif
iOS: ?
Linux: ?

5. Display Fonts Association- have to do with our past experience
Visual communication—appearance of the font

6. Association

7. Visual Communication

8. Legibility Legibility--function of typeface design
Informal measure of how easy it is to distinguish one letter from another in a particular typeface

9. Readability Dependent upon how the typeface is used
Size (current recommendation 16px for body text)
Contrast
Line spacing (leading)
Line length

10. Print vs. web Print is a higher resolution medium (>150 dpi)
Typical desktop screen resolution is around 100 dpi
Read slower on computer screen

11. Optimized for screen
Verdana: Sans serif, optimized for reading on screen
Georgia: Serif typeface used frequently on the web
Arial, Helvetica, Geneva, others
Resource:

12. Fonts for the web In print you specify
On the web you suggest an ordered list of fonts called a font stack
Ideal, alternative, common, generic

13. Classic Dreamweaver Font Stacks
Arial, Helvetica, sans-serif
Courier New, Courier, monospace
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Body text - font-family: Ideal, Fit , Common, Generic;
Headings - font-family: Ideal, Similar , Common, Generic;

14. Alignment Justified text Centered text Right justified text
Left justified text (ragged right)

15. Justified
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.

16. Centered
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.

17. Aligned Right
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.

18. Ragged right
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.

19. Line length Avoid very long lines of text
The eye’s span of acute focus is only about three inches wide
Designers keep text in columns or blocks not much larger than that comfortable eye span
Two columns are easier to read than one wide column in print—not on web, though

20. Optimal line lengths Too short means too much tracking back and forth
Too long means too hard to find the next line
Rules of thumb vary. Typically characters.
Elements of Typographic Style: 66 characters per line

21. Text as graphics
Create graphic using Photoshop and specifying font—logos, buttons.
Avoid for body text-load time, search engine issues, maintenance.

22. Typography on the web Font tags CSS Styles
Very limited typefaces are available
Very little control

23. Font size on the web Pixels Ems Avoid points
Older browsers - User resize fonts when specified in ems, not pixels.

24. Readability on the web
Reading speed is about 25% slower on screen vs. print. (resolution).
Contrast issues: Black text on white background most readable.

25. Leading (line spacing)
Default is 1.15x or so
Increase to 1.25 for longer lines or for effect
CSS line-height property (in pixels or ems).

26. Emphasizing text
Bold
Italic
Underlined
Color
ALL CAPS

27. Future @font-face property (Web fonts) Example #1 – Skylark Lounge
Example #2 – Hi*Beams
Google Web Fonts
Example #3 – Midwinter Bluegrass
Purchasing license
Browser support