Create a better reading experience on your website using Vertical Rhythm.

Although a lot of people are familiar with the horizontal grids systems - like Bootstrap and Foundation to name a few - not everyone knows that vertical grids can be used to provide rhythm to your web page. We can easily accomplish that goal using Sass & Compass.

Imagine a scenario where you can put a baseline grid on top of your design and match its content perfectly above each of those lines. When we're designing a website, we have the practice in calculate its content only through margins and line heights, which isn't wrong, but can easily become a nightmare to maintenance purpose.

As I said, we can use Sass and Compass to make this dirty work for us. First of all, we have to set the global variables to get this done:

@import "compass"

$base-font-size: 16px;
$base-line-height: 30px;
@include establish-baseline;

If you want to include some other html tag with different font size - like a header - you just have to use the "adjust font size-to" mixin. This way you avoid to break the rhythm of your page and everything will be in place:

h1 {
    @include adjust-font-size-to(40px);
}

To add some extra space between the contents of your page you can still play with margins, paddings and borders without affect the dispose of our page. We just have to use the "leader" and "trailer" mixins, like so:

h1 {
     @include adjust-font-size-to(40px);
     @include leader(1, 40px); // margin-top
     @include trailer(1, 40px); // margin-bottom
     @include padding-leader(1, 40px); // padding-top
     @include padding-trailer(1, 40px); // padding-bottom
     @include trailing-border(5px, 1, 40px); //border
}

Note that we have to pass some extra arguments in here to get the proper result: In all mixins we have to repeat the font size of our element and in "trailer-border" we have 3 arguments, where the first arg is the width of the border and the second one is the padding.

Don't forget that this mixins are meant to help your workflow as a webdesigner, but can easily turn your outputted css in a total mess. Use wisely.

Further reading.