Skip to content

Instantly share code, notes, and snippets.

@maxmckenzie
Created August 2, 2019 11:19
Show Gist options
  • Save maxmckenzie/aa6dcd8df9a18864648051e0e06681d3 to your computer and use it in GitHub Desktop.
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…
: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;
};
@maxmckenzie
Copy link
Author

handy tool to find which type scale you want https://type-scale.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment