Using Typography in Web Design

Assignment: (Do after Class)

1. Begin thinking about the next website, "the Image"
website that you will do. It is due March 24.

2. Remember, you can add additional material to
an existing website or borrow material from a
website in order to create the image website.

3. The focus of the image website is to study
how images are used in web design to tell a
story and focus the reader's attention.
See my website: 1. Social Security Blues (640 x 480)
2. Social Security Blues (800 x 600)

4. See Webpagesthatsuck.com/dailysucker website.

1. Evaluating Webgenre websites.
(Also see Basic Elements of a Webpage)

Need Clear Website titles and page titles.
Need text links back to central pages in
the website.
Every Page has contact and author information.
Make sure pages aren't too long or too wide.
Users don't like to scroll.

-Try to make pages no more than 770 or
1000 pixels wide

-Try to make pages no longer than 2 screen-fulls
Make sure you include text links next to images
that you are using as links.
Each page has Alt tags for all central images.
Each website has a larger structure and goal.
Don't use lines with more than 8 to 10 words.
It is harder to read text on the web.
Make sure that your websites are all linked
to your design portfolio pages.
Make sure that your websites provide useful
links and valuable information.

2. Each Website must have a central focus. Your
focus is based on what the page is about. Try not
to have too broad or narrow a focus. A viewer
should be able to quickly scan over your page
and determine your focus. This is what I call
the "on quick glance" test."

3.. Basic Lessons about Web Design you have
Taught Me So Far

3. Creating Image Websites

3. Animated gifs of Sewall program

Example 1
Example 2
See Flash slideshow at www.colorado.edu

4. See Bad Examples of use of Color and Type

5. See Free Fonts for downloadable fonts and
Famous Fonts for commercially-used fonts.

5. See example of using different fonts, text color,
and background color to create an effect.

5. See Robin Williams, The PC is not a Typewriter (1992)

6. Be careful of overusing "Bold" for type. Use
"Bold" for headings and subheadings and major phrases.

7. Don't use "Italics" for large blocks of text. Italics
can be hard to to read in large blocks of text.

8. Don't overuse "Underline" for type. Web surfers
often think that all underlined text is hyperlinked.
So be careful when you use underline.

9. Don't overuse "Center" for both text and images. Centered text and images can be hard to read.

10. Don't use all Capital letters for large blocks of text. All Capital letters make text harder to read.

11. Use invisible gifs to add extra space to separate paragraphs from each other. You can also use invisible gifs to add a little extra space between separate blocks of text. These invisible gifs give you precise control over the spacing between your paragraphs and blocks of text. See Example of Invisible Spacer Gifs in a webpage.

12. Default Fonts on the Web. Remember that there are only a limited number of fonts that you can be sure are on both PC and Mac platforms. If you use fonts that aren't used by that specific computer, your browser will use one of the default fonts.

Windows-PC	Macintosh

Times New Roman	Times New Roman
Courier	Courier
Georgia	Georgia
Verdana	Verdana
Arial	Arial
Trebuchet MS	Trebuchet

13. See Example of Serif and Sans-Serif
Fonts in Dreamweaver.

14. Cascading Style Sheets (CSS) are now a standard web design tool in 2005. Use CSS styles for all the
pages in a website. Using a CSS style, for example,
design.css , allows you to quickly change and modify
the fonts you use in a website. See Cascading Style Sheets , Cascading Style Sheets FAQs and Best Practices with CSS

14. See basic example of a webpage that uses
cascading stylesheets (CSS). Remember that
CSS must use the basic six fonts that come with
Dreamweaver. If you want to use fancy fonts, you
must make the text images. You can't rely on
all computers to have these "fancy fonts" installed
on them.

15. Demonstrate "antialiasing text with Photoshop 6. See If you want to use an "Image Editor" program like Photoshop to create boxes of text for your webpages
be sure you use antialiasing for larger type. Anti-aliasing smooths out the rough pixel edges on larger type.
Don't use antialising for small type, because antialiasing makes smaller type harder to read. So if your buttons are a little hard to read, check to see if you used antialiasing when you created the text for that button.

15. Always use gif images for title and header texts.
The bigger the text, the more problem with aliasing.
See granniet.htm (aliasing version) and granniet1.htm.

16. Try to limit lines of text to eight to ten words

17. If you really need to use small type, consider using Arial, Verdana, or Geneva for easier reading. If you
want your text to be easy to scan quickly use a sans serif font like Arial, Verdana, or Geneva.

18. In Dreamweaver, go to "Insert" on the menu bar
and select "special characters" to insert special text such as copyright or open and closed quotes. To add
an extra touch to your professional looking webpages, especially for headlines, subheadings, and block quotes use opening and closing quotes:

opening single quote ‘ 

closing single quote, apostrophe ’ 

opening double quote “ 

closing double quote ” 

18. See Dan Harris' Web Type 101 , and Typefaces
that work Together

19. You can vary both the color, font, and
font size to create different effects.See Web Color Picker, Browser-Safe Color Chart, 216 Color Webmaster's Palette , Typefaces that work Together .,
Esperfonto: Type-picking tool

18. See Lynch on Typography I, Text Alignment,

See the Fireworks text editor box to understand
these text options.(See class handout on this)
You can vary Type in 4 ways

Font
Size
Weight
Color

2. In typography:

Leading is the line height of the text
Kerning is the white space between the letters
Horizontal Scaling changes the width of the
text on a line without changing its height.
Baseline shift raises or lowers the text
in points from the baseline of the rest of the
text.
Be careful not to use unsupported fonts on webpages. If the browser won't support the font, it will use a default font.

4. Make sure your text cells are no wider than 365 pixels. Try not to use more than 9 or ten words in a
line in your webpages.

20. David Siegel: Typographic Emphasis on the Net
and Horizontal White Space Control.

21. Default Fonts for PCs and Macs on the Web.
See Lynch on Typefaces on the Web

Windows-PC	Macintosh

Times New Roman	Times New Roman
Courier	Courier
Georgia	Georgia
Verdana	Verdana
Arial	Arial
Trebuchet	Trebuchet

22. Sans Serif and Serif Fonts on the Web

Serif Type	Sans-Serif Type

Times New Roman	Verdana
Georgia	Arial
Courier	Trebuchet

23. Use Times Roman and Serif Type for large blocks
of text.

24. See Lynch on using Emphasis with Type.

25. See Lynch on using Type in Graphic images.

26.See Microsoft's Specifying fonts in Web pages.