Typography – Lynch & Horton

Directions for Deliverables

1. Read Typography (Chapter 5 in Web Style Guide- online).

2. Using the information you gather from your reading, answer the questions below.

3. Save the document as a PDF file or html and link to your online Activities Guide under Lynch as topography.html.

Questions to guide your design.

1. What are the most crucial differences in type on-screen and type in print?

Type in print is rendered at 1200 dpi or greater, whereas type on-screen is rarely more than 85 dpi. Also, the usable area of typical computer screens is smaller than most magazine and book pages.

2. What are the drawbacks of using standard heading tags such as H1, and H 6?

They lack subtlety: H1 looks absurdly large, while H6 is ridiculously small.

3. How can CSS assist typography issues in web design? Are there precautions you should take when using CSS?

Style sheets provide control over the exact visual style of page elements. The major Web browsers offer inconsistent and incomplete CSS support, especially with margins.

4. The author describes various ways (7) to increase legibility in your web site? What are they?

Alignment, line length, white space, typefaces, type size, case, consistency

5. L, C, R, and J text alignment is available on the web. Which one is the easiest to read in blocks of text? Why? Headlines? Why?

Left-justified is the easiest to read since we naturally read left to right and no adjustment to word spacing is needed. The inequities fall at the end of the lines and also add variety and interest to the page.

Headlines should also be left-justified as to not contrast with the “ragged” right margin.

6. What do the authors suggest regarding line length on web pages?

A reader’s eye’s span of acute focus is only about three inches wide, so designers should use tables to limit the line length to between 50 and 70 characters.

7. The authors suggest that “downstyle typing” be used in designing web pages. What does this mean? Should capital or lowercase letters be used for headlines? What about blocks of text? Why?

“Downstyle typing” means to capitalize only the first word and any proper nouns in your headlines, subheads, and text. Lowercase letters should be used for headlines because as we read, we primarily scan the tops of words. Capital letters disrupt the reader’s scanning of the word forms.

8. What is meant by white space? Leading?

“Leading” is the vertical space in a text block and is the distance from one baseline of text to the next. “White space” is a blank line of white space to separate paragraphs, instead of indenting. It makes the page easy to scan and provides visual relief.

9. What leading should you apply if you are using 16-point font?

18 points of leading (2 points above the size of type)

10. How should you separate blocks of text on a web page?

To use blank lines, insert a paragraph tag (<P>) or a line break tag (<BR>) followed by a transparent single-pixel GIF graphic. To indent, insert several non-breaking space characters (&nbsp;) or use the CSS margin property.

11. What should the designer keep in mind when choosing typefaces for the web?

Designers should choose from the resident default fonts for most operating systems and should keep in mind that users can set their browser preferences to use their designated default font.

12. What are some fonts that look good online but NOT in print? Does that matter?

Georgia and Veranda have exaggerated x-heights and are very large, which look good online but massive and clumsy on paper.

13. Which fonts does the author recommend for online text? Online headers?

Lynch recommends a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Ariel as a contrast for headlines.

14. What is the maximum number of typefaces that should be used in a web page? How can this be expanded to create interest?

One shouldn’t use more than two typefaces (one serif, one sans serif) on a page. Use a single typographic family and vary its weight and size for display type and emphasis.

15. There are six ways that the author suggests to create emphasis in text. Name each and the pros or cons of using each in a web site.

Italics
Bold
Underlined
Colored text
Capital letters
Spacing and indention

16. Describe the effect that platform (Windows, Mac) issues have on the typefaces that the designer chooses. What can be done about this?

In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on Macintosh. Designers should specify at least one typeface from each operating system to avoid having the browser render pages in the default font.

17. What are the two main accessibility issues when considering type?

Size and color (impaired vision and color blindness)

18. How does the designer create scalable text?

By using relative units such as the em unit to control the typography (type size, margins and indents, leading) on the page. Use text graphics sparingly, and always offer a text-only equivalent.

19. How does using color for emphasis affect accessibility?

Low-vision users need to be able to increase the type size and set the text and page background colors for maximum contrast. Colorblind users also need control over text and background color.

20. Using the information from your study of typography in online environments, what will you use as:

What font family, font size, margin, will you designate for h1?
What font family, font size, margin, will you designate for h2?
What font family, font size, margin, will you designate for h3?

What font family, font size, line height (leading) margin, will you designate for blocks of text <p>?

Apply this in your page design.