1 / 21

Typography

Typography. Lisa Kleinman 17 September 2002 LIS 385T. Definition of Typography. Classic: Layout of letters and spacing to convey meaning and understanding

hop
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 Lisa Kleinman 17 September 2002 LIS 385T

  2. Definition of Typography • Classic: Layout of letters and spacing to convey meaning and understanding • Modern: A dynamic system of contrasts resulting from the relationship of the type (its color, form, rhythm, and style) to its background “Classic” definition from www.cbbag.ca/Typography.html “Modern” definition from Kahn & Lenk, 1998

  3. Typography in Info Architecture • Type is a visual system • Gives meaning and context • Organization, labeling, navigation • Hypertext link • Heading • Content information to be read by end user. • This is some HTML code. • Structural design of information This is one section of information. This information is a descriptor for the bold text to the left.

  4. Info Architecture Deliverables • Conceptual Models • Content Inventory and Organization • User Flows and Scenarios • Task Analysis • Site Map • Page Architecture (Wireframes) Boxes and Arrows, Defining Information Architecture Deliverables (www.webmasterbase.com/article/326/15)

  5. Site Map Example Designed by Chris Noessel

  6. User Interface Design • Visual structure • Organizational landmarks • Graphic cues and reader aids • Differentiated information types • Captions and annotated diagrams Watzman, 1994

  7. Page Architecture (Wireframes)

  8. Reading on the Web • Legibility • Identification of letters, words • Readability • Typically measured by reading comprehension and speed • People are scanning the page

  9. Microsoft ClearType • Redraws each pixel to smooth out font edges • Setting in Windows XP www.microsoft.com/typography/cleartype

  10. Xerox PARC Enhanced Thumbnails • Improving search results

  11. Applying Typographic Principles • SerifvsSans Serif • Serif fonts have a stronger baseline • Serif generally better for body text • Depending on screen resolution, serifs may get lost • Letter and Word Spacing • We read by distinguishing patterns • Appropriate spacing allows the eye to read over text easily Watzman, 1994

  12. Applying Typographic Principles • Justified text vs Ragged right • Justified columns distract the eye to move downwards instead of horizontally • Black on White vs White on Black • White type is usually less legible • White text appears smaller Watzman, 1994

  13. Choosing Fonts for Web Sites • A study of fonts designed for screen display, Boyarski, Neuwirth et al., CHI Proceedings, 1998 (acm.org) • This paper also has some good references for how people read on screens. See Gould, Dillon, Mills. • Web typography lesson • http://hotwired.lycos.com/webmonkey/01/45/index4a.html?tw=design

  14. Appendix Detailed information about typography – history of fonts and technical terms

  15. History of Type Styles • Classical/Old Style:1450-1700 • Type sets based on handwriting/calligraphy styles • Transitional:1700-1800 • Greater contrast between thick and thin strokes • Increased type delicacy required improved letterpresses • Modern:1800-1900 • Sharp contrast between thick and thin strokes • Hairline thin serifs • Bauhaus/Swiss Modern:1900-1960 • Geometrically designed sans serfis • Contemporary:1960-Present • Development of fonts specific to purpose or medium (eg Adobe Postscript fonts)

  16. Typography Terms (1 of 3) • Letter Spacing • Kerning fixes uneven spacing between letters • Tracking adds or removes letter spacing between all the letters Before Kerning After Kerning Type examples from Paul Baker Typography (www.pbtweb.com)

  17. Typography Terms (2 of 3) • Word Spacing • Leadingis the vertical space between lines Type examples from Paul Baker Typography (www.pbtweb.com)

  18. Typography Terms (3 of 3) • Ascender - The part of some lower-case letters, such as a "b" or a "d" which rises above the x-height. • Descender - The part of some lower-case letters, such as a "g" or a "q" which drop below the baseline. Definitions from typoGRAPHIC (www.rsub.com/typographic/)

More Related