More Information on Graphic Design & Color: A few pointers for your websites & other e- publications Dr. Jennifer Bowie

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 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: consider using online for emphasis. Italics are the 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. There are much nicer ways to differentiate between type. Use only for small amounts of text (display or contrast) if using. w Bold: use 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

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 separate items that do not belong together help with chunking Chunking and White Space

w Alignment: always choose a single alignment (print and especially online) for a page and site/document. DO NOT mix alignments! A single alignment creates a clean, professional look and adds organization and flow Multiple alignments on a single page are messy, unprofessional, annoying, and distracting Choose a single horizontal alignment (left, right, center, …) and a single vertical alignment (top, bottom, middle,…) Align text, images, and all other elements on the page with the same alignment A single alignment does not mean everything has to line up on one margin, you can indent items, just make sure they still maintain your chosen alignment Horizontal Alignment options: Left: Highly preferred. Most readable (especially for long bodies of text) and professional. Right: Strongly discouraged. Highly unreadable, use rarely. If you must use it, use it for only very short lines of text. Best for “edgy” designs with little text. Centered: Strongly discouraged. Use rarely and in small amounts, very unreadable. Creates a weak line and often a weak resulting design. Leads to a calm, formal, and old- fashioned design (wedding invitations are often centered, for example) For more information check out Williams & Tollett. Document Design Alignment

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

Have Fun and Design Well The End