1/11/2016
Typography Chapter Objectives and Images Explain webpage typography issues 5 Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images Web Design, 5th Edition
Chapter 5: Typography and Images 2
Webpage Typography Issues Webpage Typography Issues
The appearance and arrangement of characters A typeface is a group of alphabetic characters, applied to text numbers, and symbols with the same design, – Typeface such as the slant and thickness – Type style – Type size – Font
Chapter 5: Typography and Images 3 Chapter 5: Typography and Images 4
Webpage Typography Issues 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 Images 5 Chapter 5: Typography and Images 6
1 1/11/2016
Webpage Typography Issues 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 Images 7 Chapter 5: Typography and Images 8
Webpage Typography Issues 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 Images 9 Chapter 5: Typography and Images 10
Webpage Typography Issues Webpage Images
Image Text Images can: – Some image-editing software and apps contain – Add value to your website features that allow you to create images from text – Match or complement your website’s color scheme or add text to an image – 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 Images 11 Chapter 5: Typography and Images 12
2 1/11/2016
Screen Capture and Illustration Digital Cameras Software and Apps Digital cameras record images electronically Screen capture software creates an image of – Many smartphones have built-in digital cameras computer screen contents that can take quality photos – 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 Images 13 Chapter 5: Typography and Images 14
Screen Capture and Illustration Image File Formats Software and Apps 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 Images 15 Chapter 5: Typography and Images 16
Graphics Interchange Format Image File Formats (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 Images 17 Chapter 5: Typography and Images 18
3 1/11/2016
Graphics Interchange Format JPEG File Interchange Format (GIF) (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 Images 19 Chapter 5: Typography and Images 20
Portable Network Graphics Web-Ready Images (PNG) Format Free open source image format to replace the Crop images to remove unwanted subject GIF format matter – Greater range of colors than the GIF format – Superior transparency capabilities
Chapter 5: Typography and Images 21 Chapter 5: Typography and Images 22
Web-Ready Images Chapter Summary
Optimizing Images for Size and Quality Explain webpage typography issues – Lossy vs. Lossless compression Discuss effective use of webpage images Compression artifacting is when higher Describe image file formats compression values lead to a greater loss of Discuss how to prepare web-ready images image data
Chapter 5: Typography and Images 23 Chapter 5: Typography and Images 24
4 1/11/2016
Typography 5 and Images
Web Design, 5th Edition
5