edx-platform/lms/static/sass/elements/_typography.scss

// lms - elements - typography
// ====================

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

// 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);
}


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

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

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

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

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

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

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

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

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

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

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

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

%t-icon-solo {
  @include line-height(0);
}

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

// typography weights
%t-weight1 {
  font-weight: 300;
}

%t-weight2 {
  font-weight: 400;
}

%t-weight3 {
  font-weight: 500;
}

%t-weight4 {
  font-weight: 600;
}

%t-weight5 {
  font-weight: 700;
}

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

// MISC: extends - type
// application: canned headings
%hd-lv1 {
  @extend %t-title1;
  @extend %t-weight1;
  color: $m-gray-d4;
  margin: 0 0 ($baseline*2) 0;
}

%hd-lv2 {
  @extend %t-title4;
  @extend %t-weight1;
  margin: 0 0 ($baseline*0.75) 0;
  border-bottom: 1px solid $m-gray-l3;
  padding-bottom: ($baseline/2);
  color: $m-gray-d4;
}

%hd-lv3 {
  @extend %t-title6;
  @extend %t-weight4;
  margin: 0 0 ($baseline/4) 0;
  color: $m-gray-d4;
}

%hd-lv4 {
  @extend %t-title6;
  @extend %t-weight2;
  margin: 0 0 $baseline 0;
  color: $m-gray-d4;
}

%hd-lv5 {
  @extend %t-title7;
  @extend %t-weight4;
  margin: 0 0 ($baseline/4) 0;
  color: $m-gray-d4;
}

// application: canned copy
%copy-base {
  @extend %t-copy-base;
  color: $m-gray-d2;
}

%copy-lead1 {
  @extend %t-copy-lead2;
  color: $m-gray;
}

%copy-detail {
  @extend %t-copy-sub1;
  @extend %t-weight3;
  color: $m-gray-d1;
}

%copy-metadata {
  @extend %t-copy-sub2;
  color: $m-gray-d1;


  %copy-metadata-value {
    @extend %t-weight2;
  }

  %copy-metadata-value {
    @extend %t-weight4;
  }
}

// application: canned links
%copy-link {
  border-bottom: 1px dotted transparent;

  &:hover, &:active, &:focus {
    border-color: $link-color-d1;
  }
}

%copy-badge {
  @extend %t-title8;
  @extend %t-weight3;
  border-radius: ($baseline/5);
  padding: ($baseline/2) $baseline;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}