Input Controls for Web
  • Check Boxes indicate whether an item is selected;
    Check Boxes
  • Radio Buttons are used to select one, and only one, choice from an exclusive list of options;
    Radio Buttons
  • List Boxes are used to display lists of items in a fixed amount of space;
    List Boxes
  • Text boxes are used to capture strings of text, numbers, or both.;
    Text boxes
  • Buttons perform an action or a command.;
  • Radio Buttons are used to select one, and only one, choice from an exclusive list of options;
Form Layouts
  • Vertical Labels
    Vertical Labels
  • Left-Justified Horizontal Labels
    Left-Justified Horizontal Labels
  • Right-Justified Horizontal Labels
    Right-Justified Horizontal Labels
  • Separating Related Content
    Separating Related Content
  • Difference through background
    Difference through background
  • "Text as a user interface"

  • Evolution of the scale

    Evolution of the scale
  • HTML Headings

    HTML Headings
  • Letter Anatomy

    Letter Anatomy
  • Fonts for Multiple Platforms (Jeffrey Zeldman)

          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.
      Sans-serif font Serif font Serif font (red serifs)
    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.
  • Compare fonts for the screen Typetester
  • Find a specific font, Font Shop
  • Printing
    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=""> Google <a/>
      Google ( #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
  • Typography in action:
    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