davidbgk
/
larlet-fr-david-cache

title: Molten leading (or, fluid line-height)
url: http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
hash_url: 2f355b7b880ea4227d76112849b58eb2

<div class="copy"><p><img src="http://nicewebtype.com/notes/wp-content/uploads/2012/02/ml-widened-flh.png" alt="" title="Molten leading" class="alignnone size-full wp-image-2781"/></p>
<p class="nl"><em>This is not a demo. I’m only explaining a need as I see it. I don’t have the JS chops to make it real. Maybe you do? — <a href="http://twitter.com/nicewebtype">@nicewebtype</a> / <span id="enkoder_0_46686665">email hidden; JavaScript is required</span></em></p>
<h3>Updates</h3>

<h3>Original post</h3>
<p class="nl">When a responsive composition meets a viewport, there are different ways to fill space. What interests me most here is a fundamental triadic relationship in typesetting — that of a text’s <strong>font size, line height, and line length</strong>. Adjusting any one of these elements without also adjusting the others is a recipe for uncomfortable reading, which is one reason designers have such a difficult time with fluid web layout.</p>
<p class="nl"><img src="http://nicewebtype.com/notes/wp-content/uploads/2012/02/ml-scaled.png" alt="" title="ml-scaled" class="alignnone size-full wp-image-2780"/></p>
<p class="nl">One way to fill space is to scale text while keeping its proportions intact. This preserves the size/leading/measure relationship, and can work really well for some experiences (see Mark Hurrell’s post on <a href="http://blog.responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence">orientation and fluid grids</a>). But an increase in font size can be jarring to readers; A larger font size affects reading distance comfort. If I were to rotate my iPad while reading, and the text scaled up, I can imagine needing to hold the device a few inches farther away as a result. This is not what designers want to have happen to text intended for reading.</p>
<p class="nl"><img src="http://nicewebtype.com/notes/wp-content/uploads/2012/02/ml-widened.png" alt="" title="ml-widened" class="alignnone size-full wp-image-2782"/></p>
<p class="nl">Another way to fill space is to use fluid widths. The problem in this case is that CSS <code>line-height</code> is tied to <code>font-size</code>, which is rooted in browser <a href="http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/">font sizing</a> and <a href="http://www.alistapart.com/articles/a-pixel-identity-crisis/">environmental resolution</a>, while line length is based on <code>width</code>, which is rooted in viewport dimensions. So a carefully balanced relationship among font size, line height, and line length easily breaks down. We end up with line lengths that feel too long, font sizes that seem too small, line spacing that feels too tight or loose.</p>
<p class="nl"><img src="http://nicewebtype.com/notes/wp-content/uploads/2012/02/ml-widened-flh.png" alt="" title="Molten leading" class="alignnone size-full wp-image-2781"/></p>
<p class="nl">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 <code>min-</code> and <code>max-width</code>. I made a <a href="http://nicewebtype.com/demos/molten-leading/">simple page</a> to visualize how I’m thinking about this. <em>Molten leading would maintain a specific font-size while adjusting line-height based on width</em>. In other words, I would essentially like to tween a paragraph from this:</p>
<pre><code>width: 15em;&#13;
line-height: 1.3;</code></pre>
<p>To this:</p>
<pre><code>width: 36em;&#13;
line-height: 1.4;</code></pre>
<p>So that it would be possible to find line height dynamically at any given point in between:</p>
<pre><code>width: 30em;&#13;
line-height: 1.371428571;</code></pre>
<p>To find that <code>line-height</code> value, I used this formula: ((current width − min-width)/(max-width − min-width)) × (line-height − min-line-height) + min-line-height = line-height. With actual values, that’s: ((30em−15em)/(36em−15em)) × (1.4−1.3) + 1.3 = 1.371428571.</p>
<p>What I’m not sure about is how to get the min/max widths of an element that are needed for this formula. If CSS authors routinely defined elements’ <code>min-width</code>, <code>max-width</code>, <code>line-height</code>, and some kind of <code>min-line-height</code>, that’d of course be ideal for this:</p>
<pre><code>p {&#13;
  max-width: 36rem;&#13;
  min-width: 15rem;&#13;
  line-height: 1.4;&#13;
  -js-min-line-height: 1.3;&#13;
  }</code></pre>
<p>But that’s not always practical. Often, the width limits of a given text block will be determined by percentage-based inheritance (66% of the parent element, which is 85% of its parent element…). It’d take some box model math to identify those narrow/wide limits. A script would have to figure out, for a given element, how wide/narrow can this grow?</p>
<p>If it’s possible to glean that information from existing CSS rules, then the only thing designers would need to define explicitly is a minimum line height. That value could be passed as a function argument, or maybe found in the CSS by looking for that <code>-js-min-line-height</code> rule in my example above.</p>
<p>This feels like a step toward more natural typographic behavior on the web. I’m just not sure where to go from here.</p>
<p class="nl">Also, for what it’s worth, Andy Clarke <a href="http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/">talked about this in 2010</a>. His solution was to use media queries:</p>
<blockquote><p>Type tip: As the width of the measure (line width) becomes wider, leading (line-height) should be increased to aid readability.</p>
<p>How can we solve this, and adjust the amount of leading as the width of a browser window changes? With CSS3 Media Queries.</p></blockquote>
<p>What I’m talking about is augmenting CSS with <a href="http://nicewebtype.com/notes/2012/01/27/breakpoints-and-range-rules/">range rules</a> (effectively, min/max line-height) that don’t yet exist, but should for the sake of fluidity.</p>
</div>