Type Scales #typography

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

- var text = "Quick brown fox jumps over the lazy dog"

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
    script(src="https://cdn.tailwindcss.com")

  body
    each item,i in Array(8)
      p(class=`font-size-${i+1} leading-tight`) #{text}

script.js

‎‎​

style.scss

@use 'sass:math';

$size: math.pow(2,1);

@mixin type-scale($base,$count,$ratio) {
  @for $i from 1 through $count {
    .font-size-#{$i} {
      font-size: $base * math.pow($ratio,$i);
    }
  }
}

@include type-scale(16px,8,1.5);

p {
  margin: 0;
}