Skip to content

Instantly share code, notes, and snippets.

@owain-stratton

owain-stratton/type-scale.scss

Created February 13, 2017 16:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save owain-stratton/bcd639bb67d0cb61b9e01c750746c34b to your computer and use it in GitHub Desktop.
Save owain-stratton/bcd639bb67d0cb61b9e01c750746c34b to your computer and use it in GitHub Desktop.
Download ZIP
A short example of Sass based type scale for front-end projects
Raw
type-scale.scss
$baseFont: 1;
$fontScale: 1.618; // Golden Ratio
$baseLineHeight: 1.4 * $baseFont;
$small: $baseFont / $fontScale;
$regular: $baseFont;
$medium: $baseFont * $fontScale;
$large: $medium * $fontScale;
$xLarge: $large * $fontScale;
$xxLarge: $xLarge * $fontScale;
$type-settings: (
sm: #{$small}rem,
reg: #{$regular}rem,
med: #{$medium}rem,
lg: #{$large}rem,
xl: #{$xLarge}rem,
xxl: #{$xxLarge}rem
);
@function typeScale($size) {
@return map-get($type-settings, $size);
}
@mixin type($size) {
font-size: typeScale($size);
}
/*
Use case example
*/
body {
@include type(reg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment