Typography and Images Web Design, th Edition Chapter Objectives Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images Chapter : Typography and Images 2 The appearance and arrangement of characters applied to text Typeface Type style Type size Font A typeface is a group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thickness Chapter : Typography and Images 3 Chapter : Typography and Images 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 Chapter : Typography and Images Chapter : Typography and Images 6 1
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 : Typography and Images 7 Chapter : Typography and Images 8 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 : Typography and Images 9 Chapter : Typography and Images 10 Image Text Some image-editing software and apps contain features that allow you to create images from text or add text to an image 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 : Typography and Images 11 Chapter : Typography and Images 12 2
Digital Cameras Digital cameras record images electronically Many smartphones have built-in digital cameras that can take quality photos 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 : Typography and Images 13 Chapter : Typography and Images 14 Screen Capture and Illustration Software and Apps 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 : Typography and Images 1 Chapter : Typography and Images 16 Image File Formats Graphics Interchange Format (GIF) Original graphics format used on the web Display up to 26 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 : Typography and Images 17 Chapter : Typography and Images 18 3
Graphics Interchange Format (GIF) 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 26 colors JPEG images are a good choice for photographs and other high-quality digital images used on webpages Chapter : Typography and Images 19 Chapter : Typography and Images 20 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 Web-Ready Images Crop images to remove unwanted subject matter Chapter : Typography and Images 21 Chapter : Typography and Images 22 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 Summary Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images Chapter : Typography and Images 23 Chapter : Typography and Images 24 4
Typography and Images Web Design, th Edition