Unitless Line Heights

by Aubrey Taylor

HTML

<div class="container-1">
    <header class="container-header">
        <h2 class="headline">Unit-less Line Height Values</h2>
        <p class="subhead">Play nice with child elements.</p>
    </header>
    <p class="copy">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
</p>
</div>

<hr class="seperator">

<div class="container-2">
    <header class="container-header">
        <h2 class="headline">Non-unit-less values</h2>
        <p class="subhead">Require a lot of resetting / overriding to match.</p>
    </header>
    <p class="copy">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
</p>
</div>

CSS

/* RESETS */

* {
    z-index: 1;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

html {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.2;
}

body {
    padding: 30px;
}

/* SETUP */

.seperator {
    margin: 30px 0;
}

.headline {
    font-size: 50px;
}

.subhead {
    font-size: 18px;
    color: #999;
}

.copy {
    font-family: serif;
    font-size: 16px;
}

/* LINE HEIGHT DEMO STYLES */

/* container-1 uses unit-less values
   - we specify the 1.2 (even though this value is already inherited) to be explicit
   - now we only have to adjust the headline to tighten up the spacing */

.container-1 {
    /* set line height globally for this container */
    line-height: 1.2;
}
.container-1 .headline {
    /* adjust headline */
    line-height: 0.8;
}

/* container two specifies line heights in pixels
   - this requires that we now go through and re-calculate every child-element manually */

.container-2 {
    /* set line height globally for this container */
    line-height: 60px;
}
.container-2 .headline {
    /* tighten up headline to 0.8 equiv */
    line-height: 40px;
}
.container-2 .subhead {
    /* reset line-height for subhead to 1.2 equiv */
    line-height: 21px;
}
.container-2 .copy {
    /* reset line-height for copy to 1.2 equiv */
    line-height: 19px;
}