skip to content

Chapter 7: Typography


Contents of Book Chapter

  • Typography Basics
  • HTML Text
  • Graphic Text
  • Text and Accessibility

Resources

back to top...

Exercises
(mouseover answer boxes to reveal answers)

Check Your Reading Comprehension

  • Which of the following should always use relative type sizing?
    • body text
    • display text
    • both body and display text
  • The typography term “leading” refers to
    • the space between letters within a word.
    • the space between words in a sentence.
    • the empty space between horizontal lines of text.
    • the space at the end of a sentence, after the period.
  • The term for adjusting the space between a specific pair of letters that have parallel strokes is
    • tracking
    • hinting
    • kerning
    • mirroring
  • Choose all types of justification that are generally acceptable for paragraph (body) text displayed on a computer screen.
    • fully justified
    • justified right, ragged left
    • justified left, ragged right
    • centered
  • Specify that an element should be all in uppercase using CSS.
    • {capitalization:uppercase;}
    • {capitalization:capitalize;}
    • {text-transform:uppercase;}
    • {text-transform:capitalize;}
  • Letter spacing can be controlled in CSS using which measurements
    • pixels
    • ems
    • both pixels and ems
  • Leading can be controlled in CSS using which measurements
    • ems
    • percentages
    • pixels and percentages
    • pixels, ems, and percentages
  • Name the two screen-optimized typefaces Microsoft hired Matthew Carter to design, and also state for each whether it’s a serif or sans serif typeface.
  • Georgia (serif) and Verdana (sans serif)

  • The term for designing a typeface with larger and more uniform spacing between letters, which improves legibility on the screen.
  • hinting

  • The term used to refer to the width of an uppercase “M”, used in CSS measurements.
  • em

  • Should we use the heaviest anti-aliasing on larger sizes of type, or smaller sizes?
  • larger sizes of type

  • Write a CSS style to format text as directed.

back to top...

Critical Thinking Exercises (long answer)

Use vocabulary and concepts from the text to answer the following questions. Provide examples to document your explanation.

back to top...

Hands-on Exercises

  • Pick an existing web site on the web and evaluate it based on the typography checklist earlier in the chapter. What did the designers do right, and what did they do wrong?
  • Surf the web to find a site that uses typography well, and another one that uses it poorly. Compare and contrast what the outstanding site did well that the other site didn’t. What would you do to redesign the site that uses typography poorly?
  • Use the checklist at the end of the chapter to analyze once again the same public access web site you analyzed for earlier chapters. Compare your latest analysis with your earlier analyses. Have you become more skilled in analyzing web site design?
  • After completing any of the previous three analysis questions, trade your analysis with a peer. Discuss the similarities and differences in your analyses. When you came to different conclusions, each of you should explain how you came to your conclusions.
  • Create a single web page to show a “sampler” of HTML type characteristics. Use CSS whenever possible to create the effects. Illustrate the following:
    • At least two typefaces.
    • At least two text sizes.
    • Left, right, and center alignment.
    • At least two colors.
    • Bold, italic, underline, and strikeout.
    • A paragraph of pre-formatted text.
    • CSS to change lower-case text into upper-case text.
    • At least one non-standard letter-spacing, one separate non-standard word spacing, and one non-standard leading.
    • Indented text.
    • Two bulleted lists, one using non-default HTML bullet and one using a graphic bullet of your choice.

back to top...

Ongoing Case Study Exercise

Building upon your ongoing project, choose two different typefaces for both body and display type for your ongoing case study. Create an on-screen mock-up for each of the four possible combinations of body and display type (i.e., body typeface 1 and display typeface 1, body typeface 2 and display typeface 1, etc.). Choose the combination you think best reflects the purpose of your site and write a paragraph justifying your choice. Show all four mockups to your instructor and discuss your final choice.

back to top...


| Home | General | 1: Introduction | 2: Site Analysis | 3: Navigation |
| 4:Layout | 5: Color | 6: Graphics | 7: Typography | 8: Forms |