1. Typography Web Design Professor Frank

2. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)

3. Anti-aliased type

4. On the Fly Construction Web page layouts and typography are suggestions of how your pages should be rendered—you never know exactly how they will look on the reader’s screen

5. Cascading Style Sheets (CSS) Provide control over the exact visual style of headers, paragraphs, lists, and other page elements

6. Advantages of CSS Separation of content and design Efficient control over large document sets Greater typographic control with less code More formatting options than plain html tags and extensions Universal usability

7. Advantages of CSS

8. How CSS Works Site authors/users determine the size, style, and layout details for each standard html tag Once text has been styled, you can change the look of each occurrence of an element by changing its style information

9. Media Style Sheets

10. Consistency is Key! Provides polish to a site Gives visitors expectation about structure of text Increases readers’ confidence in your words

11. Legibility Good typography depends on the visual contrast between one font and another, as well as among text blocks, headlines, and the surrounding white space

12. Alignment and White Space Delineate main text from other page elements Add visual interest – contrasting positive and negative space

13. Alignment Justified text Centered and right-justified text Left-justified text Headlines

14. Alignment

15. Line Length Longer line lengths are harder to read Fixed length vs flexible Design standpoint vs users should be able to structure their own view

16. Type Color Refers to various ways of manipulating fonts, line spacing, and paragraphs to optimize the overall look and legibility of type on the page

17. Leading Vertical space in a text block Too much leading makes it hard for the eye to locate the start of the next line Print rule: 2 points above type size; web rule: be more generous

18. Indenting Paragraphs Indenting vs line of white space Use depends on type of document Be consistent!

19. Typefaces Legibility on-screen Adapted traditional typeface Designed for the screen Typefaces for other media

20. Choosing Typefaces Body text – use serif font like Times New Roman or Georgia Headlines – use sans serif like Ariel or Verdana Use compatible fonts from same family Don’t use more than two typefaces on a page

21. Screen vs Print Fonts

22. Specifying Typefaces If specified typeface isn’t available, browsers will display default Specify multiple fonts for each style: p { font-family: "Times New Roman", Georgia, Times, serif }

23. Type Size Set body text to the default text size defined in users’ browser Set all text variants (such as headings, captions, and links) using relative units, such as ems or percentages p { font-size: 1em; text-indent: 2em; }

24. Text Size & Fixed/Flexible Layout

25. Type Sizes for Comfortable Reading Readers prefer large type Generous leading (line spacing) = legibility Most users never change default setting in their browsers

26. Type Sizes for Comfortable Reading

27. Emphasis Italics Bold Underlining Color Spacing

28. CAPITALS Avoid ALL CAPS! Users recognize shape of words

29. Semantic Emphasis Abbreviation Acronym Address Block quotation Citation Computer code Defined term Emphasis Headings,,,,, Lists,,,, Strong emphasis

30. Display Typography With Graphics

31. Provide the equivalent text using the “alt” attribute of the tag Use Photoshop’s anti-aliasing type unless type is smaller than 10 points or 10 pixels

32. Signal to Noise Ratio Good communication maximizes what’s important while minimizing the things that distract from the message

33. “Webjunk” Avoid: – Desire for attention at any cost (ie Flash) – Overcrowding/restricted space – Lack of control over the elements of a page

34. “Cliff of Complexity” Complexity in data displays is good – to a point – but push the degree of complexity too far and you go past a point of rapidly diminishing viewer interest: the “cliff of complexity”