CSS Instruction Enhanced by Objective Typography
-
Karl Stolley
- Associate Professor of Information Technology and Management
- Illinois Institute of Technology
- stolley.co
- kstolley@iit.edu
Main Finding
Students learn to apply a set of precise values to a handful of CSS properties according to the rules of objective typography.
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 aline-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 baseline-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
andline-height
Conclusion
- Anecdotally, students are better prepared to implement more advanced CSS
- Formal research and assessment is needed to determine the approach’s efficacy