fc-new-design/assets/css/scss/includes/type.scss

   1 $line: 24;
   2 $column: 100% / 18;
   3 $font-size: 16;
   4 $em: $font-size * 1;
   5
   6 * {
   7   font-family: "Verdana", "Helvetica Neue", "Arial", "Sans-serif";
   8 }
   9
  10 body {
  11         /* 16px / 24px */
  12         font-size: $font-size / 16 * 1em;
  13         line-height: #{$line / $em}em;
  14 }
  15
  16 .small {
  17         /* 13px / 18px */
  18         font-size: #{($font-size*0.8125) / $em}em;
  19         line-height: ($line*0.75) / ($font-size*0.8125) * 1em;
  20 }
  21
  22 .normal, h3 {
  23         /* 16px / 24px */
  24         font-size: #{$font-size / $em}em;
  25         line-height: #{$line / $em}em; /* 24 */
  26 }
  27
  28 .normal-large {
  29   /* 18 / 30 */
  30   font-size: #{18 / $em}em;
  31   line-height: ($line*1.25) / 18 * 1em;
  32 }
  33
  34 .large, h2, h1 {
  35         /* 26 / 36px */
  36         font-size: #{26 / $em}em;
  37         line-height: ($line*1.5) / 26 * 1em;
  38 }
  39
  40 .large-huge {
  41   /* 30 / 42px */
  42         font-size: #{30 / $em}em;
  43         line-height: ($line*1.75) / 30 * 1em;
  44
  45         &.spaced {
  46         line-height: ($line*3) / 30 * 1em;
  47         }
  48 }
  49
  50 .huge {
  51         /* 42px / 48px */
  52         font-size: #{42 / $em}em;
  53         line-height: ($line*2) / 42 * 1em;
  54 }
  55
  56 .massive {
  57         /* 68px / 72px */
  58         font-size: #{68 / $em}em;
  59         line-height: ($line*2.8) / 68 * 1em;
  60 }
  61
  62 .gigantic {
  63         /* 110px / 120px */
  64         font-size: #{110 / $em}em;
  65         line-height: ($line*5) / 110 * 1em;
  66 }
  67
  68 p {
  69   font-size: 1.125em; /* 18 / 16 */
  70   font-family: "minion-pro";
  71
  72         .drop-cap {
  73           font-size: 2em; /* 24 / 12 */
  74         }
  75 }
  76
  77 h1, h2, h3, h4, h5, h6 {
  78   font-family: "museo-slab";
  79   font-weight: 700;
  80   margin: 0;
  81 }
  82
  83 h1 {
  84   .small {
  85     font-size: 0.66666666666667em; /* 20 / 30 */
  86     font-family: "museo-sans";
  87     font-weight: 300;
  88   }
  89 }
  90
  91 #user-nav {
  92   li {
  93     font-family: "museo-sans";
  94     font-weight: 500;
  95     font-style: italic;
  96   }
  97   a {
  98     font-family: "museo-sans";
  99     font-weight: 500;
 100     font-style: normal;
 101   }
 102 }
 103
 104 #main-nav {
 105   a {
 106     font-family: "museo-slab";
 107     font-weight: 700;
 108   }
 109 }
 110
 111 button,
 112 #footer-nav a {
 113   font-family: "museo-sans";
 114   font-weight: 500;
 115 }