The Power of Type to tell a Story

The Power of Type to Tell a Story

Assignment: (Do before Class): Typography

Assignment for Friday: Using Dan Harris' Typefaces
that work well together and Typeface Selection System website and Clear Ink's Color Scheme Generator ,
and Color Scheme Generator 2 create a webpage that uses contrasting type and colors to create emphasis.(See txt.con for a simple example)

Assignment: (Do after Class)

1. Go to some of your favorite websites and study how they use type to add emphasis, style, and meaning to their designs.

2. What are the major differences between the Print medium and the Web medium? You need to consider these differences before you borrow design strategies from the print medium to apply the web medium. The Web and Print Media are very different.

3. What are some of the design limitations of the Web Medium? What are some of the things you can do on a webpage that you can't do on a printed page?

4. Do you already have a web style for using images, text, and type? Be careful, you might already be stuck in your ways. Be wary of using the same design strategies for every website. Don't automatically use the same old style. Try to determine what is the appropriate style for that specific website.

1. See The Daily Sucker: Example of Bad Web Design

2. See examples of image websites:

a) Dan Harris: Design -- Your Personality in Pixels

b) Colorado guide. com

c). U.S. National News Sites

2. See example of different fonts used to
highlight the "Sewall Program"

3. Use Cascading Stylesheets on your websites,
particularly for sites with a lot of text. CSS makes
it a lot easier to manage large amounts of text
on a website.

4.See Total Font Studio 2002 for an example of
a Font tool program. See downloadable font
program--The Font Thing.

5. Disney Advertising fonts

6. Famous Fonts from Popular culture,
Branded Corporations, and the Media

7. How to use Famous Fonts

7. Examples of Famous fonts

7. Using Winrar to unzip font file downloads.
Download and install Winrar from cnet.com.

7. Extract the downloaded font files to
C:\WINDOWS\Fonts . This is the folder that
Windows uses to store your installed fonts in.

8. Free Font Libraries on the web

13. See Dan Harris' Typeface Selection System
website and Typefaces that work well together,
and Clear Ink's Color Scheme Generator and
Color Scheme Generator 2

14. Demonstrate "antialiasing text with Fireworks. See If you want to use an "Image Editor" program like Fireworks 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 .

10. See Dan Harris' Writing for the Web

11. See "Headers and Footers" handout
and Webpage Titles and Captions

12. Dan Harris: Type Terms and Fundamentals

13. Dan Harris: Choosing and Using Type

14. Dan Harris: Design -- Your Personality in Pixels

15. Example of using type to create Visual Hierarchies

16. Sewall Hall Homepage example of Type Effects

Sewall 1
Sewall 2
Sewall 3
Sewall 4
Sewall 5
Sewall 6
Sewall 7
Sewall 8
Sewall 9
Sewall 10

17. Using Type in Webpage Layouts

18. Studying Typography in Design

One of the most effective, simplest, and satisfying
ways to add contrast to a design is with type.
When you use fancy type, make sure your text is
still readable.
Study how type is used in the Print Medium. How are these central elements of typography used to create emphasis and tell a story.
- Size
- Weight
- Structure
- Form
- Direction
- Color
Dan Harris: Type Terms and Fundamentals
Try to use more than one contrast in type. Interesting layouts often depend on intelligent use of contrasts in size, weight, structure, form, direction, and color

American Studies Resources on the Internet