Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// --------------------------------------------------------------------------------------
// A More Modern Scale for Web Typography
// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------
$body-font-size: 1em !default;
// Adjusts body typography to be default
// for each browser.
@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {
body { font-size: $font-size; }
body, h1, h2, h3, h4, h5, h6 { font-size-adjust: $size-adjustment; }
}
// Setting body content scale
@mixin body-content-scale($page-id, $line-height: 1.25) {
##{$page-id} {
font-size: $body-font-size; // 16px
line-height: $line-height;
@media (min-width: 43.75em) {
font-size: $body-font-size; // 16px
line-height: $line-height * 1.1; // 1.375
}
}
}
// Setting h1 scale
@mixin h1-scale($line-height: 1.25) {
h1 {
font-size: $body-font-size * 2; // 2x body copy size = 32px
line-height: $line-height;
@media (min-width: 43.75em) {
font-size: $body-font-size * 2.5; // 2.5x body copy size = 40px
line-height: $line-height * .9; // 1.125
}
@media (min-width: 56.25em) {
font-size: $body-font-size * 3; // 3x body copy size = 48px
line-height: $line-height * .85; // 1.0625
}
}
}
// Setting h2 scale
@mixin h2-scale($font-size: 1.625em, $line-height: 1.25) {
h2 {
font-size: $font-size;
line-height: $line-height * .92; // 1.15
@media (min-width: 43.75em) {
font-size: $body-font-size * 2; // 2 body copy size = 32px
line-height: $$line-height;
}
@media (min-width: 56.25em) {
font-size: $body-font-size * 2.25; // 2.25x body copy size = 48px
line-height: $line-height;
}
}
}
// Setting h3 scale
@mixin h3-scale($line-height: 1.25) {
h3 {
font-size: $body-font-size * 1.375; // 1.375x body copy size = 22px
line-height: $line-height * .909; // 1.13625
@media (min-width: 43.75em) {
font-size: $body-font-size * 1.5; // 1.5x body copy size = 24px
line-height: $$line-height;
}
@media (min-width: 56.25em) {
font-size: $body-font-size * 1.75; // 1.75x body copy size = 28px
line-height: $line-height;
}
}
}
// Setting h4 scale
@mixin h4-scale($line-height: 1.11) {
h4 {
font-size: $body-font-size * 1.125; // 1.1255x body copy size = 18px
line-height: $line-height;
@media (min-width: 43.75em) {
line-height: $$line-height * 1.1; // 1.221
}
}
}
// Setting blockquote scale
@mixin blockquote-scale($font-size: 1.25em, $line-height: 1.25) {
blockquote {
font-size: $font-size;
line-height: $line-height * 1.2; // 1.5
@media (min-width: 43.75em) {
font-size: $font-size;
line-height: $$line-height * 1.166; // 1.4575
}
}
}
@Behinder

This comment has been minimized.

Copy link

commented Jan 23, 2014

I had error:
Line 17 of _modernscale.scss: Invalid CSS after " #{": expected expression (e.g. 1px, bold), was "#$page-id} {")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.