Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

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

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

  2. Font Libraries
  4. Top Free Fonts sites
  5. The Best Free Fonts
  6. Free Font Sites
  7. The Free Type Project
  8. Font Face. com
  9. Font
  10. 1001 Free
  11. Simply the Best
  12. PC Fonts. com

13. See Dan Harris' Typeface Selection System
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

  1. Visual Hierarchy
  2. Visual Hierarchy 1
  3. Visual Hierarchy 2
  4. Visual Hierarchy 3
  5. Visual Hierarchy 4
  6. Visual Hierarchy 5
  7. Visual Hierarchy 6
  8. Visual Hierarchy 7
  9. Visual Hierarchy 8
  10. Visual Hierarchy 9
  11. Visual Hierarchy 10

16. Sewall Hall Homepage example of Type Effects

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

17. Using Type in Webpage Layouts

  1. Blocked Headlines
  2. MSNBC
  3. Slate.Com
  4. USA Today
  5. New York Times Newspaper
  6. Environmental News Network
  7. Discovery Channel Online
  8. Fortune.Com

18.  Studying Typography in Design

  1. One of the most effective, simplest, and satisfying
     ways to add contrast to a design is with type.

  2. When you use fancy type, make sure your text is
     still readable.

  3. 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

  4. Dan Harris: Type Terms and Fundamentals

  5. 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















Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
7130      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 10 March, 2006

Digital Design Course homepage