Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad
Last active February 26, 2024 07:02
Show Gist options
  • Save hatefulcrawdad/8463591 to your computer and use it in GitHub Desktop.
Save hatefulcrawdad/8463591 to your computer and use it in GitHub Desktop.
// --------------------------------------------------------------------------------------
// 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
}
}
}
@markstraw
Copy link

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