Skip to Content

Basics of Web Design
HTML5 & CSS3 Third 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 introduces @font-face, which can be used to "embed" fonts within web pages. Current browsers support @font-face but there are logistical (long downloads) and copyright issues. See https://developers.google.com/fonts/docs/getting_started for a overview of using free Google webfonts on your web pages.

Design Ideas for Headings

Check out A Command of Headings: Usage and Styling for a collection of design ideas (with CSS code) for configuring a headings 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 http://google.com/webfonts. 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 Graphics 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 Editors


Free online image editor applications:

Free image editor applications to download:

Free Image Tools


Image Optimization Tools:

Round the corners of rectangular images:

Image Map Generators:

Create an icon from your image:

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.

Chapter Updates

  • Hands-On Practice 5.1, Page 145
    The last sentence in the first paragraph should be
    "Launch a text editor and open the starter.html file."

  • Hands-On Practice 5.2, Page 147, #3
    In the last paragraph of #3 please note that the names of the images should be home.gif, tours.gif, reservations.gif, and contact.gif. 

  • Hands-On Practice 5.3, Page 151, #3
    The third sentence should be, "You may notice that the text within the main element is displayed over the background image."

  • Pacific Trails Resort Case Study
    • Page 169, Task 2, #7
      Also configure #330000 text color for the h3 element selector.
    • Page 170
      Figure 5.25 is incorrect. The correct Figure 5.25 is available here.

Questions or Comments

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

Book Cover

Review Games

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

Graphic Resources

Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.

Instant Buttons and Logo Banners

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.0 Quick Reference. Note the checkpoints that are related to the use of color and images on web pages.

 



Share |