"Text as a user interface"

Evolution of the scale

HTML Headings

Letter Anatomy

Fonts for Multiple Platforms (Jeffrey Zeldman)

body 
{
      font-family: "Lucida Grande", Verdana, 
      Lucida, Arial, Helvetica, sans-serif;
}
							   

1. Lucida Grande is found in Mac OS X.
   
2. Verdana is found in all modern Windows systems, in Mac OS X, and in older ("Classic") Mac operating systems.
   

   If Verdana were listed first, OS X Macs would display Verdana instead of Lucida Grande.

   With the first two fontsLucida Grande and Verdanathe designer has met the needs of nearly all users (Windows and Macintosh users).

3. Lucida follows for UNIX folks, and then Arial for users of old Windows systems.
   
4. Helvetica will be used in old UNIX systems.
   
5. If none of the listed fonts is available, the generic sans-serif assures that whatever sans-serif font is available will be pressed into service.
   
6. In the unlikely event that the user's computer contains no sans-serif fonts, the browser's default font will be used instead.
7. If the browser has no default font, the teeth of a small chimp will be used. Just kidding with that last part.

1. Create one extra css file
   <link rel="stylesheet" media="print" href="print.css" type="text/css" />
2. Keep it simple: black text on the white background, serif font (sans-serif font for onscreen), size up to 12pt;

   body, p, td, th, ul, a 
   {
     background-color: #fff;
     color: #000;
     font-family: "Times New Roman", Garamond, serif;
     font-size: 12pt;
   }
   										   

3. Decide what parts of your layout are not likely to be printed
   
   • Hide all navigation elements that are no longer any use
   • Hide search facilities or other interactive form elements
   • Hide controls that affect on-screen display
   #navigation, #footer, .noprint { display: none; };
4. Hyperlinks: insert the URLs of the links after each one;

   <a href="http://www.google.com"> Google <a/>
   
   Google (http://www.google.com)
   
   #content a:link:after, #content a:visited:after 
   {
     content: " (" attr(href) ") ";
     font-size: 90%;
   }
   										   

1. {About Typography}
2. {Marcellus Wallace}
3. {RSVP Women}
4. {RSVP Men}
5. {Streetlight Manifesto}
6. {Who's on First?}
7. {Royksopp - "Remind Me"}
8. {Jet - "Are you gonna be my girl?"}
9. {Unicorn}
10. Typography Set from Flickr
11. Circa 1979
12. Tanoshism
13. {Ocean's Eleven}
14. {Psycho}
15. {The Office }
16. {The Big Lebowski }
17. Type as Illustration
18. {Firefly}
19. The Office