Simple SCSS Typography

readme.md

Simple Typography SCSS

Because I was tired of writing them too.

Elements

Heading 1 through 6 will be styled with @mixin typo($opts) (line 39)

Created classes

just for font-size

• .font-
  • h1...6
  • normal
  • small
  • xsmall
  • xxsmall

font-size, weight, letter-spacing and line-height

• .subtitle
• .subtitle-small
• .body
• .body-small
• .button
• .caption
• .overline

weight

• .light
• .medium
• .strong

typography.scss

$levels: (light: 300, medium: 500, strong: 700, regular: normal);
$font-sizes: (h1: 96px, h2: 60px, h3: 48px, h4: 34px, h5: 24px, h6: 20px, normal: 16px, small: 14px, xsmall: 12px, xxsmall: 10px);

$headings: (
        // font-weight, font-size, letter-spacing, letter-height
        h1: (light, map-get($font-sizes, h1), -1.5px, 112px),
        h2: (light, map-get($font-sizes, h2), -.5px, 72px),
        h3: (medium, map-get($font-sizes, h3), normal, 56px),
        h4: (medium, map-get($font-sizes, h4), normal, 36px),
        h5: (medium, map-get($font-sizes, h5), .18px, 24px),
        h6: (medium, map-get($font-sizes, h6), .15px, 24px),
);

$classes: (
        subtitle: (medium, map-get($font-sizes, normal), .15px, 24px),
        subtitle-small: (medium, map-get($font-sizes, small), .1px, 24px),
        body: (medium, map-get($font-sizes, normal), .5px, 24px),
        body-small: (medium, map-get($font-sizes, small), .25px, 20px),
        button: (strong, map-get($font-sizes, small), 1.25px, 17px),
        caption: (medium, map-get($font-sizes, xsmall), .4px, 16px),
        overline: (medium, map-get($font-sizes, xxsmall), 1.5px, 16px)
);

@mixin typo($opts) {
  font-family: sans-serif;
  font-weight: map-get($levels, nth($opts, 1));
  font-size: nth($opts, 2);
  letter-spacing: nth($opts, 3);
  line-height: nth($opts, 4);
}

//.font-h1...6 .font-normal .font-small .font-xsmall .font-xxsmall
.font {
  @each $alias, $size in $font-sizes {
    &-#{$alias} {
      font-size: $size;
    }
  }
}

// h1...6
@each $heading, $opts in $headings {
  #{$heading} {
    @include typo($opts)
  }
}

// .subtitle, .subtitle-small, .body, .body-small, .button, .caption, .overline
@each $class, $opts in $classes {
  .#{$class} {
    @include typo($opts)
  }
}

button, form, p, html, div, ul, ol, li, input, span {
  @each $alias, $level in (light: 300, medium: 500, strong: 700) {
    // .light, .medium, .strong
    &.#{$alias} {
      font-weight: $level !important;
    }
  }
}