Molten Leading

Tim Brown wrote a great post on a concept he calls “molten leading”. He points out that, in a fluid grid, a text block’s width changes without its leading or font size changing proportionately, creating a typographic imbalance. “Molten leading” would fix this by using Javascript to adjust the leading dynamically as the block’s width changes. It’s a good solution to one of the fluid grid’s biggest problems.

The question is how to implement it. Tim went through some ideas in his post and Mat Marquis posted a working implementation on Github.

The problem is that this implementation requires the designer to manually provide a minimum and maximum width and line-height for each element, which makes the technique basically impossible to apply across an entire site. I think there’s a simpler way to do it.

To calculate leading, we only really need to know two things: first, the measure of the text block (i.e. its width in ems), and second the typeface. Looking at the width in ems simultaneously accounts for the block’s pixel width and the text size. And taking into account the typeface allows us to, for example, give more generous leading to fonts with higher x-heights.

Javascript can easily calculate a block’s current em width (element’s pixel width divided by its text size in pixels), so all we need to do is tell Javascript how to account for its typeface, which I think we can do by describing the typeface with one or two constants. So we don’t need to define minimum and maximum widths and leadings at all!

I imagine that, for each typeface, the designer would provide:

  1. a base width—​the width (in ems) at which the text should be “set solid” (i.e. have a line-height of 1em)
  2. a growth rate—​the amount of leading (in ems) that should be added for each em added to the width of the text block

Then the jQuery pseudocode for calculating the leading of a given element would be:

//find proper constants
var constants = allConstants[$(elem).css('font-family')];
var baseWidth  = constants['baseWidth'];
var growthRate = constants['growthRate'];

//the line below prevents negative leading…arguably it’s
//not needed as media queries should prevent the width
//from ever getting so narrow (unless it’s intentional).
if(elementEmWidth <= baseWidth]) {return 1; }

return 1 + ((elementEmWidth-baseWidth)*growthRate);

Using this approach, only two numbers need to be provided for each font in your layout and then molten leading can be applied to every element. (Though someone should test the performance impact of that…it might be too big, in which case the effect would have to be scoped somehow.)

As a final note, the base width constant could be made optional. Doing so would require defining an average base width and an average growth rate and then guessing this font’s base width by multiplying the average base width times (this font’s growth rate/average growth rate). I was just too lazy to figure out what those averages should be :)