Formatting Text

reading assignment:

Typographic Web Design:  : chapter 7 and 8

Vertical Spacing and Proximity

  • We read things that are near each other as belonging together.
  • Small space between items make them feel together, large spaces between make them feel apart.
  • Spacing needs contrast. If all spacing is 12pts, the reader won’t be drawn to certain areas.
  • Use increments of your line height to create spacing: if your line height is 18pt, other spacing could be 6, 12, 24, 36, etc.  (increments of 6)

Headings : Hierarchy and Similarity

  • Visual hierarchy and similarity help guide readers from sections to section.
  • The similarity of the titles helps the reader jump from section to section, ignoring text and allowing them to scan.
  • Each heading level should be subordinate to the one above it.
  • Use consistently.
  • Use contrast to establish hierarchy.

Exercise: Create a type and font study in InDesign.

Continue developing your site plan for unit 2. Format your font study similar to pages 3-8 of this pdf.

Format pages as follows:

  1. Make all of your content fit on one page unformatted.
  2. Show three display fonts. (Fill the page.)
  3. Choose the display font that works best with your title. Pair it with three possible text fonts, shown in three columns.
  4. Format your display and text fonts for readability. Consult with one other person in the class to see if they agree with compatibility of your fonts and readability.
  5. Using style sheets in InDesign, format your entire content on as many pages as needed. Create styles for each different type format. At minimum, you should have h1, h2, h3, p, with classes for text defining the top 2 characteristics.
  6. Adjust your styles to create two thing:
    –Vertical spacing and proximity that group the text logically
    –Headings that create hierarchy and allow the reader to scan

 

Create a file, index.html in your unit2 folder with the following:

  • Format a sampling of your text, including title and one item with it’s top 2 characteristics, description, and list of characteristics.
  • Install and use the display and text font that you have chosen.
  • Adjust text settings so that it is legible– adjust size, line-height, paragraph spacing, line length, etc.
  • It should look like this: fonts.html
    *note: I have labeled my file fonts.html, but yours will be index.html.