Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography...

of 34 /34
Typography Web Design Professor Frank

Embed Size (px)

Transcript of Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography...

  • Slide 1
  • Typography Web Design Professor Frank
  • Slide 2
  • Characteristics of Type on the Web Magazine/book typography 1200 dpi Computer screens 85 ppi (maximum)
  • Slide 3
  • Anti-aliased type
  • Slide 4
  • On the Fly Construction Web page layouts and typography are suggestions of how your pages should be renderedyou never know exactly how they will look on the readers screen
  • Slide 5
  • Cascading Style Sheets (CSS) Provide control over the exact visual style of headers, paragraphs, lists, and other page elements
  • Slide 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
  • Slide 7
  • Advantages of CSS
  • Slide 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
  • Slide 9
  • Media Style Sheets
  • Slide 10
  • Consistency is Key! Provides polish to a site Gives visitors expectation about structure of text Increases readers confidence in your words
  • Slide 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
  • Slide 12
  • Alignment and White Space Delineate main text from other page elements Add visual interest contrasting positive and negative space
  • Slide 13
  • Alignment Justified text Centered and right-justified text Left-justified text Headlines
  • Slide 14
  • Alignment
  • Slide 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
  • Slide 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
  • Slide 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
  • Slide 18
  • Indenting Paragraphs Indenting vs line of white space Use depends on type of document Be consistent!
  • Slide 19
  • Typefaces Legibility on-screen Adapted traditional typeface Designed for the screen Typefaces for other media
  • Slide 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 Dont use more than two typefaces on a page
  • Slide 21
  • Screen vs Print Fonts
  • Slide 22
  • Specifying Typefaces If specified typeface isnt available, browsers will display default Specify multiple fonts for each style: p { font-family: "Times New Roman", Georgia, Times, serif }
  • Slide 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; }
  • Slide 24
  • Text Size & Fixed/Flexible Layout
  • Slide 25
  • Type Sizes for Comfortable Reading Readers prefer large type Generous leading (line spacing) = legibility Most users never change default setting in their browsers
  • Slide 26
  • Type Sizes for Comfortable Reading
  • Slide 27
  • Emphasis Italics Bold Underlining Color Spacing
  • Slide 28
  • CAPITALS Avoid ALL CAPS! Users recognize shape of words
  • Slide 29
  • Semantic Emphasis Abbreviation Acronym Address Block quotation Citation Computer code Defined term Emphasis Headings,,,,, Lists,,,, Strong emphasis
  • Slide 30
  • Display Typography With Graphics
  • Slide 31
  • Provide the equivalent text using the alt attribute of the tag Use Photoshops anti-aliasing type unless type is smaller than 10 points or 10 pixels
  • Slide 32
  • Signal to Noise Ratio Good communication maximizes whats important while minimizing the things that distract from the message
  • Slide 33
  • Webjunk Avoid: Desire for attention at any cost (ie Flash) Overcrowding/restricted space Lack of control over the elements of a page
  • Slide 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