Ch 5. Typography and Graphics

1
Ch 5. Typography and Graphics

• ISC325

2
Chapter 5 Objectives

• The basic principles of good typography on the
  Web
• The Web variables that limit typographic control
• Strategies for Web Typography
• The Web-useable graphics file formats
• The procedures to prepare graphics for the Web
• Various types of graphics file compression
• Typography and graphics tips and techniques

3
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

4
Typography
Typeface Arial
Type style roman, italic
Type size 12 point
5
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

6
Typography
7
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

8
Typography Tips

• Override default font settings
• GenevaTypography

9
Typography Tips

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

10
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

11
Typography Tips
12
Selecting Styles and Type

• Apply styles to elements sharing the same HTML
  tag
• Define type size in points
• Specify paragraph leading
• Control tracking and kerning

13
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

14
Sources for Graphics

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

15
Sources for Graphics

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

16
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, photos at
  higher color settings.
• Save images in Tagged Image File Format (TIFF)

17
Sources for Graphics

• Illustration software
• Adobe Illustrator
• Macromedia Freehand
• Vector graphics
• Raster graphics or bitmaps

18
Graphics File Formats
19
Graphics Interchange Format (GIF)

• Original graphics format used on the Web
• Display up to 256 colors
• Three types of GIFs GIF87A, GIF89A, Animated GIF
• GIF 87A
• Interlaced GIF displays image in a sequence of
  passes
• Each pass displays the image at a higher
  resolution

20
Graphics Interchange Format (GIF)
21
Interlaced and Noninterlaced GIFs

• Interlacing refers to the way the GIF is saved by
  the graphics software.
• Normally, with a noninterlaced GIF the image is
  saved one line at a time, starting from the top
  of the graphic and moving downward.
• With interlaced GIFs, the image is saved and
  retrieved stepwise.
• for example, every fifth line of the image might
  appear first, followed by every sixth line, and
  so forth through the remaining rows
• Interlacing is an effective format if you have a
  large graphic and want to give users a preview of
  the final image as it loads.

22
Noninterlaced Graphic
This figure shows how a noninterlaced GIF appears
as it is slowly retrieved by the Web
browser. If the graphic is large, it might take
several minutes for the entire image to appear,
which can frustrate the visitors to your Web page.
23
Interlaced Graphic
This figure shows the effect of interlacing,
which is when the graphic starts out as a blurry
representation of the final image, then gradually
comes into focus-unlike the noninterlaced
graphic, which is always a sharp image as its
being retrieved, although an incomplete one.
24
Transparent GIF

• Pick colors from the color lookup table of the
  GIF to be transparent by using image-editing
  software like Photoshop

http//www.webstyleguide.com/graphics/gifs.html
25
Graphics Interchange Format (GIF)

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

26
Animated GIF

• Combine multiple GIF images into a single file to
  create animation
• Animated GIFs are an effective way to compose
  slide shows or to simulate motion.
• Animated GIF files are typically larger than
  static GIF images.
• The use of animated GIFs can greatly increase the
  size of a Web page.
• Be careful not to overwhelm the user with
  animated images.

27
Animated GIF

• http//www.wigglebits.com/animation.html

28
Animated GIF Programs
This figure shows a list of programs available on
the Web that you can use to create your own
animated GIFs.
29
Animated GIF Collections
If you dont want to take the time to create your
own animated GIFs, many animated GIF collections
are available on the Web. This figure shows a
list of a few of them.
30
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

31
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
• Control the size of a JPEG with the degree of
  image compression
• But, for a image covering large sections with a
  single color, the GIF format will be better.
• A progressive JPEG displays on the screen in a
  sequence of passes

32
Joint Photographic Experts Group (JPEG)
33
Joint Photographic Experts Group (JPEG)

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

34
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

35
Preparing and Optimizing Graphics

• Crop images to remove unwanted subject matter

36
Preparing and Optimizing Graphics

• Adjust colors and image size

37
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

38
Graphics Tips and Techniques
39
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
• Code Example
• lowsrcgifimage.gif" height238 width350

40
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

41
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

42
Graphics Tips and Techniques
43
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

44
Graphics Tips and Techniques

• ALT Attribute
• Description of images for viewers with graphics
  turned off
• Especially important for image maps
• for 2000-2005

45
Summary of File Formats

• Uses for GIF and JPEG files
• Gif files
• The most widely supported graphics format on the
  Web
• Supports transparency and interlacing
• JPEG
• Huge compression rations faster download speeds
• Excellent for most photographs and complex images
• Supports full-color (24-bit, true color) images

46
Guidelines for the use of graphics

• Use small images that load quickly
• Provide a text-only option
• When using color graphics, minimize the number of
  colors that are used in a single image
• Include ALT tags for images. Display alternate
  text for each image using HTMLs ALT feature
• If images or icons are used as links, provide a
  redundant text link