Created
August 2, 2019 11:19
-
-
Save maxmckenzie/aa6dcd8df9a18864648051e0e06681d3 to your computer and use it in GitHub Desktop.
Sass type scale & vertical rhythm mixin use `@include typeScale(1, 1)` or `@include typeScale(-1, 1)` for font sizes below 1rem. Just change the values of line height and scaling factor. Make sure that the line height is always larger than the font size and you will keep the vertical rhythm consistent across the document ```
$base-font-size: 1re…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
font-size: 16px; | |
} | |
@function pow($number, $exponent) { | |
$value: 1; | |
@if $exponent > 0 { | |
@for $i from 1 through $exponent { | |
$value: $value * $number; | |
} | |
} @else if $exponent < 0 { | |
@for $i from 1 through -$exponent { | |
$value: $value / $number; | |
} | |
} | |
@return $value; | |
} | |
$base-font-size: 1rem; | |
$base-line-height: $base-font-size * 1.15; | |
$scaling-factor: 1.2; // minor third | |
@mixin typeScale($type-scaling: 0, $height-scaling: 1) { | |
font-size: pow($scaling-factor, $type-scaling) * $base-font-size; | |
line-height: $base-line-height * $height-scaling; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
handy tool to find which type scale you want https://type-scale.com/