Chapter 7 - Web Typography

REPUBLIC OF NICARAGUA

 

Up

Chapter 7 Review Questions

1.   What is the default browser font?

Times (or Times New Roman)

2.   What does the browser do if you specify a font that is not stored on a user’s computer?

If you design your pages using a font that your user does not have installed, the browser defaults to Times on a Macintosh or Times New Roman on a PC.

3.   What are two drawbacks to the use of graphics-based text?

You add download overhead with every additional graphic, and including text as graphics means users cannot search for that text.

4.   What are the three types of CSS measurement units?

Absolute units, such as points; relative units, such as pixels; and percentages of the base font

5.   What is the best destination for absolute units of measurement?

If you are designing a style sheet for printed media, you can use absolute units of measurement, such as points or centimeters.

6.   Why would you use relative or percentage values for a Web page?

When you are designing a style sheet for a Web page, you can use relative measurement values that adapt to the user’s display type, such as ems or pixels.

7.   What is the size of the em?

The width of the capital M in the current font, usually the same as the font size

8.   What determines the size of a pixel?

The size of a pixel on the current monitor

9.   What is the advantage of the generic font families?

Generic font familiar help make your pages appear more consistent because they are more likely to match what users have on their systems

10. Write a font-family substitution string that selects Arial, Helvetica, or any sans-serif font for a <p> element.

p {font-family: arial, helvetica, sans-serif;}

11. Write a style rule for an <h2> element that specifies bold text that is twice the size of the default font size.

h2 {font-family: arial, helvetica, sans-serif;}

    font-size: 2em;

12. Write a rule specifying that <p> elements appear as 14-point text with 20-point leading.

p { font-size: 14pt; line-height: 20pt;}

13. Write a rule specifying that <i> elements are displayed in red only when they appear within <p> elements.

14. Write a rule defining a division named "note." Specify 12-point bold Arial text on a yellow background.

.note {font-family: arial, helvetica, sans-serif;

       font-size: 12pt;

       font-style: bold;

       bgcolor: yellow;

15. What three white-space areas can you affect with style rules?

Leading, alignment, letter spacing, word spacing

16. Write a style rule to create a white-on-black reverse <h1> heading.

h1 {color: #ffffff; background-color: black;}

17. Write a style rule for a <p> element with a 24-point hanging indent and a 30-pixel margin on the left and right sides.

p {text-indent: -24pt; margin: 30px;}

18. Rewrite the following rule using the font shortcut property:
blockquote {font-style: italic; font-size: 12pt; line-height: 18pt; font-family: times, serif;}

blockquote {font: italic 12pt/18pt times, serif;}

19. What is a benefit of increasing the standard text line height?

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 the computer monitor, increasing the white space helps guide the user’s eyes along the line of text and provides rest for the eye.

20. What is the size of the text indent and line height in the following style rule?

p {font-size: 12pt; text-indent: 3em; line-height: 150%;}

Text indent is 3 ems, or 36 points and the line height is 1.5 times larger than 12 points, or 18 points

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

R. Stewart Braswell, Webmaster
Last Updated: 20 April 2012