A Quick Look at Graphic Design & Color: A few pointers for your websites Dr. Jennifer Bowie Electronic Writing & Publishing

Typography and Type Elements: There are four basic font classifications: Serif: the oldest type, has serifs on the end of letter to guide readers eye, also has thick and thin strokes, considered more “readable” than sans serif. Gives a more formal and traditional feel to documents. Often better for print than the web. Good body text or contrast text. Includes: Times, Garamond, Georgia, Goudy, Book Antiqua, and many more. Sans Serif: “without serif,” only about 100 years old, has stokes that have little to no variation in width, looks more modern and technical, used as a body text in Europe. Makes a good body text or contrast text. Good web legibility. Includes: Arial, Helvetica, Verdana, Tahoma, Century Gothic (and other Gothics), Trebuchet, and many more. Font Classifications

Typography and Type Elements: Script: fonts that look they they are hand lettered, can connect or not. Should be used in small amounts for fancy documents (invitations), occasionally for headings, titles, logos, and drop caps. Most should never be set in long bodies of text. Use as a display font, or rarely a contrast. Includes: Comic Sans, Gigi, Brush Script (and other scripts), Fine Hand, and more Decorative: fun, distinctive fonts. Should never be used in long bodies of text. Best used as display fonts. Very powerful, so use sparingly. Includes: Goudy Stout, Impact, Algerian, Matisse, Mistral, and many more. Font Classifications con.

Typography and Type Elements: w Type is used for different things. General categories are: body text- a font readable in long blocks of text and smaller sizes (9-12 pts print, pts online). Can be Sans Serif or Serif fonts display text- a less readable font not designed to be read in long blocks. Used in advertising, for titles, logos, and other display uses. Can be Script or Decorative fonts contrast text- meant to contrast with your body text. Good for headings, subheadings, titles, and smaller blocks of text. Normally will be Serif or Sans Serif (opposite of body font) but can more more legible Script or Display fonts General Categories

Typography and Type Elements: w Italic: right slant letters of a typestyle, based on cursive handwriting. Used to emphasize words and for titles of books referenced in text. Does not interrupt flow like bold so it can be used in body text. Not very legible online w ALL CAPS: avoid at all costs. All caps takes up a lot of room and are much harder to read than normal upper and lower case words, due to the way we read. It also is used for yelling online (and that can carry over). There are much nicer ways to differentiate between type. Use only for small amounts of text (display or contrast) if using. w Bold: used to add emphasis, but use sparing and not in the body text (without consideration) since it interrupts reading w Underline: Impedes readability. Never use online as it looks like a link. Type Styles con.

Typography and Type Elements: w Headings: use differences (size, color, style, font) to indicate levels of headings w Line Length: lines should be shorter with sans serif fonts than with serif fonts w Non-typical fonts: if you want to use a non-typical font that you are not sure if your audience has on their computers consider making words in the font into an image. This works best for display uses (Title, logos, buttons,..) Hints

Typography and Type Elements: w Favor sans serif fonts for your body text as they are generally more readable and legible online. Serif fonts can make good contrast fonts (for headings and more) w Good choices: Verdana, Arial, Georgia, Comic Sans, fonts with a medium-high x-height (height of the lower-case x)  A Great Pair : Georgia (a serif font) and Verdana (a sans serif font) were designed by the same font designer for screen use w Selecting a font : if you don’t want to use the default fonts, use the font lists Dreamweaver set up (see the drop-down list under Properties, Font) as these are specially chosen fonts Good Screen Fonts

Document Design w Chunking: elements that are related (like a heading with its paragraph) are grouped and look like they belong together. w White space: is the empty space on a page. Use it to: frame elements in the page that belong together, add emphasis to tiles and headings, and separate items that do not belong together help with chunking Chunking & White Space

Document Design w Color: adds splash and interest to documents, while helping readers locate information set and use a consistent color scheme for your site use the same color for the same type of information throughout the site use color with other devices (white space, …) use color to communicate, not to decorate consider readers when selecting colors use color to unify series of documents ColorColor

International connotations of Color w Green: Positive (US): growth, clean, fresh, environmental, “go” Negative (US): mold, nausea, and jealousy Historic Europe: fertility (wedding gown color in 15 th century) w Blue: Positive (US): serenity, the sky, infinity Negative (US): sadness (feeling blue) “Safe” in almost every culture (Morton)

International connotations of Color w Black: West: mourning, death France: the unknown, death, night, work w White: East: mourning, death West: purity (color of bridal gowns) France: monarchy, royalty

International connotations of Color w Red: West: courage and love China: happiness and good fortune (preferred for wedding gowns) US flag: blood Traffic signal color Stop w Yellow: China: imperial color, revered US: people’s least favorite color but a happy color France: jealousy

International connotations of Color w Purple: Historical West: royalty, mourning France: religion, sacredness US: magic, lavishness, homosexuality Catholic Europe: death and crucifixion Middle East: prostitution Culturally “unsafe” color w Pink: East India: feminine color US: baby girls get pink, innocence, sweetness, soft, gentleness Japan: pastels are neither masculine nor feminine France: homosexuality

Have Fun and Design Well The End