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

@Behinder Behinder commented Jan 23, 2014

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

@markstraw

This comment has been minimized.

Copy link

@markstraw markstraw commented Feb 3, 2014

I need help. What is a scss file? What does @mixin refer to? How does this code relate to the article it is based on?

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.