More Information on Graphic Design for Electronic Texts

A few pointers for your websites & other e-publications

By Jennifer L. Bowie

AFont ClassificationsThere 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.

ZMore Font Classifications

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

BFont Use Categories

• Type is used for different things. General categories are:– body text: a font readable in long blocks of text and

smaller sizes (12-14 pts online, 9-12 pts print, does vary w/ x-height). Can be Sans Serif or Serif 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 legible Script or Display fonts. Use in sizes at least 2 points above your body text size.

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

CGood 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

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

XAlignment

• 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 Alignment

• Highly preferred. Most readable (especially for long bodies of text) and professional.– Hos duis, nulla torqueo damnum aliquip

ingenium duis. Ut abdo probo nullus vicis hendrerit adsum ut augue.

– Illum consequat adsum dolor bene nunc exerci. Vulpes minim persto wisi luctus usitas nostrud capio letalis torqueo quidne molior loquor.

– Facilisi amet vulputate occuro, eu lobortis velit vel vel feugiat quae adsum nostrud tamen sed.

Right Alignment

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

– Hos duis, nulla torqueo damnum aliquip ingenium duis. Ut abdo probo nullus vicis hendrerit adsum ut augue.

– Illum consequat adsum dolor bene nunc exerci. Vulpes minim persto wisi luctus usitas nostrud capio letalis

torqueo quidne molior loquor.

– Facilisi amet vulputate occuro, eu lobortis velit vel vel feugiat quae adsum nostrud tamen sed.

Center Alignment

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

– Hos duis, nulla torqueo damnum aliquip ingenium duis. Ut abdo probo nullus vicis hendrerit adsum ut augue.

– Illum consequat adsum dolor bene nunc exerci. Vulpes minim persto wisi luctus usitas nostrud capio letalis torqueo

quidne molior loquor.

– Facilisi amet vulputate occuro, eu lobortis velit vel vel feugiat quae adsum nostrud tamen sed.

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.

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

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 & Design Well