1.
What are the most crucial differences in type on-screen and type in print?
- The computer screen renders typefaces at a much lower resolution than is found in print, and the usable area of typical computer screens is smaller than most book and magazine pages. This limits the amount of information that can be delivered on one page without having to scroll. However, the most distinctive characteristic of web typography is its variability, as one will never know exactly how the page will look on a reader's screen because of the interaction between the browser, server and operating system of the reader's computer. Because of this, Lynch and Horton point out that web page layouts and typography should be regarded as suggestions of how pages will be rendered.
2.
What are the drawbacks of using standard heading tags such as H1, and H6?
- The standard heading tags in HTML lack subtlety and these tags make headlines look extremely large or small in most web browsers. This is because the header tags in HTML were not created with graphic design in mind, but instead their sole purpose is to designate a hierarchy of importance so that the information structure of a document can be easily determined.
3.
How can CSS assist typography issues in web design? Are there precautions you should take when using CSS?
- Cascading Style Sheets assist in reconciling the division between structural logic and visual logic in webdesign. They provide control over the exact visual style of headers, paragraphs, lists, and other page elements and retain the logical use of HTML's structural tags without sacrificing graphic design flexibility. However, major web browsers offer inconsistent and incomplete support for CSS. As a precaution, we as designers should use “plain vanilla” HTML to describe document structure and CSS to define visual layout. In this way, instead of striving for complete control and consistency for our pages, we accept a certain degree of variability between platforms and browsers.
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
- Emphasis
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?
- Blocks of text are easiest to read when left-justified alignment is used. The left margin is even and predictable and left justification requires no adjustment to word spacing. Centered and right justified text blocks are difficult to read because of the ragged left margins that are produced, and justified text cannot be controlled on a web page the same way that it can be controlled in print documents. Titles and headings over left-justified bodies of text should also be flush left so as not to produce an asymmetric, unbalanced page.
6.
What do the authors suggest regarding line length on web pages?
- Line length on web pages should be restricted (using invisible tables) to no more than about fifty to seventy characters per line. This differs from conventional print in which thirty to forty characters per line is considered ideal.
7.
The authors suggest that “ downstyle typing ” be used in designing web pages. What does this mean? Should capital or lowercase letters for headlines? What about blocks of text? Why?
- Downstyle typing is the use of capitals for only the first word in a sentence and for proper nouns. Downstyle is more legible because as we read we primarily scan the tops of words, and It is recommended for headlines, subheads, and text. If initial capital letters are used in headlines, the reader's scanning of the word forms is disrupted.
8.
What is meant by white space? Leading?
- White space is the vertical space in a text block. Leading is the distance from one baseline of text to the next. Leading strongly affects the legibility of text blocks and should be greater for longer lines of text.
9.
What leading should you apply if you are using 16-point font?
- In print a general rule is to set the leading of text blocks at about 2 points above the size of the type. A more generous leading will compensate for longer line lengths and lower resolution of computer screens, therefore 16-point font should have 18 to 20 points of leading.
10.
How should you separate blocks of text on a web page?
- Blocks of text can be separated using indentation or blank line spacing. Indented paragraphs work well for longer blocks of prose, and blank line spacing between paragraphs makes a page easy to scan and provides extra white space for visual relief.
11.
What should the designer keep in mind when choosing typefaces for the web?
- Typeface should be chosen carefully and should produce harmony between the verbal and visual flow of the page content. When choosing typefaces for the web it is important to consider whether or not the readers are likely to print the pages and read them off-screen. It is also important to specify multiple fonts to increase the chances that the reader will see a typeface that you are happy with.
12.
What are some fonts that look good online but not in print? Does that matter?
- Georgia and Verdana are fonts that look good online, as they were specifically designed to be read directly from the computer screen, but do not look good in print. While their exaggerated x-heights and large size offer excellent legibility for web pages, they look massive and clumsy when printed on paper.
13.
Which fonts does the author recommend for online text? Online headers?
- The author recommends a serif face such as Georgia and Times New Roman for body text, and sans serif such as Ariel and Verdana as a contrast for online headers.
14.
What is the maximum number of typefaces that should be used in a web page? How can this be expanded to create interest?
- It is safest to use a single typographic family and vary the weight and size for display type and emphasis. Other ways to create interest include using italics, bold, and capital letters. If one chooses to combine serif and sans serif faces, the authors advise that compatible fonts be selected and no more than two typefaces (one serif, one sans serif) be used on a page.
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 – attracts the eye because of it contrasts in shape from body text, large bodies of text should not be set in italics because the readability is much lower than in comparably sized roman text.
- Bold – gives emphasis because it contrasts in color from the body text, but large blocks of bold text lack contrast and therefore lose their effectiveness.
- Underline – shows importance/emphasis (was common when typewriters were used), but used on a webpage it will be confused with hyperlink text.
- Colored text – differentiates type and works to distinguish section heads, but use of colored text within text blocks will cause readers to assume that the colored text is a hyperlink.
- Capital letters – not an effective way to add emphasis, even though it is commonly used. An entire block of capitalized text is uncomfortable and tiring to read, and slows the reading process.
- Spacing and indentation – is one of the most effective and subtle ways to vary the visual contrast and relative importance of a piece of text. Indentation is also an effective means of distinguishing bulleted lists, quotations, and example text. Should be used consistently throughout the site as sloppy, inconsistent formatting may confuse readers.
16.
Describe the effect that platform (Windows, Mac) issues have on the typefaces that the designer chooses. What can be done about this?
- Even if the same typefaces are used, different operating systems display them differently. Type will look 2 to 3 points larger when displayed on Windows browsers than the equivalent face will look on a Mac. This difference in font rendering can have a substantial impact on page layout, and the font settings preference can be used to change the default font size of the text.
17.
What are the two main accessibility issues when considering type?
- Size and color are the two main accessibility issues, specifically for readers who have vision disabilities. Vision-impaired readers will need to be able to transform illegible text into a format that they can read. They must be able to increase the font size and set the text and page background for maximum contrast. Users who are colorblind also need this control over text and background color.
18.
How does the designer create scalable text?
- Scalable text is created by using relative units, such as the em unit, to control the page typography (type size, margins and indentions, leadings). If text is set using absolute size values, users who need to will not be able to easily enlarge the text.
19.
How does using color for emphasis affect accessibility?
- Emphasis will be missed by users who are colorblind and cannot see the colored text, which is why bold formatting should also be used. There also needs to be sufficient contrast between the page background and the text. This will not only assist vision-impaired users, but provide greater readability for all users.
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?
- Verdana, Ariel, Helvetica, sans-serif, 18, bold
- What font family, font size, margin, will you designate for h2?
- Verdana, Ariel, Helvetica, sans-serif, 16, bold
- What font family, font size, margin, will you designate for h3?
- Verdana, Ariel, Helvetica, sans-serif, 14, bold
- What font family, font size, line height (leading) margin, will you designate for blocks of text <p>?
- Georgia, Times New Roman, Times, Serif, 12, 14 pts leading
|