Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Improved SCSS mixin to easily utilise the proportional type settings chosen using A streamlining of my previous mixins -
TYPE SCALES - inspired by
- The base font size and line height are set as variables, called in _typography.scss
- H1s are two steps up from H2s to make them stand out more
- Paragraph margins don't change according to type scale used so they are set once in _typography.scss
- The base font size can be changed at different breakpoints and the type will scale accordingly since it's set in ems.
- Breakpoint mixins and/or media queries can be used to change the typescale at different viewports
// Scales
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.200;
$major-third: 1.250;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.500;
$golden-ratio: 1.618;
// Mixin
@mixin typescale($this_typescale) {
// Set basics
h1, h2, h3, h4, h5, h6, p, ul {
margin-bottom: $global-margin;
h1, h2, h3, h4 {
margin-top: #{$this_typescale}em;
font-weight: inherit;
line-height: 1.2;
&:first-child {
margin-top: 0;
h1 {
margin-top: 0;
// Each size is one step up the type scale from the previous size
$h4: $this_typescale;
$h3: $h4*$this_typescale;
$h2: $h3*$this_typescale;
$h1: $h2*$this_typescale;
// Add them to a map so they can be called by the loop
$sizes: (
h4: $h4,
h3: $h3,
h2: $h2,
h1: $h1
// Loop through H1-H4 and assign the default font size from the map
@for $i from 1 through 4 {
h#{$i} {
$this_size: map-get($sizes, h#{$i});
font-size: #{$this_size}em;
// Create classes to go up a step than the normal size for this heading level
// Example usage: Larger H1 in a banner
@for $i from 1 through 4 {
h#{$i}.step-up {
$normal_size: map-get($sizes, h#{$i});
font-size: #{$normal_size*$this_typescale}em;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment