Semi-Automatic Golden Ratio Typography Scale for 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);
After viewing Tim Brown's excellent talk (vimeo.com/…), I got intruiged to "build" my own scale system in LESS to see if it was possible to follow his guidelines and thoughts about setting an ideal text size as the foundation of a complete typographic scale.
So here it is, still a work in progress of course, but it works very well for me so far. I'm a bit concerned about the massive line-height it adds to the h1 and h2 though.
The ornamenting is just a nice to have for those who wants to add some florals or similar before the indentation of paragraphs.
Tell me what you think, could it be trimmed down, blown up? Please don't throw eggs or tomatoes - i'm allergic.
