Vertical rhythm, the "pace" at which objects and words are spaced vertically on a page. It's one of life's most unnoticeable pleasantries. It only sticks out when it's bad.
People shouldn't miss your message because of poorly spaced typography, and you shouldn't have to spend more time than necessary getting vertical rhythm correct. While Shevy can't help you pick out the best fonts, it'll make sure your fonts are perfectly spaced up and down the page.
Did I mention it works responsively, too?
That's right. You can reset your typography module by module, breakpoint by breakpoint and maintain perfect vertical rhythm (within your module or breakpoint of course).
Check it out.
Default $shevy font sizes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
Using a large font scale in a custom $large map.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
Responsive typography with five $responsive maps.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
There's also this neat little base-spacing() function (with an alias to shorten it to bs()). base-spacing() takes two arguments, a $factor (defaults to 1) and a $map (defaults to $shevy). This function will calculate the base spacing by multiplying the base-font-size by the base-line-height. It will then multiply that base spacing by the factor provided and thus supply you with a value that aligns with your vertical rhythm.
Check out the box below. It's 2 base-spacings tall.
Because we can supply a map as the second argument, we can adjust the base-spacing value on the fly. For example, let's use the responsive maps we used above on the box below.