Gareth Redfern developer, cyclist & coffee lover

Fluid Line Height (Molten Leading)

Posted by Gareth Redfern
Category: css

This week I listened to Tim Brown on The Big Web Show where he gave his thoughts on Typography on the web. I have admired Tim’s work for some time and especially enjoyed his talk at Build Conference. Tim discusses many aspects of Typography on the web but one point that he highlights is the need to look at fluid line height when designing responsive websites. This is something I gave some thought to whilst designing my site. Currently we can adjust layouts for available horizontal screen sizes by creating a fluid width layout but we haven’t quite discovered the possibilities of vertical adjustments, e.g. line-height. There needs to be a CSS spec. that enables us to set the line height using a min/max line-height, but nobody has come up with a pure CSS solution or standard that can be used. In Tim’s article he states that:

What we need is a fluid way to set line height. Web designers should be able to define line height as a range, like we do with min-width and max-width. I made a simple page to visualise how I am thinking about this. Molten leading would maintain a specific font-size while adjusting line-height based on width.

There is however two JavaScript solutions called Molten Leading and jQuery-minLineHeight. Although these demonstrate the feasibility they are not ideal as we are having to rely on JavaScript polyfills rather than a pure CSS solution, but I am sure it will not be long before something gets drafted into the spec.

I look forward to following this and will update this post as and when things progress.