A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. title: Proportional leading
  2. url: https://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/
  3. hash_url: 4ac7753495665742f9e59432538fb920
  4. <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>
  5. <p class="entry-caption">
  6. <img src="//stuffandnonsense.co.uk/content/img/2010-06-30-1.jpg" alt=""/> <br/>
  7. msnbc.com’s article page redesign</p>
  8. <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>
  9. <pre><code>.content {
  10. width : 80%;
  11. min-width : 640px;
  12. max-width : 1200px;
  13. margin : 0 auto; }</code></pre>
  14. <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>
  15. <pre><code>img,
  16. object {
  17. max-width : 100%; }</code></pre>
  18. <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>
  19. <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>
  20. <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>
  21. <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>
  22. <h3>Proportional leading</h3>
  23. <p>First, the <a href="//stuffandnonsense.co.uk/content/demo/2010/06/30/index.html">Proportional Leading</a> example.</p>
  24. <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>
  25. <pre><code>section.content-main {
  26. float : left;
  27. width : 57%; }
  28. section.content-sub {
  29. float : right;
  30. width : 38%; }</code></pre>
  31. <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>
  32. <pre><code>.content-main {
  33. line-height : 1.8; }
  34. .content-sub {
  35. line-height : 1.6; }</code></pre>
  36. <p class="entry-caption">
  37. <img src="//stuffandnonsense.co.uk/content/img/2010-06-30-2.jpg" alt=""/> <br/>
  38. Default line-height values (above)</p>
  39. <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.
  40. (You’ll need to adjust these values to suit your own designs.)</p>
  41. <pre><code>@media all and (max-width : 1000px) {
  42. .content-main {
  43. line-height : 1.6; }
  44. .content-sub {
  45. line-height : 1.5; }
  46. }</code></pre>
  47. <p class="entry-caption">
  48. <img src="//stuffandnonsense.co.uk/content/img/2010-06-30-3.jpg" alt=""/> <br/>
  49. (max-width : 1000px)</p>
  50. <pre><code>@media all and (max-width : 900px) {
  51. .content-main {
  52. line-height : 1.5; }
  53. .content-sub {
  54. line-height : 1.4; }
  55. }</code></pre>
  56. <p class="entry-caption">
  57. <img src="//stuffandnonsense.co.uk/content/img/2010-06-30-4.jpg" alt=""/> <br/>
  58. (max-width : 900px)</p>
  59. <pre><code>@media all and (max-width : 800px) {
  60. .content-main {
  61. line-height : 1.4; }
  62. .content-sub {
  63. line-height : 1.3; }
  64. }</code></pre>
  65. <p class="entry-caption">
  66. <img src="//stuffandnonsense.co.uk/content/img/2010-06-30-4.jpg" alt=""/> <br/>
  67. (max-width : 800px)</p>
  68. <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>
  69. <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>
  70. <h4>Update</h4>
  71. <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>