Web Design & Architecture -- LIS 9723 logo

Formatting hints



Exercise 4: Scannable Text

Rewrite and format text for the web

Your task is to fix this text, so that it is:

  • cut by half
  • formatted for the screen
  • easy to scan
  • written for the web.

You can edit the text down as much as you'd like. Keep in mind all the points we talked about in the lecture.


Make this visually interesting using type. Pick a typeface (or two) from Google fonts and embed it in your page.

Mark up the CSS so that you're using a percentage/em-based method of measuring your text.

How to set in a readable column width

  1. Select all (cmnd+a, ctrl+a)
  2. Go to the Insert menu ..>Layout Objects...>Div Tag
  3. (Wrap around selection) and then click on new CSS rule
  4. Make it an ID, call it #mainbox, click ok
  5. Under the Box category, pick a width of 500-600px (you decide)
  6. Under margins, use the pulldown to make your left and right margins "auto"
  7. Click OK, then click OK again.

Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner