Merge pull request #2535 from gittip/typography-change

#2457 - Swap Helvetica Neue with Ideal Sans

scss/buttons-knobs.scss

@@ -1,9 +1,9 @@
 // Buttons and Knobs
 
-button::-moz-focus-inner { 
+button::-moz-focus-inner {
 
     /* "I found out that Firefox adds an extra margin/padding to button
-     * elements that cannot be changed by standard CSS, you can however 
+     * elements that cannot be changed by standard CSS, you can however
      * add the following to make it behave"
      *
      *  http://stackoverflow.com/questions/5939781/
@@ -18,7 +18,7 @@ button,
     background: $gray;
     border: 0;
     color: white;
-    font: bold 12px $Helvetica;
+    font: normal 13px $Ideal;
     margin: 0 0 0 1px;
     padding: 5px 8px;
     @include border-radius(3px);

scss/elements.scss

@@ -7,7 +7,7 @@ html, body {
 }
 body {
     color: $black;
-    font: normal 16px $Helvetica;
+    font: normal 16px $Ideal;
     line-height: 130%;
     min-width: 320px;
     text-rendering: optimizeLegibility;

scss/fonts-colors-mixins.scss

@@ -4,6 +4,8 @@
 $Helvetica: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
 $Mensch: 'Mensch', $Helvetica;
 $Mono: Monaco, "Lucida Mono", monospace;
+$Ideal: 'Ideal Sans SSm A', 'Ideal Sans SSm B', $Helvetica;
+$Surveyor: 'Surveyor SSm A', 'Surveyor SSm B', sans-serif;
 
 // Colors
 $green: #396;

scss/layout.scss

@@ -15,7 +15,7 @@
     }
     .motto {
         border-left: 2px solid $light-gray;
-        font: bold 10px $Helvetica;
+        font: bold 10px $Ideal;
         letter-spacing: 1px;
         text-transform: uppercase;
         padding-left: 18px;
@@ -29,13 +29,13 @@
         position: absolute;
         top: 0;
         right: 0;
-        font: normal 13px $Helvetica;
+        font: normal 13px $Ideal;
         text-align: right;
     }
     .you-are {
         padding-top: 4px;
         .quick-stats {
-            font: normal 11px/13px $Helvetica;
+            font: normal 11px/13px $Ideal;
             a {
                 color: $brown;
                 &:hover {
@@ -94,6 +94,7 @@
 
             button {
                 font-size: 14px;
+                line-height: 17px;
             }
         }
         &:after {
@@ -117,17 +118,17 @@
     z-index: 2;
 
     h1 {
-        font: bold 22px $Helvetica;
+        font: bold 22px $Ideal;
         color: $brown;
     }
     h2 {
-        font: bold 14px $Helvetica;
+        font: bold 14px $Ideal;
         text-transform: uppercase;
         color: $brown;
     }
 
     .help {
-        font: normal 14px/18px $Helvetica;
+        font: normal 14px/18px $Ideal;
         color: $black;
 
         &.with-padding {
@@ -156,7 +157,7 @@
         position: absolute;
         top: 5px;
         right: 5px;
-        font: normal 10px $Helvetica;
+        font: normal 10px $Ideal;
         text-transform: uppercase;
         color: $black;
     }
@@ -166,7 +167,7 @@
         position: absolute;
         top: 2px;
         right: 5px;
-        font: normal 9px $Helvetica;
+        font: normal 9px $Ideal;
         text-transform: uppercase;
         color: $black;
 
@@ -180,10 +181,10 @@
         padding-left: 15px;
     }
     .number {
-        font: bold 56px $Helvetica;
+        font: bold 56px $Ideal;
     }
     .unit {
-        font: normal 12px $Helvetica;
+        font: normal 12px $Ideal;
     }
 
     .on-community {
@@ -257,7 +258,7 @@
 
         h2 {
             color: $black;
-            font: bold 10px $Helvetica;
+            font: bold 10px $Ideal;
             letter-spacing: 1px;
             text-transform: uppercase;
             margin: 0 0 3px;
@@ -306,7 +307,7 @@
         padding: 35px 0 0;
 
         h2 {
-            font: bold 14px $Helvetica;
+            font: bold 14px $Ideal;
             text-transform: uppercase;
             margin: 35px 0 8px;
         }
@@ -336,7 +337,7 @@
             display: inline-block;
             border: 2px solid $brown;
             border-radius: 6pt;
-            font: normal 12px $Helvetica;
+            font: normal 12px $Ideal;
             color: $brown;
             background: white url("clipped-heart.png") bottom right no-repeat;
             text-align: left;
@@ -360,7 +361,7 @@
             font-weight: normal;
         }
         .other, .abandoned {
-            font: normal 10px $Helvetica;
+            font: normal 10px $Ideal;
         }
         .abandoned {
             text-align: center;
@@ -384,7 +385,7 @@
         }
         form {
             h2 {
-                font: bold 14px $Helvetica;
+                font: bold 14px $Ideal;
                 text-transform: uppercase;
                 margin: 35px 0 8px;
             }
@@ -415,7 +416,7 @@
         }
         label {
             display: block;
-            font: normal 10px $Helvetica;
+            font: normal 10px $Ideal;
             margin: 8px 0 0;
             padding: 0;
             text-transform: uppercase;
@@ -428,7 +429,7 @@
             color: #888;
         }
         input:not([type]), input[type="text"] {
-            font: normal 11pt/14pt $Helvetica;
+            font: normal 11pt/14pt $Ideal;
             width: 292px;
             margin: 0;
             padding: 3px;
@@ -474,7 +475,7 @@
                 margin: 0;
                 padding: 0 0 0 2em;
                 text-indent: -2em;
-                font: normal 12px $Helvetica;
+                font: normal 12px $Ideal;
             }
         }
         select {
@@ -483,7 +484,7 @@
     }
 }
 .payment-footer {
-    font: normal 12px $Helvetica;
+    font: normal 12px $Ideal;
     text-align: center;
 }
 
@@ -526,7 +527,7 @@
 
     h2, #members th {
         color: $brown;
-        font: bold 14px $Helvetica;
+        font: bold 14px $Ideal;
         letter-spacing: 1px;
         text-transform: uppercase;
         margin: 35px 0 8px;

scss/modules.scss

@@ -26,17 +26,17 @@
         span.money {
             color: $black;
             display: block;
-            font: bold 18px $Helvetica;
+            font: bold 16px $Ideal;
             margin: 7px 0 5px 0;
             white-space: nowrap;
 
             span.unit {
-                font: normal 11px $Helvetica;
+                font: normal 11px $Ideal;
             }
         }
         span.name {
             display: block;
-            font: normal 11px $Helvetica;
+            font: normal 11px $Ideal;
             margin: 3px 0;
             white-space: nowrap;
             overflow: hidden;

scss/profile-edit.scss

@@ -26,7 +26,7 @@
             margin-top: 8px;
         }
         .help {
-            font: normal 12px/12px $Helvetica;
+            font: normal 12px/12px $Ideal;
         }
     }
     .goal {

scss/team.scss

@@ -1,15 +1,15 @@
 #team {
 
     .fine {
-        font: normal 10px $Helvetica;
+        font: normal 10px $Ideal;
         text-transform: uppercase;
     }
     table {
         margin: 0 auto;
     }
     td {
         padding-right: 5px;
-        font: normal 12px/14px $Helvetica;
+        font: normal 12px/14px $Ideal;
     }
     td.no-members {
         text-align: center;
@@ -26,7 +26,7 @@
         padding: 0 0 0 5px;
     }
     th {
-        font: bold 11px/14px $Helvetica;
+        font: bold 11px/14px $Ideal;
         text-transform: uppercase;
         color: $brown;
         padding: 0 0 5px 0;
@@ -44,7 +44,7 @@
     td.take.high { color: orange; }
     td.take.max { color: red; }
     span.remove:hover {
-        text-decoration: line-through; 
+        text-decoration: line-through;
         cursor: pointer;
     }
     #take input {
@@ -61,7 +61,7 @@
         padding: 5px 0 5px 38px;
         text-align: center;
         vertical-align: middle;
-        font: normal 16px/16px $Helvetica;
+        font: normal 16px/16px $Ideal;
     }
     #lookup-container {
         position: relative;
@@ -98,7 +98,7 @@
             @include border-radius(3px);
 
             li {
-                font: normal 16px/16px $Helvetica;
+                font: normal 16px/16px $Ideal;
                 white-space: nowrap;
                 margin: 0;
                 padding: 3px 5px;

scss/widgets/_sign_in.scss

@@ -6,7 +6,7 @@
     @include border-radius(3px);
     color: #fff;
     padding: 0 8px;
-    font-size: 12px;
+    font-size: 13px;
     display: block;
     line-height: 25px;
     .caret {
@@ -29,7 +29,7 @@
     border: 0;
     box-shadow: none;
     background: $green;
-    min-width: 120px;
+    min-width: 140px;
     li {
       margin: 0;
       &.twitter button {
@@ -56,7 +56,7 @@
       margin: 0;
       text-align: left;
       position: relative;
-      font-size: 12px;
+      font-size: 13px;
       border: none;
       @include border-radius(0);
       background: none;

templates/base.html

@@ -8,7 +8,7 @@
     <link rel="apple-touch-icon-precomposed" href="{{ website.asset_url }}/touch/icon-76x76.png" sizes="76x76">
     <link rel="apple-touch-icon-precomposed" href="{{ website.asset_url }}/touch/icon-120x120.png" sizes="120x120">
     <link rel="apple-touch-icon-precomposed" href="{{ website.asset_url }}/touch/icon-152x152.png" sizes="152x152">
-
+    <link rel="stylesheet" type="text/css" href="https://downloads-gittipllc.netdna-ssl.com/fonts/186388/577BA6429696B27AD.css">
     {% block head %}{% endblock %}
 </head>
 <body>