3. SCHOOLOFDESIGNANDVISUA LART Typography with CSS Text Properties, Readability & Web Fonts

4. SCHOOLOFDESIGNANDVISUA LART Clearing the Decks CSS Normalization & Reset

5. SCHOOLOFDESIGNANDVISUA LART CSS Normalization & Reset Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/ Yahoo! (YUI 3) Reset CSS http://yuilibrary.com/yui/docs/cssreset/ http://yuilibrary.com/yui/docs/cssreset/ Normalize.css 1.0 http://necolas.github.com/normalize.css/ http://necolas.github.com/normalize.css/

6. SCHOOLOFDESIGNANDVISUA LART Web-Safer Fonts and Font Embedding Typeface Options

7. SCHOOLOFDESIGNANDVISUA LART Web Safe(r) Fonts Sans-SerifSerifMonospacedFantasyScript Arial Arial Black Arial Narrow Arial Rounded MT Bold Avant Garde Calibri Candara Century Gothic Franklin Gothic Medium Futura Geneva Gill Sans Helvetica Impact Lucida Grande Optima Segoe UI Tahoma Trebuchet MS Verdana Baskerville Big Caslon Bodoni MT Book Antiqua Calisto MT Cambria Didot Garamond Georgia Goudy Old Style Hoefler Text Lucida Bright Palatino Perpetua Rockwell Rockwell Extra Bold Times New Roman Andale Mono Consolas Courier New Lucida Console Lucida Sans Typewriter Monaco Copperplate Papyrus Brush Script MT

8. SCHOOLOFDESIGNANDVISUA LART Font Embedding with @font-face @font-face { [font-family: ;]? [src: [ [format( #)]? | ]#;]? [unicode-range: #;]? [font-variant: ;]? [font-feature-settings: normal| #;]? [font-stretch: ;]? [font-weight: ]; [font-style: ]; }

9. SCHOOLOFDESIGNANDVISUA LART Communicating Relative Importance Visual Hierarchy

10. SCHOOLOFDESIGNANDVISUA LART Use a Typographic Scale

11. SCHOOLOFDESIGNANDVISUA LART Use a Typographic Scale h1 {font-size: 48px;}h2 {font-size: 36px;}h3 {font-size: 24px;}h4 {font-size: 21px;}h5 {font-size: 18px;}h6 {font- size: 16px;}p {font-size: 14px;}

12. SCHOOLOFDESIGNANDVISUA LART Contrast

13. SCHOOLOFDESIGNANDVISUA LART Provide Adequate Contrast An example of insufficient contrast resulting in poor readability An example of sufficient contrast resulting in good readability

14. SCHOOLOFDESIGNANDVISUA LART Leading

15. SCHOOLOFDESIGNANDVISUA LART Leading

16. SCHOOLOFDESIGNANDVISUA LART Leading body {font-family: Helvetica, sans-serif;font-size: 12px;line-height: 15px;}p {margin-bottom: 15px;}

17. SCHOOLOFDESIGNANDVISUA LART Tracking

18. SCHOOLOFDESIGNANDVISUA LART Tracking

19. SCHOOLOFDESIGNANDVISUA LART Tracking letter-spacing: 0.2em;

20. SCHOOLOFDESIGNANDVISUA LART Measure

21. SCHOOLOFDESIGNANDVISUA LART Measure

22. SCHOOLOFDESIGNANDVISUA LART Margins, Gutters, & Indentation Whitespace

23. SCHOOLOFDESIGNANDVISUA LART Whitespace

24. SCHOOLOFDESIGNANDVISUA LART Justification

25. SCHOOLOFDESIGNANDVISUA LART Justification

26. SCHOOLOFDESIGNANDVISUA LART Let’s give it a try…