Chapter 5 Web Typography

Download  file with answers

Not a member!

Create a FREE account here to get access and download this file with answers

---

 

Chapter 5: Web Typography

TRUE/FALSE

1. The consistent use of type to express hierarchy of your content provides valuable information cues to the reader.

 

2. In strict typography terms, a font is the name of the type, such as Times New Roman or Futura Condensed.

 

3. The computer screen has a higher resolution than the printed page, making fonts that are legible on paper easier to read on-screen.

 

4. Including text as graphics means users cannot search for that text.

 

5. You generally want to use absolute units for Web pages because they can be scaled to an individual user’s display type.

 

6. Measurements stated in em are always relative to their environment.

 

7. Child elements do not inherit the percentage values of their parents.

 

8. You can string together a list of font families, separated by commas, supplying a selection of fonts that the browser can attempt to match.

 

9. When using the font shortcut property, the font properties other than font size and font family are optional.

 

10. Negative values for the text-indent property let you create a hanging indent.

 

MULTIPLE CHOICE

1. Designing for the Web restricts your ____ choices to those that your users have installed on their computers.
a. font size c. color
b. font d. letter

 

2. ____ develops a strong visual identity.
a. Variability c. Using large fonts
b. Using many font colors d. Consistency

 

3. If you design your pages using a font that your user does not have installed, the browser defaults to ____ on a Macintosh.
a. Arial c. Verdana
b. Times d. Courier

 

4. ____ fonts have strokes that finish the top and bottom of each letter.
a. Times c. Serif
b. Sans-serif d. Block

 

5. ____ is an expanded font—each letter takes up more horizontal space than letters in the other font families
a. Verdana c. Times
b. Arial d. Trebuchet MS

 

6. In general, ____ text on a ____ background is easiest to read.
a. lighter; light c. darker; dark
b. lighter; dark d. darker; light

 

7. The ____ is a printing measurement, traditionally equal to the horizontal length of the capital M in any given font size.
a. ex c. em
b. pica d. point

 

8. ____ values are always relative to another value.
a. Pixel c. Percentage
b. Point d. Absolute

 

9. The ____ unit is equal to the height of the lowercase x in any given font.
a. ex c. em
b. pica d. inch

 

10. ____ fonts are fixed-width fonts.
a. Cursive c. Sans-serif
b. Fantasy d. Monospace

 

11. ____ fonts are primarily decorative.
a. Cursive c. Sans-serif
b. Fantasy d. Monospace

 

12. You can specify a list of alternate fonts using ____ as separators.
a. commas c. semicolons
b. colons d. periods

 

13. The ____ property gives you control over the specific sizing of your type.
a. font-style c. font-size
b. font-family d. font-variant

 

14. The CSS specification recommends a scaling factor of ____ between font sizes for the computer display.
a. 1.1 c. 1.3
b. 1.2 d. 1.5

 

15. The designers of CSS2, Hakon Lie and Bert Bos, recommend that you always use the ____ value to set font sizes on your Web pages.
a. em c. px
b. ex d. pt

 

16. The ____ property lets you specify italic or oblique text.
a. font-style c. font-size
b. font-family d. font-variant

 

17. The ____ property lets you define small capitals, which are often used for chapter openings, acronyms, and other special purposes.
a. font-style c. font-size
b. font-family d. font-variant

 

18. The ____ property lets you set the weight of the typeface.
a. font-style c. font-size
b. font-weight d. font-variant

 

19. The numeric values for font weight express nine levels of weight from ____.
a. 1 to 9 c. 100 to 900
b. 10 to 90 d. 1000 to 9000

 

20. Use the ____ property to set horizontal alignment for the lines of text in an element.
a. text-decoration c. text-indent
b. text-height d. text-align

 

21. The ____ value is not supported by all browsers.
a. left alignment c. right alignment
b. justify d. center alignment

 

22. The ____ vertical-align property value raises the baseline of the box to the proper position for superscripts of the parent’s box.
a. text-top c. sub
b. top d. super

 

23. The ____ vertical-align property value aligns the top of the box with the top of the parent element’s font.
a. text-top c. sub
b. top d. super

 

24. The ____ property lets you adjust the white space between letters.
a. word-spacing c. text-spacing
b. letter-spacing d. line-height

 

25. The ____ properties lets you control the visual characteristics of elements that have a display property value of list-item.
a. bullet-style c. list-style
b. list-item-style d. list-design

 

COMPLETION

1. You should communicate the hierarchy of information in your Web pages with changes in the size, ____________________, or color of the typeface.

ANS: weight

PTS: 1 REF: 192

2. To control more effectively how text appears on your pages, think in terms of font ____________________.

ANS: families

PTS: 1 REF: 194

3. ____________________ fonts consist of block letters without serifs.

ANS: Sans-serif

PTS: 1 REF: 194

4. Because its ____________________ (the height of the letter x in the font) is smaller than that of other fonts, Times can be hard to read.

ANS: x-height

PTS: 1 REF: 196

5. ____________________ units are better suited to print destinations than Web destinations.

ANS: Absolute

PTS: 1 REF: 198

6. ____________________ are the basic picture element of a computer display.

ANS: Pixels

PTS: 1 REF: 200

7. ____________________ is the measure of how many pixels fit on a screen.

ANS: Resolution

PTS: 1 REF: 200

8. The CSS font properties allow you to control the ____________________ of your text.

ANS: appearance

PTS: 1 REF: 202

9. Monospace is commonly used to mimic ____________________ text or for programming code.

ANS: typewritten

PTS: 1 REF: 203

10. The ____________________ form of a typeface is simply normal text slanted to the right.

ANS: oblique

PTS: 1 REF: 208

ESSAY

1. How can you design your Web pages for legibility?

ANS:
Where the text wraps at the end of each line depends on the font and the display characteristics of the browser. Because its x-height (the height of the letter x in the font) is smaller than that of other fonts, Times can be hard to read, even though it is a serif typeface. This makes it a poor choice for a default font. Trebuchet is a sans-serif face that has a large x-height and rounded letter forms for easy screen legibility. Arial is widely available and is the most commonly used sans-serif font.Verdana is an expanded font—each letter takes up more horizontal space than letters in the other font families.This makes the text easier to read online, but takes much more space on the page.

The size and face of the type you use on your pages determine the legibility of your text. The computer screen has a lower resolution than the printed page, making fonts that are legible on paper more difficult to read on screen. Keep fonts big enough to be legible, and avoid specialty fonts that degrade when viewed online.To aid the reader, consider adding more white space to the page around your blocks of text and between lines as well.Test your content with both serif and sans-serif body text. Finally, make sure that you provide enough contrast between your text color and the background color; in general, darker text on a light background is easiest to read.

PTS: 1 REF: 196-197

2. Describe the concept of absolute units and relative units. Specifically describe the em and ex units.

ANS:
Absolute Units: CSS lets you use absolute measurement values that specify a fixed value. The measurement values require a number followed by one of the unit abbreviations. By convention, do not include a space between the value and the measurement unit. The numeric value can be a positive value, negative value, or fractional value. For example, the following rule sets margins to 1.25 inches:

p {margin: 1.25in;}

You generally want to avoid using absolute units for Web pages because they cannot be scaled to the individual user’s display type. Absolute units are appropriate when you know the exact measurements of the destination medium. For example, if you know a document will be printed on 8.5 X 11-inch paper, you can plan your style rules accordingly because you know the physical dimensions of the finished document. For this reason, absolute units are better suited to print destinations than Web destinations. Although the point is the standard unit of measurement for type sizes, it is not the best measurement value for the Web. Because computer displays vary widely in size, they lend themselves better to relative units of measurement that can adapt to different monitor sizes and screen resolutions.

Relative Units: The relative units are designed to let you build scalable Web pages that adapt to different display types and sizes. This practice ensures that your type sizes are properly displayed relative to reach other or to the default font size set for the browser.

Relative units are always relative to the inherited size of their containing element. For example, the following rule sets the font size for theelement to 1.5 times (150%) the size of the browser default:

body {font-size: 150%;}

Child elements inherit the percentage values of their parents. For example, a

element within this body element inherits the 150% sizing.

The em Unit: The em is a printing measurement, traditionally equal to the horizontal length of the capital letter M in any given font size. In CSS the em is equal to the font size of an element. It can be used for both horizontal and vertical measurement. In addition to stating font sizes, em is useful for padding and margins as well.

The size of the em is equivalent to the font size of the element. For example, if the default paragraph font size is 12-point text, the em equals 12 points. Stating a text size of 2 em creates 24-point text—two times the default size. This is useful because it means that measurements stated in em are always relative to their environment.

The ex Unit: The ex unit is equal to the height of the lowercase letter x in any given font. Ex is a less reliable unit of measurement than em because the size of the letter x changes in height from one font family to another, and the browser cannot always calculate the difference correctly. Most browsers simply set the ex value to one-half the value of the font’s em size. Ex is not commonly used to set font sizes.

PTS: 1 REF: 198-200

3. What are the five generic font families? Describe each briefly. What is the advantage of being able to use generic font families?

ANS:
Serif fonts are the traditional letter form, with strokes (or serifs) that finish off the top and bottom of each letter. The most common serif font is Times.

Sans-serif fonts have no serifs. They are block letters. The most common sans-serif fonts are Helvetica and Arial.

Monospace fonts are fixed-width fonts. Every letter has the same horizontal width. Monospace is commonly used to mimic typewritten text or for programming code.

Cursive fonts are designed to resemble handwriting. Although often displayed as Comic Sans, this choice can provide inconsistent results.

Fantasy fonts are primarily decorative. Fantasy is not a widely used choice.

The practice of using generic names ensures greater portability across browsers and operating systems because it does not rely on a specific font being installed on the user’s computer.

The following rule sets

elements to the default sans-serif font:

p {font-family: sans-serif;}

Of course, If you don’t specify any font family, the browser displays the default font, usually some version of Times.

PTS: 1 REF: 203

4. Describe the text-align, line-height, and text-decoration properties.

ANS:
text-align: Use the text-align property to set horizontal alignment for the lines of text in an element. You can specify four alignment values: left, center, right, and justify. The justify value lines up the text on both horizontal margins, adding white space between the words on the line, like a column of text in a newspaper. The following style rule sets the

element to justified alignment:

p {text-align: justify;}

When choosing an alignment value, keep the default settings for the language and the user’s preferences in mind. For example, most western languages read from left to right, and the default alignment is left. Unless you are trying to emphasize a particular section of text, use the alignment with which most readers are comfortable. Both right and center alignment are fine for short sections of text, but they make reading difficult for lengthier passages.

Justified text lets you create newspaper-like alignment where the lines of text all have the same length. The browser inserts white space between the words of the text to adjust the alignment so both margins of the text align. Justify is not supported by all browsers, and different browsers might justify the text differently.

line-height: CSS allows you to specify either a length or percentage value for the line height, which is also known as leading, the white space between lines of text. The percentage is based on the font size. Setting the value to 150% with a 1em font size results in a line height of 1.5em.The following rule sets the line height to 150%:

p {line-height: 150%;}

The line-height property can increase the legibility of your text. Adding to the default line height inserts additional white space between the lines of text. On a display device, increasing the white space helps guide the user’s eyes along the line of text and provides rest for the eye.

text-decoration: Text decoration lets you underline text, an effect that has particular meaning in a hypertext environment. Your users know to look for underlined words as the indicators for hypertext links. Any text you underline appears to be a hypertext link. Except for text links, underlining is an inappropriate text style for a Web page.

The text-decoration property lets you remove the underlining from the element. The user commonly relies on underlining text to indicate a hypertext link. However, some Web sites choose to remove link underlining, indicating links with a color different from the standard text color. You can remove the underlining from your anchor elements with the following rule:

a {text-decoration: none;}

Users with sight disabilities can have trouble finding the links in your content if you choose to remove the underlining. Alternately, a user can override the author’s style rules by setting preferences in his or her browser or applying his or her own style sheet.

PTS: 1 REF: 213-215 | 219-220

5. Describe the list-style-type, list-style-image, and the list-style-position properties.

ANS:
list-style-type: The list-style-type property lets you customize the list marker to a variety of different values.

The list-style-type property lets you specify one of three types of markers for a list. You can choose a symbol, a numbering system, or an alphabetical system. CSS allows a wide variety of marker values. Remember to test support for these markers in different browsers.

list-style-image: The list-style-image property lets you easily attach an image to a list and have it repeated as the marker symbol.

The list-style-image property lets you replace the standard symbol with an image of your choice. The following code shows the style rule that attaches an image to a bulleted list:

ul {list-style-image: url(pawprint.gif);}

list-style-position: The list-style-position property lets you determine the placement of the list marker, either inside or outside the list-item content box. The default value is outside.

PTS: 1 REF: 231-234