February 2 – Horizontal Rhythm

Rebecca will not be in class today because of a family emergency. Although there is not class, there is still work to be done in preparation for Monday. For class today (Friday) you should have the mobile design for your webpage implemented. Use class time today to start exercise 7:

  1. Create a copy of exercise 6 and use the copy to complete this exercise.
  2. Add space between your paragraphs by adding the property margin-bottom to the p selector in your stylesheet. Em would be the appropriate unit.
  3. Invent a name for the website and add it to the header of the webpage.
  4. If you used a sans-serif typeface for your body text, find a companion serif typeface to use for your headings. Likewise, if you used a serif typeface for your body text, find a companion sans-serif typeface to use for your headings. Use your text for guidance on how to choose a second typeface (a similar x-height is necessary). Implement your new heading styles.
  5. Use the CSS-Tricks Almanac to look up the following CSS properties that impact horizontal rhythm: letter-spacing, kerning, text-align, text-indent, hanging-punctuation. Use this information to improve the horizontal rhythm of your headings and your body text on your small screen design

Help each other out. Ask the advance students for guidance if you get stuck. If no one can help, post a question on Slack and I’ll help you out.

Homework

  • Read Chapters 7-8 in Better Web Type
  • Finish exercise 7.