BASELINE

Creating vertical rhythm on the web

Welcome typophiles.

If you truely need baseline in your web design, this is a very simple cross-browser friendly method with very little math. It is not font-dependent and you can even mix and match fonts within a paragraph. No searching through font metrics or tweaking CSS values by hand. No javascript or javascript dependencies needed. Use whatever units of measure you want: pts, pxs, rems... it's up to you.

Step 1.

Create or use a baseline font

This task is pretty painless, thanks to FontSquirrel's awesome generator. You can also skip this whole task and use my one character baselined utility font Baseline Em.

Essentially we are shifting our em-height metrics such that our descender is not below our baseline.

Step 2.

The Markup

For each block text element – h1, h2, h3, h4, p, etc – you will need an encapsulating inline-element.

    <p> <!-- Block element -->
      <span> <!-- Encapsulating inline-element -->
          Leave it better than you found it. -Robert Baden-Powell
      </span>
    </p>

Step 3.

The CSS

To achieve vertical rhythm and leading on the web, we want our fonts to sit at the bottom of our line-height. We set our block's font size to a multiple of the grid and the line-height to match it. Using our baselined font on the block-level element will force our baselines to the bottom of our line-height. Then we collapse the line-height (setting it to zero) of any text within our inline element. Set your inline elements to whatever font or font-size you'd like. 

    p {
      font-family: "Baseline Em"; /* Baseline font for block containers */
      font-size: 40px; /* Multiple of your grid */
      line-height: 1em; /* Line-height matches set font-size */
    }
    p * {
      line-height: 0; /* Collapses our inline box so our line box is our strut from the paragraph */
    }
    p span {
      font-family: Anything you want here;
      font-size: Anything you want here; /* works best if less than 2x your block's line-height */ 
    }

Update!

Coming soon

Working on a full write-up as to how this works :) .

Thanks!

Shout-outs

FontSquirrel: I have to thank FontSquirrel for making such an awesome tool! Major props to them. I would also love to buy your merch if you sold lady tanks in purple (*hint, *hint)

Dropcap / strut method inventor: I wish I knew who first came up with this method, but here it is detailed by Alan Stearns.

White House Custom Colour: The projects I get to work on are interesting and complex. As a company, their committment to quality and technology inspired this investigation, and I am excited to use it on future products.