Typography. Vertical Rhythm.

typography.less

// How it works: https://youtu.be/IbfsvI6dh4U

@textFontSize: 20px;
@lineHeight: 1.5rem;

// Set up font size and line-height
html {
   font-size: @textFontSize;
}

body {
  line-height: @lineHeight;
}

// Control line length
.container.text {
  max-width: 40rem; // about 65 Chars per line
}


// Set up vertical margins for text elements
p, blockquote, ul, ol, dl {
  margin: 0 0 @lineHeight 0;
}
hr {
  margin: 1.5rem 0 1.5rem 0;
}

// Set up font sizes for header: each header is bigger by 25% as previous one
h1 { font-size: @textFontSize*1.25*1.25*1.25*1.25*1.25*1.25; }
h2 { font-size: @textFontSize*1.25*1.25*1.25*1.25*1.25; }
h3 { font-size: @textFontSize*1.25*1.25*1.25*1.25; }
h4 { font-size: @textFontSize*1.25*1.25*1.25; }
h5 { font-size: @textFontSize*1.25*1.25; }
h6 { font-size: @textFontSize*1.25; }

// Support vertical rhytm by manipulating with line-height and vertical margins
h1 { line-height: @lineHeight*2.65; margin-top: @lineHeight*2;    margin-bottom: @lineHeight*1.35; } // @lineHeight x 6
h2 { line-height: @lineHeight*2.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; }      // @lineHeight x 5
h3 { line-height: @lineHeight*1.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; }      // @lineHeight x 4
h4 { line-height: @lineHeight*1.65; margin-top: @lineHeight*1.35; margin-bottom: @lineHeight; }      // @lineHeight x 4
h5 { line-height: @lineHeight;      margin-top: @lineHeight*1.15; margin-bottom: @lineHeight*0.85; } // @lineHeight x 3
h6 { line-height: @lineHeight;      margin-top: @lineHeight*1.15; margin-bottom: @lineHeight*0.85; } // @lineHeight x 3

// Supported classes
.h1:extend(h1){}
.h2:extend(h2){}
.h3:extend(h3){}
.h4:extend(h4){}
.h5:extend(h5){}
.h6:extend(h6){}

// Grid 
body.lines {
  background: linear-gradient(
    to bottom,
    white, white 95%, #aaa 100%, #aaa
  );
  background-size: 100% @lineHeight;
}

Use unitless line height