larlet-fr-david-cache/cache/4ac7753495665742f9e59432538fb920/index.md

title: Proportional leading
url: https://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/
hash_url: 4ac7753495665742f9e59432538fb920

<p>msnbc.com’s article pages are divided into two area types. The first, it’s header navigation and branding feels right with its fixed-width layout. The second — the article content getting most the discussion, and the one redesigned for readability — cries out to be fluid.</p>

<p class="entry-caption">
<img src="//stuffandnonsense.co.uk/content/img/2010-06-30-1.jpg" alt=""/> <br/>
msnbc.com’s article page redesign</p>

<p>Browsers that support <code>min-width</code> and <code>max-width</code> the article content could easily be made fluid, for example (using my content element naming).</p>

<pre><code>.content {
width : 80%;
min-width : 640px;
max-width : 1200px;
margin : 0 auto; }</code></pre>

<p>Even the site’s fixed-width assets, including floated images, videos and other content could be made flexible using Ethan Marcotte’s solution for <a href="http://unstoppablerobotninja.com/entry/fluid-images/">fluid images</a></p>

<pre><code>img,
object {
max-width : 100%; }</code></pre>

<p>Which brings me to my other problem. msnbc.com's leading (line-height) of its body copy is a little too open for my taste and, in a fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts.</p>

<p><strong>Type tip: As the width of the measure (line width) becomes wider, leading (line-height) should be increased to aid readability.</strong></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>

<p>I won’t attempt to sell the case for Media Queries. Ethan’s <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a> does that better than I ever could, and has already inspired two of the best designers I know, <a href="http://colly.com">Simon Collison</a> and <a href="http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign">Jon Hicks</a> to make their designs responsive. Instead I’ll simply add my two-penneth.</p>

<h3>Proportional leading</h3>

<p>First, the <a href="//stuffandnonsense.co.uk/content/demo/2010/06/30/index.html">Proportional Leading</a> example.</p>

<p>Next the HTML, nothing more than two sections, <code>.content-main</code> and <code>.content-sub</code>. One’s floated left, the other right.</p>

<pre><code>section.content-main {
float : left;
width : 57%; }

section.content-sub {
float : right;
width : 38%;  }</code></pre>

<p>Finally the CSS3 Media Query magic. As the measures in the main and sub content areas are different, we’ll set individual line-height units for each.</p>

<pre><code>.content-main {
line-height : 1.8; }

.content-sub {
line-height : 1.6; }</code></pre>

<p class="entry-caption">
<img src="//stuffandnonsense.co.uk/content/img/2010-06-30-2.jpg" alt=""/> <br/>
Default line-height values (above)</p>

<p>Next decide on the increments where the leading should shift to a new value. We’ll be resetting line-height values in three steps when the maximum browser width is 1000px, 900px and 800px.
(You’ll need to adjust these values to suit your own designs.)</p>

<pre><code>@media all and (max-width : 1000px) {
.content-main {
line-height : 1.6; }

.content-sub {
line-height : 1.5; }
}</code></pre>

<p class="entry-caption">
<img src="//stuffandnonsense.co.uk/content/img/2010-06-30-3.jpg" alt=""/> <br/>
(max-width : 1000px)</p>

<pre><code>@media all and (max-width : 900px) {
.content-main {
line-height : 1.5; }

.content-sub {
line-height : 1.4; }
}</code></pre>

<p class="entry-caption">
<img src="//stuffandnonsense.co.uk/content/img/2010-06-30-4.jpg" alt=""/> <br/>
(max-width : 900px)</p>

<pre><code>@media all and (max-width : 800px) {
.content-main {
line-height : 1.4; }

.content-sub {
line-height : 1.3; }
}</code></pre>

<p class="entry-caption">
<img src="//stuffandnonsense.co.uk/content/img/2010-06-30-4.jpg" alt=""/> <br/>
(max-width : 800px)</p>

<p>Using a contemporary browser, one that supports CSS3 Media Queries, re-size the window and watch the leading change. The wider the measure becomes, the more open the leading.</p>

<p>Try <a href="//stuffandnonsense.co.uk/content/demo/2010/06/30/index.html">Proportional Leading</a> on your own fluid, responsive designs and let me know what you think. Oh, and don’t forget, there’ll be plenty more like this in <a href="http://hardboiledwebdesign.com">Hardboiled Web Design</a>.</p>

<h4>Update</h4>
<p>See also Ethan Marcote’s <a href="http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html">responsive typesetting</a> example from his A List Apart article where he changes font sizes in response to changes in the measure (but doesn’t also adjust line-height.)</p>