← Back to Guide

Proportional Font-sizing test

Select a font-scale:


Proportional font-sizing is tricky for a few reasons. Firstly, we need to scale against the original font-size (in pixels) for each element, so we have to traverse the DOM tree twice — once to find font-size information and once to apply it.

Then, once applied, the font-size is "fixed" — it will no longer respond to changes in the parent. So class changes triggered by scripts won't work as expected for font-sizing.

The approach taken here mitigates the amount of behavioural modification as a result of font-size changes. Primarily, whenever the scale is unset (by choosing —), all font-size changes are reversed so that full inheritance can again cascade.

To see this:

  1. Set scale to 100% → no change
  2. Click 'Change body font size...' link → no change because font-sizes do not cascade
  3. Set scale to — → substantial increase to size of first para
  4. Set scale to 100% → no change because calculating off new baseline