<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>CSS Rhythmic Sizing</title>
    <meta name="description" content="" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="https://prateekjadhwani.github.io/favicon.ico">

    <link rel="stylesheet" type="text/css" href="//prateekjadhwani.github.io/themes/casper/assets/css/screen.css?v=1519915919465" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

    <link rel="canonical" href="https://prateekjadhwani.github.io/2017/07/13/C-S-S-Rhythmic-Sizing.html" />
    <meta name="referrer" content="origin" />
    
    <meta property="og:site_name" content="Prateek Jadhwani" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="CSS Rhythmic Sizing" />
    <meta property="og:description" content="There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties. See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen. If you see at the bottom" />
    <meta property="og:url" content="https://prateekjadhwani.github.io/2017/07/13/C-S-S-Rhythmic-Sizing.html" />
    <meta property="article:published_time" content="2017-07-13T00:00:00.000Z" />
    <meta property="article:tag" content="CSS3" />
    <meta property="article:tag" content="line-height-step" />
    
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="CSS Rhythmic Sizing" />
    <meta name="twitter:description" content="There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties. See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen. If you see at the bottom" />
    <meta name="twitter:url" content="https://prateekjadhwani.github.io/2017/07/13/C-S-S-Rhythmic-Sizing.html" />
    
    <script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Article",
    "publisher": "Prateek Jadhwani",
    "author": {
        "@type": "Person",
        "name": "Prateek Jadhwani",
        "image": "https://avatars0.githubusercontent.com/u/2219900?v=4",
        "url": "https://prateekjadhwani.github.io/author/prateekjadhwani/",
        "sameAs": "https://prateekjadhwani.github.io",
        "description": "Creator of Pancake CMS (https://pancake-cms.github.io)\r\nWeb Components and Polymer Fan boy.\r\nFrontend Developer by day; Gamer by night."
    },
    "headline": "CSS Rhythmic Sizing",
    "url": "https://prateekjadhwani.github.io/2017/07/13/C-S-S-Rhythmic-Sizing.html",
    "datePublished": "2017-07-13T00:00:00.000Z",
    "keywords": "CSS3, line-height-step",
    "description": "There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties. See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen. If you see at the bottom"
}
    </script>

    <meta name="generator" content="HubPress" />
    <link rel="alternate" type="application/rss+xml" title="Prateek Jadhwani" href="https://prateekjadhwani.github.io/rss/" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/atom-one-dark.min.css">
    
        <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
</head>
<body class="post-template tag-CS-S tag-line-height-step nav-closed">

    

    <div class="site-wrapper">

        


<header class="main-header post-head no-cover">
    <nav class="main-nav  clearfix">
        <a class="blog-logo" href="https://prateekjadhwani.github.io"><img src="/images/logo.png" alt="Prateek Jadhwani" /></a>
    </nav>
</header>

<main class="content" role="main">
    <article class="post tag-CS-S tag-line-height-step">

        <header class="post-header">
            <h1 class="post-title">CSS Rhythmic Sizing</h1>
            <section class="post-meta">
                <time class="post-date" datetime="2017-07-13">13 July 2017</time>  on <a href="https://prateekjadhwani.github.io/tag/CS-S/">CSS3</a>, <a href="https://prateekjadhwani.github.io/tag/line-height-step/">line-height-step</a>
            </section>
        </header>

        <section class="post-content">
            <div class="paragraph">
<p>There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties.</p>
</div>
<p data-height="300" data-theme-id="3991" data-slug-hash="WOPmgQ" data-default-tab="result" data-user="prateekjadhwani" data-embed-version="2" data-pen-title="line-step-height demo" class="codepen">See the Pen <a href="https://codepen.io/prateekjadhwani/pen/WOPmgQ/">line-step-height demo</a> by Prateek Jadhwani (<a href="https://codepen.io/prateekjadhwani">@prateekjadhwani</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<div class="paragraph">
<p>If you see at the bottom of the page, the text is a little bit displeasing to look at. If you are someone who like to see typography in a perfect way, that starts at the same line, and ends at the same height.</p>
</div>
<div class="paragraph">
<p>So, the question is what can be done make it look more pleasing? Well, there is a new css property for that. Its called the <code>line-height-step</code>. All you need to do is add <code>line-height-step</code> property to you container css with height more than that of the line height, and thats it</p>
</div>
<div class="paragraph">
<p>This is what it looks like with <code>line-height-step</code> set to <code>18pt</code>. Notice the end of the article. They all end on the same line.</p>
</div>
<p data-height="300" data-theme-id="3991" data-slug-hash="zzebeP" data-default-tab="result" data-user="prateekjadhwani" data-embed-version="2" data-pen-title="line-step-height demo2" class="codepen">See the Pen <a href="https://codepen.io/prateekjadhwani/pen/zzebeP/">line-step-height demo2</a> by Prateek Jadhwani (<a href="https://codepen.io/prateekjadhwani">@prateekjadhwani</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<div class="paragraph">
<p>If you are more interesting in this css property, feel free to read about it in <a href="https://drafts.csswg.org/css-rhythm/">this editor&#8217;s draft</a>.</p>
</div>
        </section>

        <footer class="post-footer">


            <figure class="author-image">
                <a class="img" href="https://prateekjadhwani.github.io/author/prateekjadhwani/" style="background-image: url(https://avatars0.githubusercontent.com/u/2219900?v&#x3D;4)"><span class="hidden">Prateek Jadhwani's Picture</span></a>
            </figure>

            <section class="author">
                <h4><a href="https://prateekjadhwani.github.io/author/prateekjadhwani/">Prateek Jadhwani</a></h4>

                    <p>Creator of Pancake CMS (https://pancake-cms.github.io)
Web Components and Polymer Fan boy.
Frontend Developer by day; Gamer by night.</p>
                <div class="author-meta">
                    <span class="author-location icon-location">United States</span>
                    <span class="author-link icon-link"><a href="https://prateekjadhwani.github.io">https://prateekjadhwani.github.io</a></span>
                </div>
            </section>


            <section class="share">
                <h4>Share this post</h4>
                <a class="icon-twitter" href="https://twitter.com/intent/tweet?text=CSS%20Rhythmic%20Sizing&amp;url=https://prateekjadhwani.github.io/"
                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                    <span class="hidden">Twitter</span>
                </a>
                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://prateekjadhwani.github.io/"
                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                    <span class="hidden">Facebook</span>
                </a>
                <a class="icon-google-plus" href="https://plus.google.com/share?url=https://prateekjadhwani.github.io/"
                   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
                    <span class="hidden">Google+</span>
                </a>
            </section>

        </footer>


        <section class="post-comments">
          <div id="disqus_thread"></div>
          <script type="text/javascript">
          var disqus_shortname = 'prateekjadhwani'; // required: replace example with your forum shortname
          /* * * DON'T EDIT BELOW THIS LINE * * */
          (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
          </script>
          <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
          <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
        </section>


    </article>

</main>

<aside class="read-next">
</aside>



        <footer class="site-footer clearfix">
            <section class="copyright"><a href="https://prateekjadhwani.github.io">Prateek Jadhwani</a> &copy; 2018</section>
            <section class="poweredby">Proudly published with <a href="http://hubpress.io">HubPress</a></section>
        </footer>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?v="></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js?v="></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js?v="></script> 
      <script type="text/javascript">
        jQuery( document ).ready(function() {
          // change date with ago
          jQuery('ago.ago').each(function(){
            var element = jQuery(this).parent();
            element.html( moment(element.text()).fromNow());
          });
        });

        hljs.initHighlightingOnLoad();
      </script>

    <script type="text/javascript" src="//prateekjadhwani.github.io/themes/casper/assets/js/jquery.fitvids.js?v=1519915919465"></script>
    <script type="text/javascript" src="//prateekjadhwani.github.io/themes/casper/assets/js/index.js?v=1519915919465"></script>

    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-65947202-1', 'auto');
    ga('send', 'pageview');

    </script>
</body>
</html>
