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
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
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
Sting Cheese Incident
- Life Magazine Home
- USA Today.Com
3. Animated gifs of Sewall program
4. See Bad
Examples of use of Color and Type
5. See Free Fonts for downloadable fonts and
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.
"Bold" for headings and subheadings and major phrases.
7. Don't use "Italics" for large blocks of
can be hard to to read in large blocks
8. Don't overuse "Underline" for type. Web
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
|Times New Roman
||Times New Roman
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
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.
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.
(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
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
- See the Fireworks text editor box to
these text options.(See class handout on this)
- You can vary Type in 4 ways
2. In typography:
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
in points from the baseline of the rest of the
- 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
20. David Siegel:
Typographic Emphasis on the Net
White Space Control.
21. Default Fonts for PCs and Macs on the Web.
See Lynch on Typefaces
on the Web
|Times New Roman
||Times New Roman
22. Sans Serif and Serif Fonts on the Web
|Times New Roman
23. Use Times Roman and Serif Type for large blocks
24. See Lynch on using Emphasis
25. See Lynch on using Type
in Graphic images.
26.See Microsoft's Specifying
fonts in Web pages.