Semi-Automatic Golden Ratio Typography Scale for LESS

style.less

/* Typographic Settings
=======================================*/

@idealTextSize: 1.618rem;
@importantNumber: @idealTextSize * 0.87515451;
@goldenRatio: 1.618rem;
@leadMultiplier: 1.145544;

@baseFontFamily: Cambria, Georgia, Garamond, "Times New Roman", serif;
@headerFontFamily: Cambria, Georgia, Garamond, "Times New Roman", serif;

@ornament: "";



/*=====================================*/
/* No actual need to set anything here
=======================================*/

html {
  font-size: 62.5%;   
}
 
 
body, button, input, select, textarea { 
  
  .ff(
    @baseFontFamily
  ); 
} 

h1, h2, h3, h4, h5, h6 {
  
  .ff(
     @headerFontFamily
  );

}

body {
  font-size: normal 16px; font-size: normal @idealTextSize;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 24px; margin-bottom: @goldenRatio;
}

body, p { 
  line-height: 1.68; line-height: @magicNumberCalc;
}

.lead {
  font-size: @leadCalc;
    line-height: @leadLhCalc;
}

h1  { 
  font-size: 68px; font-size: @h1Calc; 
  line-height: 11px; line-height: @h1lhCalc; 
}

h2  { 
  font-size: 60px; font-size: @h2Calc; 
  line-height: 11px; line-height: @h2lhCalc; 
} 

h3  { 
  font-size: 42px; font-size: @h3Calc; 
  line-height: 11px; line-height: @h3lhCalc; 
}

h4  { 
  font-size: 37px; font-size: @h4Calc; 
  line-height: 11px; line-height: @h4lhCalc; 
} 

h5  { 
  font-size: 26px; font-size: @h5Calc; 
  line-height: 11px; line-height: @h5lhCalc; 
}

h6  { 
  font-size: 23px; font-size: @h6Calc; 
  line-height: 11px; line-height: @h6lhCalc; 
}
  
p   { 

font-size: 16px; font-size: @idealTextSize; 
  margin-bottom: 23px; margin-bottom: @magicNumberCalc; 
  
    
  &:first-letter {  
  
  }
        
  &:first-line {  
  
  }
}

/*
p+p {
  text-indent: @idealTextSize;
    @minusMagicNumber: ~`'-'+"@{magicNumberCalc}"`;
      margin-top: @minusMagicNumber;
      
  &:before {
    content: @ornament;
      padding-right: 0.4rem;
        margin-top: 0;
  }
}
*/




/* =============================================================================
 Semi-Automatic Golden Ratio Typographic Scaler
 ========================================================================== */

@h1Calc: @h3Calc * @goldenRatio;
@h2Calc: @h4Calc * @goldenRatio;
@h3Calc: @h5Calc * @goldenRatio;
@h4Calc: @h6Calc * @goldenRatio;
@h5Calc: @idealTextSize * @goldenRatio;
@h6Calc: @importantNumber * @goldenRatio;

@h1lhCalc: @h1Calc * @goldenRatio;
@h2lhCalc: @h2Calc * @goldenRatio;
@h3lhCalc: @h3Calc * @goldenRatio;
@h4lhCalc: @h4Calc * @goldenRatio;
@h5lhCalc: @h5Calc * @goldenRatio;
@h6lhCalc: @h6Calc * @goldenRatio;

@magicNumberCalc: @idealTextSize * @goldenRatio;
@pwidthCalc: @idealTextSize * @goldenRatio * 18;
@leadCalc: @idealTextSize * @leadMultiplier;
@leadLhCalc: @leadCalc * (@magicNumberCalc / @importantNumber);

based on http://vimeo.com/17079380