February 5 – Vertical Rhythm

  • Review Questions
  • Q & A
  • HTML: unordered lists, ordered lists, list items, span
  • CSS: box model, media query, list-style
  • Vertical Rhythm: baseline grid (applied to the vertical space on the site), chunking, modular scale (applied to the type sizes)
  • Modular Scale Tools: ModularScale, TypeScale

Homework

  • Exercise 8: Create a copy of the exercise 7 folder for this exercise. In this exercise you will
    1. Add media queries where your design falls apart (usually because the line length gets too long). In each media query consider the font-size, line-height and line length of both the paragraph and heading text.
    2. Implement any necessary changes to the horizontal rhythm in media queries (letter-spacing, kerning, text-align, text-indent, etc.)
    3. Improve the vertical rhythm of the page across screen sizes by implementing a baseline grid, chunking and a modular scale.
    4. Adjust the page composition to take advantage of the visual interest that asymmetry brings.
  • Prepare for critique next class.