_typography.scss

// studio - elements - typography
// ====================

// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)

// weights
%t-ultrastrong {
 font-weight: 700;
}
%t-strong {
 font-weight: 600;
}
%t-demi-strong {
 font-weight: 500;
}
%t-regular {
 font-weight: 400;
}
%t-light {
 font-weight: 300;
}
%t-ultralight {
 font-weight: 200;
}

// headings/titles
%t-title {
  font-family: $f-sans-serif;
}

%t-title1 {
  @extend %t-title;
  @include font-size(60);
  @include line-height(60);
}

%t-title2 {
  @extend %t-title;
  @include font-size(48);
  @include line-height(48);
}

%t-title3 {
  @include font-size(36);
  @include line-height(36);
}

%t-title4 {
  @extend %t-title;
  @include font-size(24);
  @include line-height(24);
}

%t-title5 {
  @extend %t-title;
  @include font-size(18);
  @include line-height(18);
}

%t-title6 {
  @extend %t-title;
  @include font-size(16);
  @include line-height(16);
}

%t-title7 {
  @extend %t-title;
  @include font-size(14);
  @include line-height(14);
}

%t-title8 {
  @extend %t-title;
  @include font-size(12);
  @include line-height(12);
}

%t-title9 {
  @extend %t-title;
  @include font-size(11);
  @include line-height(11);
}

// ====================

// copy
%t-copy {
  font-family: $f-sans-serif;
}

%t-copy-base {
  @extend %t-copy;
  @include font-size(16);
  @include line-height(16);
}

%t-copy-lead1 {
  @extend %t-copy;
  @include font-size(18);
  @include line-height(18);
}

%t-copy-lead2 {
  @extend %t-copy;
  @include font-size(24);
  @include line-height(24);
}

%t-copy-sub1 {
  @extend %t-copy;
  @include font-size(14);
  @include line-height(14);
}

%t-copy-sub2 {
  @extend %t-copy;
  @include font-size(12);
  @include line-height(12);
}

// ====================

// actions/labels
%t-action1 {
  @include font-size(18);
  @include line-height(18);
}

%t-action2 {
  @include font-size(16);
  @include line-height(16);
}

%t-action3 {
  @include font-size(14);
  @include line-height(14);
}

%t-action4 {
  @include font-size(12);
  @include line-height(12);
}

%t-action5 {
  @include font-size(10);
  @include line-height(10);
}


// ====================

// code
%t-code {
  font-family: $f-monospace;
}

// ====================

// icons
%t-icon1 {
  @include font-size(48);
  @include line-height(48);
}

%t-icon2 {
  @include font-size(36);
  @include line-height(36);
}

%t-icon3 {
  @include font-size(24);
  @include line-height(24);
}

%t-icon4 {
  @include font-size(18);
  @include line-height(18);
}

%t-icon5 {
  @include font-size(16);
  @include line-height(16);
}

%t-icon6 {
  @include font-size(14);
  @include line-height(14);
}

%t-icon7 {
  @include font-size(12);
  @include line-height(12);
}

%t-icon8 {
  @include font-size(11);
  @include line-height(11);
}

%t-icon9 {
  @include font-size(10);
  @include line-height(10);
}