Intro to Web Design 6e Chapter 5

1. 1
Web Design 6E
Chapter 5: Typography and Images
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or
service or otherwise on a password-protected website for classroom use.

2. 2
Chapter Objectives
•Explain webpage typography issues
•Discuss effective use of webpage images
•Describe image file formats
•Discuss how to prepare web-ready images
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

3. 3
Webpage Typography Issues
•Typography is the study of the appearance and
arrangement of characters
• Type
• Differentiate between headings and content text
-Headings: branding, color, design, size
-Content: readability
• Leading, tracking, kerning
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

4. 4
Font Sizes and Styles (1 of 3)
•A typeface is a group of alphabetic characters, numbers,
and symbols with the same design, such as the slant and
thickness
•Type style refers to the variations in form
• Roman (regular)
• Italic
• Bold
•Type size
• 72 points = 1 inch
• 16 pixels = 12-point font
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

5. 5
Font Sizes and Styles (2 of 3)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

6. 6
Font Sizes and Styles (3 of 3)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

7. 7
Font Selection and Web Design (1 of 4)
•Font is the digital file that specifies the combination of
character data used to display the typeface
•When a browser loads webpage, it looks to the CSS to
determine font
• Specify backup fonts or embed fonts
•WAI guidelines:
• Use CSS to specify fonts
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

8. 8
Font Selection and Web Design (2 of 4)
•Serif fonts have a short line extending from the top or
bottom of a character, called a serif
•Sans serif fonts do not have serifs
•Web designers often vary serif and sans serif fonts for
heading and body text fonts to create visual contrast
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

9. 9
Font Selection and Web Design (3 of 4)
•These choices are better for headings
• Cursive fonts replicate handwriting
• Fantasy fonts are decorative
• Monospace fonts have equal spacing
-Typewriter
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

10. 10
Font Selection and Web Design (4 of 4)
•Use contrasting fonts to add visual interest
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

11. 11
Font Families and Font Stacks (1 of 2)
•A font family, or font stack, includes a default font and
backup font types
•Embedded fonts are included in the webpage code must
be downloaded before the webpage text can appear
•Type standards:
• TrueType
• PostScript
• OpenType
• WOFF
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

12. 12
Font Families and Font Stacks (2 of 2)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

13. 13
Relative and Absolute Font Sizes
•Absolute font sizes do not change when visitors change
their browser font size settings
•Relative font sizes adjust to the user’s screen and
resolution
• Relative to number of pixels
• As a percentage of em unit
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

14. 14
Mood
•Font selection can suggest a specific mood
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

15. 15
Image Text (1 of 2)
•Image-editing software and apps contain features that
allow you to create images from text or add text to an
image
•Add text to an image using a bounding box
•Proprietary font is designed for a brand
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

16. 16
Image Text (2 of 2)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

17. 17
Webpage Images (1 of 2)
•Images can:
• Personalize and familiarize the unknown
• Deliver a message
• Prompt action
• Hero image or background image
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

18. 18
Webpage Images (2 of 2)
•Use images that
• Are relevant and add value
• Comply with color scheme
• Support your message
• Contribute to mood
•Also consider
• Accessibility
• Usability
• Copyrights
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

19. 19
Digital Cameras (1 of 2)
•Digital cameras record images electronically
• Many smartphones have built-in digital cameras that can take
quality photos
• Professional photographers purchase cameras with:
-Lenses
-Settings
-High-quality images
• Photo sharing websites allow you to store, share, print, and edit
• Memory card, internal storage, transfer to computer
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

20. 20
Digital Cameras (2 of 2)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

21. 21
Screen Capture and Illustration Software (1 of 3)
•Screen capture software creates
an image of computer screen
contents
• Screen shots
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

22. 22
Screen Capture and Illustration Software (2 of 3)
•Web designers and
graphic artists use
illustration software and
apps to create images by
drawing shapes, lines, and
curves
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

23. 23
Screen Capture and Illustration Software (3 of 3)
•You also can purchase or download illustrations or
photography online
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

24. 24
Image File Formats (1 of 4)
•Image size and download time can cause issues with
page loading
•HTML5 <picture>…</picture> tags instruct the website to
display different images or no image based on screen
size
•RWD considerations
•Alternative text
•GIF, JPEG, or PNG are popular web formats
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

25. 25
Image File Formats (2 of 4)
•Raster or bitmap images are a series of pixels
-PPI
-Resolution dependent
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

26. 26
Image File Formats (3 of 4)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

27. 27
Image File Formats (4 of 4)
•Vector images are a group of drawing objects
-Lines, shapes curves
-Resolution independent
-Rasterize
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

28. 28
Graphics Interchange Format (GIF) (1 of 2)
•Original graphics format used on the web
•Display up to 256 colors
•Interlaced GIF displays image in a sequence of passes
• Each pass displays the image at a higher resolution
•You can turn on or off a single color in a transparent GIF
•Antialiasing smooths jagged edges
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

29. 29
Graphics Interchange Format (GIF) (2 of 2)
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

30. 30
JPEG File Interchange Format (JFIF)
•Commonly referred to as the JPEG image format
•Best suited for digital photographs on the web that are
more than 256 colors
•JPEG images are a good choice for photographs and
other high-quality digital images used on webpages
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

31. 31
Portable Network Graphics (PNG) Format
•Free open source image format to replace the GIF format
• Greater range of colors than the GIF format
• Superior transparency capabilities
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

32. 32
Web-Ready Images
•Use image-editing software to refine and enhance
•Web-ready images
• Select format
• Optimize
• Provide multiple size options
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

33. 33
Refining Images
•Crop images to remove unwanted subject matter
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

34. 34
Optimizing Images for Size and Quality
•Lossy vs. Lossless compression
• Lossless compression retains image data
• Lossy compression loses image data during compression
•Compression artifacting occurs when higher
compression values lead to a greater loss of image data
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.

35. 35
Chapter Summary
•Explain webpage typography issues
•Discuss effective use of webpage images
•Describe image file formats
•Discuss how to prepare web-ready images
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or
otherwise on a password-protected website for classroom use.