1 / 26

Proportional vs. Monospace

Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication. Proportional vs. Monospace. Serif vs. sans serif. Serif font (Times New Roman) Sans Serif font (Helvetica) For body text Serif best for print Sans serif best for web.

benedict-davis
Download Presentation

Proportional vs. Monospace

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 is the strategic use of type to create texture, hierarchy, organization, and clear communication

  2. Proportional vs. Monospace

  3. Serif vs. sans serif • Serif font (Times New Roman) • Sans Serif font (Helvetica) • For body text • Serif best for print • Sans serif best for web

  4. Standard serif and sans serif fonts: • PC: Times New Roman/Arial • Mac: Times/Helvetica

  5. Display Fonts • Association- have to do with our past experience • Visual communication—appearance of the font

  6. Association

  7. Visual Communication

  8. Legibility • Legibility--function of typeface design • Informal measure of how easy it is to distinguish one letter from another in a particular typeface

  9. Readability • Dependent upon how the typeface is used • Contrast • Line spacing (leading) • Line length

  10. Print vs. web • Print is a higher resolution medium (>150 dpi) • Typical screen resolution is 72-96 dpi • Read slower on computer screen

  11. Fonts for the web • In print you specify • On the web you suggest an ordered list of fonts

  12. Optimized for screen • Verdana: Sans serif, optimized for reading on screen • Georgia: Serif typeface used frequently on the web

  13. Alignment • Justified text • Centered text • Right justified text • Left justified text (ragged right)

  14. Justified Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  15. Centered Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  16. Aligned Right Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  17. Ragged right Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  18. Line length • Avoid very long lines of text • The eye’s span of acute focus is only about three inches wide • Designers keep text in columns or blocks not much larger than that comfortable eye span • Two columns are easier to read than one wide column—not on web, though

  19. Optimal line lengths • Too short means too much tracking back and forth • Too long means too hard to find the next line • Rules of thumb vary. Some say 40-60 characters, some will go as high as 80. • Web: 65 characters per line

  20. Text as graphics • Create graphic using Photoshop and specifying font—logos, buttons. • Avoid for body text-load time, search engine issues, maintenance.

  21. Typography on the web • Font tags • CSS Styles • Very limited typefaces are available • Very little control

  22. Font size on the web • Pixels • Ems • Avoid points • Older browsers - User resize fonts when specified in ems, not pixels.

  23. Readability on the web • Reading speed is about 25% slower on screen vs. print. (resolution). • Contrast issues: Black text on white background most readable.

  24. Leading (line spacing) • Default is 1.15x or so • Increase to 1.25 for longer lines or for effect • CSS line-height property (in pixels or ems).

  25. Emphasizing text • Bold • Italic • Underlined • Color • ALL CAPS

  26. Future • @font-face property (Web fonts) • Example #1 – Skylark Lounge • Example #2 – Hi*Beams • Google Web Fonts • Example #2 – Midwinter Bluegrass • Purchasing license • Browser support

More Related