Hello, Tim Brown here. This document is about a Flexible Typesetting exercise on CodePen.

<aside> 🌐 This page is public.

</aside>

The exercise, for reference

Open on CodePen for the best experience.

https://codepen.io/timbrown/full/jgVgGL

Wanted

• Ideas about how to improve the exercise
• Feedback from educators
• Screenshots of the exercise in use by students
• Help from developers (scroll down to Status)

Student instructions

1. Open this pen in several browser tabs.
2. In each browser tab, make adjustments to any properties you wish using the controls. Take your time. Try to make it look good.
3. Toggle between browser tabs, or put windows side by side, and review. Note the numbers below the paragraph.

Videos

https://www.youtube.com/watch?v=-Qg7sJOLuvE

Educator notes

• Goal: Help students develop their sense of balance in a text block.
• Property values are purposely unlabeled in the controls area, so that students focus more on how the text feels than on the numbers.
• Discussion ideas:
  • How visually similar were each of your solutions? Compare as individuals, compare with a partner.
  • Which properties feel most important to get right?
  • Which properties seem to cause the most disruption?
  • Relationship among font size, measure, and line spacing
  • Relationship among line spacing, word spacing, and letter spacing
  • Relationship between font size, line spacing, and margins
  • What do you think would happen if you changed the font?

Status

Credits

• Thanks to Thomas Jockin, Maurice Meilleur, Oliver Oike, and Anselm Dästner for encouragement.