Skip to content

Instantly share code, notes, and snippets.

@jhogue
Last active June 15, 2016 17:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhogue/d81ab8129a9821db0e31 to your computer and use it in GitHub Desktop.
Save jhogue/d81ab8129a9821db0e31 to your computer and use it in GitHub Desktop.
Calculate simple Type Scale using dependent calculations
// ----
// libsass (v3.3.2)
// ----
$base-font-size: 16px;
$line-height-ratio: 1.5;
$fontsize-ratio: 1.15;
$micro: floor($base-font-size/$fontsize-ratio);
$para: $base-font-size;
$headerfour: floor($base-font-size*$fontsize-ratio);
$headerthree: floor($headerfour*$fontsize-ratio);
$headertwo: floor($headerthree*$fontsize-ratio);
$headerone: floor($headertwo*$fontsize-ratio);
$kilo: floor($headerone*$fontsize-ratio);
$mega: floor($kilo*$fontsize-ratio);
$giga: floor($mega*$fontsize-ratio);
.giga { font-size: $giga; line-height: floor($giga * $line-height-ratio); }
.mega { font-size: $mega; line-height: floor($mega * $line-height-ratio); }
.kilo { font-size: $kilo; line-height: floor($kilo * $line-height-ratio); }
h1 { font-size: $headerone; line-height: floor($headerone * $line-height-ratio); }
h2 { font-size: $headertwo; line-height: floor($headertwo * $line-height-ratio); }
h3 { font-size: $headerthree; line-height: floor($headerthree * $line-height-ratio); }
h4 { font-size: $headerfour; line-height: floor($headerfour * $line-height-ratio); }
p { font-size: $para; line-height: floor($para * $line-height-ratio); }
.micro { font-size: $micro; line-height: floor($micro * $line-height-ratio); }
.giga {
font-size: 52px;
}
.mega {
font-size: 44px;
}
.kilo {
font-size: 37px;
}
h1 {
font-size: 31px;
}
h2 {
font-size: 38px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 19px;
}
p {
font-size: 16px;
}
.micro {
font-size: 13px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment