Lesson 13 – Color and Typography

2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer screen. Apply different color schemes to your Web site. Use typography effectively.

3 Color Theory Color can be used to communicate a message and to draw in the audience. Colors can be used to convey a broad range of emotions. Within each color, there is a range of tints and shades that can further evoke specific emotion.

4 The Color Wheel The color wheel is an ordered progression of hues (or colors) that helps a designer easily understand and select color combinations.

5 Primary Colors – RGB - Screen White light is the combination of red, green, and blue light. The primary hues of the additive color wheel are red, green, and blue (RGB).

6 The Color Wheel - CYM The three secondary hues are cyan, magenta, and yellow. Tint is a hue that has been lightened. (add white) Shade is a hue that has been darkened. (add black) Hues that contain red are considered warm colors. Hues that contain blue are considered cool colors.

7 The Color Wheel There are four basic combinations that can be used to find all sorts of pleasing color schemes: – Complementary colors – Split complementary colors – Triad colors – Analogous colors

8 Complementary Colors Opposite from each other on the color wheel

9 Split-complementary colors Form an uneven triangle on the color wheel

10 Triad Colors Three colors on the color wheel that have an equal amount of distance between each one.

11 Analogous colors Three colors on the color wheel that are side by side These do not provide as much contrast

12 Web Safe Colors Web safe colors appear the same on all monitors. There are 216 colors on a Web safe color palette.

13 Typography The goal is to communicate a message in a legible and orderly way. Type can be created with HTML code or as a graphic. Be consistent when using type across a Web site. It is easier to read sans serif fonts than serif fonts on a computer screen.

14 Typography Have enough contrast between the type color and the background color. Choose a font face that is appropriate for your web site. The computer that is downloading your site must have the same font loaded in order to display the font that you intended. Contrast

15 Summary Color is a powerful tool for designers and can be used to convey a broad range of emotions. There are two types of color models: additive and subtractive. A computer monitor uses the additive color model while printed material uses the subtractive color model. The color wheel is an ordered progression of colors that help a designer easily understand and select color combinations.

16 Summary (continued) The primary hues of the additive color wheel are red, green, and blue (RGB). The three secondary hues are cyan, magenta, and yellow. There are six tertiary hues. When referring to the value of a hue, you are referring to its lightness or darkness. Adding white to a hue lightens it and is called tint. Adding black darkens a hue and is called shade. Hues that contain red are considered warm colors. Cool colors contain the color blue.

17 Summary (continued) Complementary colors are colors that are opposite from each other on the color wheel. Split-complementary colors are three colors that form a triangle on the color wheel. The colors make a pleasing color scheme. Triad colors are three colors on the color wheel that have an equal amount of distance between each one. Analogous colors are three colors on the color wheel that are side by side.

18 Summary (continued) The image on your screen is made up of pixels. Each pixel is represented by one or more bits of data. To optimize a Web site for 8-bit color, there is a palette of 216 Web safe colors. Typography is the act or art of expressing an idea by utilizing types or symbols. It is easier to read sans serif fonts than serif fonts on a computer screen.

19 Summary (continued) It is important to keep font use consistent throughout a site and to use font sizes that are large enough to allow for easy readability. If you use unusual fonts, your users may not have that font loaded and may not see the same result on their screens as you intended. For this reason, when using an unusual font for a heading or other special purpose, you may want to place the text in a graphic. The default font is Times New Roman for browsers