Main Finding

Students learn to apply a set of precise values to a handful of CSS properties according to the rules of objective typography.

QR Code for pre-print paper

Click or scan the QR code to access the pre-print paper.

Page Details

Problem

  • Where to start teaching CSS?
  • What values and units to use?
  • When is a stylesheet “finished”?

Method and Approach

  • Introduce the rules of objective typography, applied to a handful of basic typographic properties
  • Determine two baseline values: a font-size and a typographic grid via a line-height value that is repeated throughout the stylesheet
  • Establish a modular scale for making predictable adjustments to the font-size, which often requires setting multiples or fractions of the base line-height
  • Convert absolute, pixel values to accessible em values as the stylesheet nears completion

Experiences

  • Students need constant reminders and review about working from mobile-scale viewports first
  • Students should be reminded that pixel values are placeholders
  • Students benefit from multiple demonstrations that reinforce the relationship and difference between font-size and line-height

Conclusion

  1. Anecdotally, students are better prepared to implement more advanced CSS
  2. Formal research and assessment is needed to determine the approach’s efficacy