NWskiers.org

Build Your Club's Website

Website Design Guide
Introduction
Organize
Style
Audience
Page Size
Layout
Font
Unity

All Hints

New to NWskiers?
Begin Here

 

Members

Pick a Club

Comm. Members
Club Reps.

What's New

Newsletter
NWSCC Events
Club Events
PACRAT Racing

What We Do

Member Benefits
Skiers' Directory
Community Serv.
NW Advocates

Helpful Stuff

NW Resort Guide
Ski Links
Build A Website
Ski Articles
Personal Profiles
Person of Year
Past Ski Trips
Snowsport Safety
History
Officers
Join NWSCC
Far West Ski A.

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