typography web design professor frank. characteristics of type on the web magazine/book typography...
TRANSCRIPT
![Page 1: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/1.jpg)
Typography
Web DesignProfessor Frank
![Page 2: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/2.jpg)
Characteristics of Type on the Web
• Magazine/book typography – 1200 dpi• Computer screens – 85 ppi (maximum)
![Page 3: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/3.jpg)
Anti-aliased type
![Page 4: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/4.jpg)
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
![Page 5: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/5.jpg)
Cascading Style Sheets (CSS)
• Provide control over the exact visual style of headers, paragraphs, lists, and other page elements
![Page 6: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/6.jpg)
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
![Page 7: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/7.jpg)
Advantages of CSS
![Page 8: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/8.jpg)
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
![Page 9: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/9.jpg)
Media Style Sheets
![Page 10: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/10.jpg)
Consistency is Key!
• Provides polish to a site • Gives visitors expectation about structure of
text• Increases readers’ confidence in your words
![Page 11: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/11.jpg)
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
![Page 12: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/12.jpg)
Alignment and White Space
• Delineate main text from other page elements• Add visual interest – contrasting positive and
negative space
![Page 13: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/13.jpg)
Alignment
• Justified text• Centered and right-justified text• Left-justified text• Headlines
![Page 14: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/14.jpg)
Alignment
![Page 15: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/15.jpg)
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
![Page 16: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/16.jpg)
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
![Page 17: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/17.jpg)
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
![Page 18: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/18.jpg)
Indenting Paragraphs
• Indenting vs line of white space• Use depends on type of document• Be consistent!
![Page 19: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/19.jpg)
Typefaces
• Legibility on-screen• Adapted traditional typeface• Designed for the screen• Typefaces for other media
![Page 20: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/20.jpg)
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
![Page 21: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/21.jpg)
Screen vs Print Fonts
![Page 22: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/22.jpg)
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 }
![Page 23: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/23.jpg)
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; }
![Page 24: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/24.jpg)
Text Size & Fixed/Flexible Layout
![Page 25: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/25.jpg)
Type Sizes for Comfortable Reading
• Readers prefer large type• Generous leading (line spacing) = legibility• Most users never change default setting in
their browsers
![Page 26: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/26.jpg)
Type Sizes for Comfortable Reading
![Page 27: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/27.jpg)
Emphasis
• Italics• Bold• Underlining• Color• Spacing
![Page 28: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/28.jpg)
CAPITALS
• Avoid ALL CAPS!• Users recognize shape of words
![Page 29: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/29.jpg)
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>
![Page 30: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/30.jpg)
Display Typography With Graphics
![Page 31: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/31.jpg)
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
![Page 32: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/32.jpg)
Signal to Noise Ratio
• Good communication maximizes what’s important while minimizing the things that distract from the message
![Page 33: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/33.jpg)
“Webjunk”
• Avoid:– Desire for attention at any cost (ie Flash)– Overcrowding/restricted space – Lack of control over the elements of a page
![Page 34: Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)](https://reader030.vdocument.in/reader030/viewer/2022013004/56649da15503460f94a8d02a/html5/thumbnails/34.jpg)
“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”