Transcript A Quick Look at Graphic Design:

More Information on Graphic Design & Color:
A few pointers for
your websites &
other epublications
Dr. Jennifer Bowie
Typography and Type Elements:
Font Classifications
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.
Typography and Type Elements:
Font Classifications con.
• 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.
Typography and Type Elements:
General Categories

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, 12-14 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
Typography and Type Elements:
Type Styles




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
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.
Bold: use to add emphasis, but use sparing and not in the body
text (without consideration) since it interrupts reading
Underline: Impedes readability. Never use online as it looks like a
link.
Typography and Type Elements:
Hints
Headings: use differences (size, color, style, font) to
indicate levels of headings
 Line Length: lines should be shorter with sans serif
fonts than with serif fonts
 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,..)

Typography and Type Elements:
Good Screen Fonts




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)
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
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
Document Design
Chunking and White Space

Chunking: elements that are related (like a heading with
its paragraph) are grouped and look like they belong
together.

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
Document Design
Alignment

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 oldfashioned design (wedding invitations are often centered, for example)
For more information check out Williams & Tollett.
Document Design
Color

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
Have Fun and Design Well
The End