Typography vertical rhythm

Using typography units to work out vertical rhythm

by kmturley

HTML

<div class="grid">
    <h1>Lorem ipsum dolor adipiscing</h1>
    <p>Vestibulum sed orci eu dolor dignissim molestie. Curabitur eu orci libero. Ut molestie porta tellus sed rutrum. Suspendisse tristique est cursus neque bibendum gravida.</p>
    <p>Aenean est lorem, bibendum vestibulum lectus non, varius tempus ligula. Morbi at nunc vel diam dictum eleifend et ut est. Sed sed justo rutrum, fringilla est a, iaculis nulla. Cras tincidunt magna quis ex interdum, sed malesuada purus rutrum. Quisque finibus odio tortor, id aliquam mi iaculis a.</p>
    <div class="panel">
        <h1>Longer heading which will go over two lines 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis turpis. Praesent pretium ex at purus gravida congue. Maecenas id convallis mauris.</p>
    </div>
    <h2>Longer heading which will go over two lines 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis turpis. Praesent pretium ex at purus gravida congue. Maecenas id convallis mauris.</p>
    <div class="panel">
        <h3>Longer heading which will go over two lines 3</h3>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis turpis. Praesent pretium ex at purus gravida congue. Maecenas id convallis mauris.</p>
        </div>
    </div>
    <h4>Longer heading which will go over two lines 4</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis turpis. Praesent pretium ex at purus gravida congue. Maecenas id convallis mauris.</p>
    <h5>Longer heading which will go over two lines 5</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis turpis. Praesent pretium ex at purus gravida congue. Maecenas id convallis mauris.</p>
    <h6>Longer heading which will go over two lines 6</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et...

CSS

/*
 * Simple Web Typography
 * base = 8px = 0.5em
 * font = 16px = 1em
 * line = 24px = 1.5em
 */

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    background-color: rgba(255,0,0,0.1);
    font-weight: normal;
    line-height: 1em; /* relative to font size */
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0 0 1rem 0; /* relative to font size */
}

h1 { font-size: 3.5em; } /* 16px x 3.5 = 56px */
h2 { font-size: 3em; }   /* 16px x 3   = 48px */
h3 { font-size: 2.5em; } /* 16px x 2.5 = 40px */
h4 { font-size: 2em; }   /* 16px x 2   = 32px */
h5 { font-size: 1.5em; } /* 16px x 1.5 = 24px */
h6 { font-size: 1em; }   /* 16px x 1   = 16px */

p {
    background-color: rgba(0,0,255,0.1);
}

img {
    display: block;
    margin: 0 0 1rem 0;
    max-width: 100%;
    max-height: 30rem;
}

/* panel */

.panel {
    background-color: rgba(0, 255, 255, 0.1);
    margin: 0 0 1rem 0;
    padding: 2em;
}

.panel *:last-child {
    margin-bottom: 0;
}

/* grid lines */

 .grid {
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.24, transparent), color-stop(0.25, rgba(0, 0, 0, .3)), color-stop(0.26, rgba(0, 0, 0, .3)), color-stop(0.27, transparent), color-stop(0.74, transparent), color-stop(0.75, rgba(0, 0, 0, .3)), color-stop(0.76, rgba(0, 0, 0, .3)), color-stop(0.77, transparent), to(transparent));
    background-image: -webkit-linear-gradient(transparent 24%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .3) 75%, rgba(0, 0, 0, .3) 76%, transparent 77%, transparent);
    background-image: -moz-linear-gradient(transparent 24%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .3) 75%, rgba(0, 0, 0, .3) 76%, transparent 77%, transparent);
    background-image: -o-linear-gradient(transparent 24%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .3)...