Main Finding

The typographic grid makes CSS instruction systematic. Students learn to visually and mathematically verify the right-hand side values of CSS properties.

QR Code for pre-print abstract

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

Poster Details

Problem

  • Compared to HTML and JavaScript, CSS is an unstructured free-for-all
  • CSS instruction can devolve into a sight-seeing tour of properties and their effects
  • Values for CSS properties are often selected without any reasoned basis

Solutions

  • The rules of objective typography provide external, consistent constraints on a handful of basic typographic properties
  • Students begin by assessing a typeface for its most readable size at a given viewport, starting with mobile scales
  • Students then establish a typographic grid via a line-height value that is repeated throughout the stylesheet

Conclusion

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