Web Design, 5 th Edition 5 Typography and Images

Chapter Objectives  Explain webpage typography issues  Discuss effective use of webpage images  Describe image file formats  Discuss how to prepare web-ready images Chapter 5: Typography and Images2

Webpage Typography Issues  The appearance and arrangement of characters applied to text –Typeface –Type style –Type size –Font Chapter 5: Typography and Images3

Webpage Typography Issues  A typeface is a group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thickness Chapter 5: Typography and Images4

Webpage Typography Issues Chapter 5: Typography and Images5

Webpage Typography Issues  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 Chapter 5: Typography and Images6

Webpage Typography Issues Chapter 5: Typography and Images7

Webpage Typography Issues  A font family, or font stack, includes a default font and backup font types if a browser cannot locate the default font  Embedded fonts are included in the code for the webpage and must be downloaded to the user’s device before the webpage text can appear Chapter 5: Typography and Images8

Webpage Typography Issues  Font size can be expressed as an absolute size or a relative size  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  Not all fonts are available on all computer operating systems  Font selection can contribute to a specific mood Chapter 5: Typography and Images9

Webpage Typography Issues Chapter 5: Typography and Images10

Webpage Typography Issues  Image Text –Some image-editing software and apps contain features that allow you to create images from text or add text to an image Chapter 5: Typography and Images11

Webpage Images  Images can: –Add value to your website –Match or complement your website’s color scheme –Accurately represent the content to which they link, if used for image mapping –Support the website’s message –Contribute to the overall mood you want to set Chapter 5: Typography and Images12

Digital Cameras  Digital cameras record images electronically –Many smartphones have built-in digital cameras that can take quality photos Chapter 5: Typography and Images13

Screen Capture and Illustration Software and Apps  Screen capture software creates an image of computer screen contents –Screen shots  Web designers and graphic artists use illustration software and apps to create images by drawing shapes, lines, and curves Chapter 5: Typography and Images14

Screen Capture and Illustration Software and Apps Chapter 5: Typography and Images15

Image File Formats  Image files are grouped into two categories: –Raster –Vector  Webpages mostly display three formats –Graphics Interchange Format (GIF) –JPEG File Interchange Format (JFIF) –Portable Network Graphics (PNG) Chapter 5: Typography and Images16

Image File Formats Chapter 5: Typography and Images17

Graphics Interchange Format (GIF)  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 Chapter 5: Typography and Images18

Graphics Interchange Format (GIF) Chapter 5: Typography and Images19

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 Chapter 5: Typography and Images20

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 Chapter 5: Typography and Images21

Web-Ready Images  Crop images to remove unwanted subject matter Chapter 5: Typography and Images22

Web-Ready Images  Optimizing Images for Size and Quality –Lossy vs. Lossless compression  Compression artifacting is when higher compression values lead to a greater loss of image data Chapter 5: Typography and Images23

Chapter Summary  Explain webpage typography issues  Discuss effective use of webpage images  Describe image file formats  Discuss how to prepare web-ready images Chapter 5: Typography and Images24

Web Design, 5 th Edition 5 Typography and Images