Lesson 13 – Color and Typography

2

Objectives

Discuss 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

Vocabulary

Analogous colors Bit Color wheel Complementary colors Cool colors Primary hues Secondary hues Shade

Split-Complementary colors Tertiary hues Tint Triad colors Typography Value Warm colors Web safe colors

4

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.

5

The Color Wheel

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

6

Primary Colors

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).

7

The Color Wheel

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.

8

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

9

Complementary Colors

Opposite from each other on the color wheel

                                                      

                                                                         

10

Split-complementary colors

Form an uneven triangle on the color wheel

                                                      

                                    

11

Triad Colors

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

                                                      

                                                                         

12

Analogous colors

Three colors on the color wheel that are side by side

These do not provide as much contrast                                                       

                                                                         

13

http://www.colormatters.com/colortheory.html Color Generator: http://www.allprofitallfree.co

m/color-wheel2.html

http://colorschemedesigner.com/

14

Bit Depth

A bit is the smallest unit of information that a computer understands.

Thousands of pixels make up what appears on the monitor.

A pixel receives bits of information that tell it what color it should be the screen it should be located.

15

Types of Monitors

4-bit monitor – each pixel receives 4 bits of data 4-bit monitors can display 16 colors 8-bit monitor – each pixel receives 8 bits of data 8-bit monitors can display 256 colors 16-bit monitor – each pixel receives 16 bits of data 16-bit monitors can display 65,536 colors 24-bit monitors – each bit receives 24 bits of data 24-bit monitors can display 16.7 million colors

16

Web Safe Colors

Web safe colors appear the same on all monitors.

There are 216 colors on a Web safe color palette.

17

Typography

The goal is to communicatea 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.

18

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

19

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.

20

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 refer-ring 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.

21

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.

22

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.

23

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.