|

NWskiers.org
Build Your Club's
Website

Website Design Guide
Introduction
Organize
Style
Audience
Page Size
Layout
Font
Unity
All Hints
|
| Typography |
Typography is
one of the most powerful tools you have available in your efforts to
create a certain look. People react in predictable ways to various
fonts. Use type to get attention, convey information, or create a
mood.
Unfortunately, on the web, competing
browsers have different standards for fonts. If a browser does not
have the font you have chosen, then it will revert to the default -
usually Times Roman, or Courier fonts. It is best to design for
Netscape 3.0 since the computer labs at the PSU library use this
browser.
|
Serif
Fonts
 |
Serif fonts are fonts with
perpendicular lines at the end of each letter stroke.
Serif types are highly readable.
Serif's hooks, feet, and brackets - and the differential between the
thick and thin parts - contribute to its legibility, and, the more
legible a typeface, the more readable it is. Don't forget, however,
that a reader's motivation can overcome readability problems.
Sometimes creating a proper image is your objective, and therefore
readability is secondary. -
For example:
- Times Roman works
well, is neutral and easy on the eye, and most browsers read
this font
- Goudy Old
Style, conservative reads larger than Times Roman at the
same point size,
- Book Antiqua,
easy to read, neutral, appropriate for reports, magazine,
not all browsers support this font
|
San
Serif
Fonts
 |
San Serif
means no lines at the ends of each letter stroke.
Sans Serif is perceived as modem,
cosmopolitan, scientific, and up-to-date. While people read sans
serif type faster, they also tend to read it less accurately.
Because readers are more motivated to read your headlines or titles
than they are to read the body text, and because headings tend to be
short, using a typeface they recognize and that is quick to read
makes sense.
For example:
- Arial, Narrow
font and legible, use as heading font
- Helvetica
label very legible, use as body text font
- Comic Sans,
more creative and fanciful, do not over use
|
Below
is a table comparing the uses for San Serif and Serif fonts.
| |
Heading/
Title |
Body
Text |
Captions/
Links |
| Font |
San Serif |
Serif |
Serif of Sans Serif |
| Size |
Heads - minimum of 2 times
larger than subheads
Subheadings - same or up to 2
points. larger than body text
|
9 - 12 point |
If serif, 2 points larger or 2
point smaller
If san serif, same as body text
|
| Weight |
Bold |
Regular |
Bold |
|
Font
Legibility |
Font Legibility refers to the speed and ease with which individual
letters can be recognized. Some Fonts Such as Arial Narrow will
condense letters when displayed at small font sizes (Arial Narrow).
This is why some fonts are better left as headings, not body types.
In the following examples, all
different typefaces are printed in 12 point. Notice the difference
in width of letters can make the font look smaller or larger.
| Arial Black (12pt) |
Easy to read
Good for titles |
Widely Spaced |
| Arial Normal (12pt) |
use anywhere |
|
| Arial Narrow (12pt) |
|
|
Arial Narrow
(8pt) |
Hard to read
do not use as footnote. |
little space between
letters |
|
Establish
a typographic
hierarchy |
You should
also establish guidelines for the hierarchy of typographic elements
at your site. Just as with a magazine or a book, start at body-copy
level and work up from there, designing treatments for titles,
subheads, and any other display type your site requires.
A website may use:
- Body text: Goudy Old Style,
normal size
- Sub Heading: Arial
Narrow, Bold, Normal size
- Heading: Arial
Narrow, Bold, +2 size
- Links: Arial Narrow,
Bold, -2 size
|
|
| Readability |
Readability
refers to the likelihood that your readers will be motivated to pick
up your material, begin to read it, and actually make their way
through it without succumbing to fatigue, distraction, or
irritation. The Web is a particularly poor medium to read from.
Visitors may read 50% slower on the screen, so format the material
to match its intended use.
To be read on screen:
- Larger spacing between lines
- Less text
- More graphics
- Smaller columns
|

On screen
example
|
To be read on paper
copy
- Lots of text
- Fewer images
- Full width of document
|
PACRAT
Rules Page
|
|

How to make a Ski Club Website is
brought to you by NWSCC and Chris
Miller

|