Skip to Content

Basics of Web Design
HTML5 & CSS   Fifth Edition

Chapter 5 – Graphics & Text Styling Basics

A key component of a compelling website is the use of interesting and appropriate graphics.This chapter introduces configuring text with CSS as you work with visual elements on web pages. When you include images on your website, it is important to remember that not all web users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Some of your visitors may be using a mobile device that may not display your images. As a web designer, strive to create pages that are enhanced by graphical elements but that are usable without them.Resource websites and chapter links are listed below.

Choosing Fonts for your Web Site

Not every computer is guaranteed to have the same font typefaces installed. If a web designer configures a font that is not present on the visitor's computer, the browser default (usually a serif font such as Times New Roman) will be displayed.

So ... the question is: What fonts are safe to use?
Explore comparable Windows and Mac fonts at the Web-Safe Font Chart. Visit TinyType for a list of fonts commonly installed on mobile devices.

CSS3 introduced @font-face, which can be used to "embed" fonts within web pages. Current browsers support @font-face. See https://developers.google.com/fonts/docs/getting_started for a overview of using free Google webfonts on your web pages.

Text Layout Techniques

Check out the Text/Typographical Layout article at WebAim for tips on configuring text on web pages.

CSS3 @font-face

CSS3 introduces @font-face, which can be used to "embed" fonts within web pages, although you actually provide the location of the font and the browser downloads it. For example, if you own the rights to freely distribute the font named MyAwesomeFont and it is stored in a file named myawesomefont.otf in the same folder as your web page, the CSS to make it available to your web page visitors is

@font-face { font-family: 'MyAwesomeFont';
                    src: url('myawesomefont.otf'); }

Current browsers support @font-face, but there are file size and copyright issues to consider. It takes time to download a font and this may delay the display of your web page. You also need to check your font license to determine whether you also have the right to freely distribute the font. See http://nimbupani.com/font-in-your-face.html for more information about @font-face. A chart of websites that provide font hosting services is available at http://sprungmarker.de/wp-content/uploads/webfont-services.

Visit http://www.fontsquirrel.com to browse a selection of commercial-use free fonts available for download and use.

Google offers a free web font library at https://fonts.google.com/. Keep in mind that if you just need a nonstandard font for a logo area or for an image on a web page, there's an easy solution. You are free to use any font that's available to you when you create an image with a graphics application.

Optimizing a Photo for the Web

Free Graphic Application Tutorials

Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:

Free Image Editor Applications

WebP —A New Image Format

Google Labs has developed a new image format for the Web called WebP (pronouced "weppy") that improves compression on photographic images. Currently it's supported by Google's Chrome browser.

Accessibility & Images

Providing access to the Web for all people is an important issue. Visit the W3C’s Web Accessibility Initiative and explore the WCAG 2.1 Quick Reference. Note the checkpoints that are related to the use of color and images on web pages.

Chapter Updates

  • Page 155 Hands-On Practice 5.5
    The CSS code sample should be:
    body { font-size: 150%;
	   font-family: Arial; 
	   color:  #992435; 
       background-image: url(coffeepour.gif); background-repeat: no-repeat;
       background: url(coffee.gif) no-repeat left bottom,
	               url(coffeeback.gif) no-repeat, 		    
	               url(coffeepour.gif) no-repeat;
}

Questions or Comments

The author would like to hear from you!
Feel free to contact the author with your questions or comments.

Basics of Web Design 5th Edition

Review Activities

Review Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

Graphic Resources

Instant Buttons & Banners

Free Image Tools

Image Optimization Tools

Round the Corners of Rectangular Images

Image Map Generators

Create an Icon from Your Image