1 / 34

Typography

Typography. Web Design Professor Frank. Characteristics of Type on the Web. Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum). Anti-aliased type. On the Fly Construction.

milica
Download Presentation

Typography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <abbr> • Acronym <acronym> • Address <address> • Block quotation <blockquote> • Citation <cite> • Computer code <code> • Defined term <dfn> • Emphasis <em> • Headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • Lists <ol>, <ul>, <dl>, <menu>, <dir> • Strong emphasis <strong>

  30. Display Typography With Graphics

  31. Display Typography With Graphics • Provide the equivalent text using the “alt” attribute of the <img> 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”

More Related