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
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.
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
6. Famous Fonts from Popular culture,
Branded Corporations, and the Media
to use Famous Fonts
7. Examples of Famous
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
Free Fonts sites
Best Free Fonts
Free Type Project
the Best Fonts.com
13. See Dan Harris' Typeface
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
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
- Visual Hierarchy
- Visual Hierarchy 1
- Visual Hierarchy 2
- Visual Hierarchy 3
- Visual Hierarchy 4
- Visual Hierarchy 5
- Visual Hierarchy 6
- Visual Hierarchy 7
- Visual Hierarchy 8
- Visual Hierarchy 9
- Visual Hierarchy 10
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
- Blocked Headlines
- USA Today
- New York Times Newspaper
- Environmental News Network
- Discovery Channel Online
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
- Study how type is used in the Print Medium. How are these central elements of typography used to create emphasis and tell a story.
- 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