Typography and Graphics

1
Chapter 5

• Typography and Graphics
• On the Web

2
Chapter Objectives

• Differentiate among the features that define type
• Explain and apply the basic principles of good
  typography on the Web
• Understand the Web variables that limit
  typographic control
• Employ strategies to overcome Web variables that
  limit typographical control

3
Chapter Objectives

• Identify the Web-useable graphics file formats
  and explain the circumstances under which we each
  should be utilized
• Identify sources of Web graphics
• Understand methods of obtaining and/or creating
  Web graphics
• Explain and apply the procedures to prepare
  graphics for the Web

4
Chapter Objectives

• Understand and apply strategies for optimizing
  the size of Web graphics files
• Explain and apply strategies for optimizing the
  appearance of Web graphics
• Understand various types of graphics file
  compression
• Utilize typography and graphics tips and
  techniques

5
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

6
Typography
7
Typography

• Communicates both the literal and implied meaning
  of words

8
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

9
Typography
10
Typography

• Body type should be 10 to 14 points
• Avoid excessive use of caps
• Create contrast between page and background
• Use only two or three fonts per page
• Before publishing your Web pages, view how they
  display on different platforms and different
  resolution settings

11
Typography Tips

• Override default font settings
• ltFONT FACEArial, Helvetica, Verdana,
  GenevagtTypographylt/FONTgt

12
Typography Tips

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

13
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

14
(No Transcript)
15
Selecting Styles and Type

• Apply styles to elements sharing the same HTML
  tag
• Embed fonts in a page
• Specify paragraph leading
• Control tracking and kerning
• Dynamic Fonts
• OpenType

16
Graphics

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

17
Sources for Graphics

• Scanners
• Flatbed scanner
• Sheet-fed scanner
• Drum scanner

18
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
• Save images in Tagged Image File Format (TIFF)

19
Sources for Graphics

• Digital camera
• Takes a digital image and stores it electronically

20
Sources for Graphics

• Clip art
• Collection of art frequently organized by theme
  or subject matter
• Drawings can be generated by hand
• Adobe Illustrator
• Macromedia Freehand
• Vector graphics
• Raster graphics / bitmaps

21
Preparing and Optimizing Graphics

• Limit file size of pages to 35 kilobytes each
• Web pages only display three formats
• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)
• Image editing software can convert file formats

22
Preparing and Optimizing Graphics

• Crop images to remove unwanted subject matter

23
Graphics Interchange Format (GIF)

• Original graphics format used on the Web
• Display up to 256 colors
• GIF 87A
• Interlaced GIF displays image in a series of four
  passes
• Each pass displays the image at a higher
  resolution

24
Graphics Interchange Format (GIF)

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

25
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

26
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

27
Joint Photographic Experts Group (JPEG)
28
Joint Photographic Experts Group (JPEG)

• JPEG compression is lossy
• Greater compression equals lower image quality
• Wide level of browser support

29
Portable Network Graphics (PNG) Format

• Created as a result of legal issues surrounding
  GIFs
• Expected to eventually replace GIFs
• Superior transparency capabilities
• Better interlacing capabilities
• Greater range of color depths
• Capability of embedding text in images
• Lossless compression
• Support is only available by means of browser
  plug-ins

30
Graphics Tips and Techniques

• ALT Attribute
• Description of images for viewers with graphics
  turned off
• Especially important for image maps
• ltIMG SRCinflation.gif ALTInflation Figuresgt

31
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

32
(No Transcript)
33
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

34
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

35
Graphics Tips and Techniques

• Sidebar
• Tiles or repeats down the length of the page
• Used mostly for navigation bars
• Consistent location
• Content in sidebar distinctly separate from main
  content

36
(No Transcript)
37
Graphics Tips and Techniques

• Image Map
• Attractive alternative to hyperlinked text
• Hot spots link to a specific URL when clicked
• Most Web Authoring software includes mapping
  capabilities

38
Chapter Summary

• Differentiate among the features that define type
• Explain and apply the basic principles of good
  typography on the Web
• Understand the Web variables that limit
  typographic control
• Employ strategies to overcome Web variables that
  limit typographical control

39
Chapter Summary

• Identify the Web-useable graphics file formats
  and explain the circumstances under which we each
  should be utilized
• Identify sources of Web graphics
• Understand methods of obtaining and/or creating
  Web graphics
• Explain and apply the procedures to prepare
  graphics for the Web

40
Chapter Summary

• Understand and apply strategies for optimizing
  the size of Web graphics files
• Explain and apply strategies for optimizing the
  appearance of Web graphics
• Understand various types of graphics file
  compression
• Utilize typography and graphics tips and
  techniques

41
Chapter 5 Complete