A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.md 4.8KB

4 år sedan
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>