Skip to content

Instantly share code, notes, and snippets.

@nfedyashev
Created June 18, 2012 02:56
Show Gist options
  • Save nfedyashev/2946605 to your computer and use it in GitHub Desktop.
Save nfedyashev/2946605 to your computer and use it in GitHub Desktop.
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);
@nfedyashev
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment