public/assets/css/scss/partials/_type.scss

   1 .futura {
   2     font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   3     font-weight: 500;
   4     -webkit-font-smoothing: antialiased;
   5 }
   6
   7 .futura-italic {
   8     @extend .futura;
   9     font-style: italic;
  10 }
  11
  12 .futura-light {
  13     @extend .futura;
  14     font-weight: 300;
  15 }
  16
  17 .futura-bold {
  18     @extend .futura;
  19     font-weight: 700;
  20 }
  21
  22 .minion {
  23     font-family: "minion-pro", "Georgia", serif;
  24     font-weight: 400;
  25     -webkit-font-smoothing: antialiased;
  26 }
  27
  28 .minion-italic {
  29     @extend .minion;
  30     font-style: italic;
  31 }
  32
  33 .minion-bold {
  34     font-weight: 700;
  35 }
  36
  37 $line: 24;
  38 $column: 100% / 18;
  39 $font-size: 16;
  40 $em: $font-size * 1;
  41 $base: ($line/$font-size*1em);
  42
  43 body {
  44     /* 16px / 24px */
  45     font-size: $font-size / 16 * 1em;
  46     line-height: #{$line / $em}em;
  47 }
  48
  49 .small {
  50     /* 14px / 18px */
  51     font-size: #{($font-size*0.875) / $em}em;
  52     line-height: ($line*0.75) / ($font-size*0.875) * 1em;
  53 }
  54
  55 .normal, h3 {
  56     /* 16px / 24px */
  57     font-size: #{$font-size / $em}em;
  58     line-height: #{$line / $em}em; /* 24 */
  59 }
  60
  61 .large {
  62     /* 26 / 36px */
  63     font-size: #{26 / $em}em;
  64     line-height: ($line*1.5) / 26 * 1em;
  65 }
  66
  67 .huge {
  68     /* 42px / 48px */
  69     font-size: #{42 / $em}em;
  70     line-height: ($line*2) / 42 * 1em;
  71 }
  72
  73 .massive {
  74     /* 68px / 72px */
  75     font-size: #{68 / $em}em;
  76     line-height: ($line*2.8) / 68 * 1em;
  77 }
  78
  79 .gigantic {
  80     /* 110px / 120px */
  81     font-size: #{110 / $em}em;
  82     line-height: ($line*5) / 110 * 1em;
  83 }
  84
  85 .tight-line-height {
  86     line-height: 1em;
  87 }