Web Design, 5 th Edition 5 Typography and Images.

Web Design,5th Edition

5Typography and Images

Chapter 5: Typography and Images 2

Chapter Objectives

Explain webpage typography issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images


Webpage Typography Issues

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



Serif fonts have a short line extending from the top or bottom of a character, called a serif

Sans serif fonts do not have serifsWeb designers often vary serif and sans serif

fonts for heading and body text fonts to create visual contrast



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



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



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


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


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)


Image File Formats


Graphics Interchange Format (GIF)

Original graphics format used on the webDisplay up to 256 colorsInterlaced GIF displays image in a sequence

of passes– Each pass displays the image at a higher

resolutionYou can turn on or off a single color in a

transparent GIF


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 256 colors

JPEG images are a good choice for photographs and other high-quality digital images used on webpages


Portable Network Graphics (PNG) FormatFree 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


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 issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images

Web Design,5th Edition

5Typography and Images

Web Design, 5 th Edition 5 Typography and Images.

Documents

Transcript of Web Design, 5 th Edition 5 Typography and Images.