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.
Optimizing a Photo for the Web
Popular Graphics Applications
- Adobe Photoshop
https://www.adobe.com/products/photoshop.html - GIMP
https://www.gimp.org - Sketch
https://www.sketchapp.com - Pixlr (online)
http://www.pixlr.com/editor/
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.
Review Activities
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Graphic Resources
- Flickr Creative Commons licensed content
- iStockphoto
- Shutterstock
- Free Range Stock
- StockVault
- Free Images
- Pixabay
- everystockphoto
- StockVault
- Rgbstock
- Bigstock
- morgueFile
- openphoto
- unprofound.com
- Freerange
- FreeDigitalPhotos
- SuperStock
- Fotosearch
- CanStockPhoto
- FamFamFam—free icons
- IconDrawer
- DefaultIcon