Skip to Content

Basics of Web Design
HTML5 & CSS   Sixth 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 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.

Optimizing a Photo for the Web

Popular Graphics Applications

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:

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

  • No updates have been reported for this chapter.

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 6th 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