Incremental leading : Journal : Mark Boulton

Highlighted by om19bao

ok, I got it. I’ve tried with a few fonts and at many sizes, and Firefox puts the baseline at 2/3 of the lineheight (approx.)

So let’s add ‘d’ which is the distance between the top of the containing element and the baseline.

d = 2a/3 = x + 2b/3

thus :

x = (2a/3) - (2b/3)
x = 2(a - b) / 3

where a and b are respectively the lineheight of the main content and the sidenote.

in this case; margin-top should be :

2(18px - 14.4px)/ 3 = 2.4 px

I’m letting it over to you to transform that to ems and to test it out :)

Highlighted by om19bao