Typography

1
Typography

• The appearance and arrangement of characters that
  make up your text
• Typeface
• Type style
• Type size
• Font
• Display type is for headings and subheads
• Body type is for main content
• Smaller than display type

2
Typography
3
Typography

• Use a sans serif typeface for short paragraphs,
  headings, lists, and type on buttons
• Use serif type for large blocks of text and pages
  that are intended to be printed and then read
• Serifs are short lines or ornaments on each
  character

4
Typography
5
Typography

• Body type should be 10 to 14 points
• Avoid excessive use of caps
• Create contrast between page and background
• Use no more than three fonts per page
• Do not create large text blocks
• Limit line length to 8 to 10 words

6
Typography Tips

• Override default font settings
• GenevaTypography

7
Typography Tips

• Graphic Typography
• Converts text into a graphic so it displays
  properly

8
Typography Tips

• Antialiasing Type
• Technique used to smooth the appearance of
  graphics or type
• Eliminates jagged edges
• Web graphics programs generate antialiased type
• Only apply to type larger than 10 points

9
Typography Tips
10
Graphics

• Choose quality, relevant photographs to add value
• Photographs and illustrations should match or
  complement the sites color scheme
• Photographs and illustrations for image mapping
  should accurately represent the content they link
  to

11
Accessibility

• Web content Accessibility Guidelines 1.0
• www.w3.org/TR/WCAG10
• Techniques for Web content Accessibility
• www.w3.org/TR/WCAG10-TECHS
• EditPreferencesAccessibility Check all

12
Ways you can make your pages more Accessible

• Always add alt text to images
• Also include a longdesc to image tag
• Use tag on tables
• If a table had header cells use vs
• May want to include summary to a table tag
  providing detailed description of the elements in
  the table.
• Form objects should be labeled to the left

13
Accessibility Testing

• Dreamweaver choose FileCheck Page Check
  Assessibility
• Provides a list of items that could be modified
  on your page to make them more accessible

14
Sources for Graphics

• Digital camera
• Scanners
• Online

15
Sources for Graphics

• Guidelines for scanning
• Scan at the size at which they will be displayed
• Scan images at 72 dots per inch (dpi)
• Scan illustrations at 256 colors

16
Graphics File Formats

• Web pages mostly display three formats
• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)

17
Graphics Interchange Format (GIF)

• GIF 89A
• Features capabilities to be interlaced,
  transparent, and animated
• Halo effect

18
Graphics Interchange Format (GIF)

• Compressing the file sizes ensures quicker
  transfers
• GIF compression is lossless
• Limit physical size of image
• Create image with solid colors
• Minimize bit depth
• Utilize Adobe ImageReady to optimize the image

19
Joint Photographic Experts Group (JPEG)

• Best suited for photographs on the Web
• Not suggested for solid color images
• Can be displayed with millions of colors
• A progressive JPEG displays on the screen in a
  sequence of passes

20
Joint Photographic Experts Group (JPEG)
21
Portable Network Graphics (PNG) Format

• Expected to eventually replace GIFs
• Superior transparency capabilities
• Better-quality interlacing capabilities
• Greater range of color depths
• Capability of embedding text in images
• Lossless compression

22
Preparing and Optimizing Graphics

• Adjust colors and image size

23
Graphics Tips and Techniques

• Thumbnails
• Version of an image that has been greatly reduced
  in size
• Allows quick preview of an image
• Thumbnail is normally a link to the full-size
  image

24
Graphics Tips and Techniques

• The LOWSRC Attribute
• Gives a quick preview of the original image
• Browser loads a lower-quality image, followed by
  a high-quality image over it
• The lower-quality image loads only when the page
  is first opened

25
Graphics Tips and Techniques
26
Graphics Tips and Techniques

• Drop Shadow
• Creates a 3-D effect for both text and images
• Be consistent with all shadows throughout your
  Web site