diff --git a/website/source/assets/images/logo-header.svg b/website/source/assets/images/logo-header.svg
new file mode 100644
index 000000000..ade67cc2e
--- /dev/null
+++ b/website/source/assets/images/logo-header.svg
@@ -0,0 +1,30 @@
+
+<svg width="110px" height="42px" viewBox="423 368 183 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <desc>HashiCorp Packer</desc>
+    <defs>
+        <polygon id="path-1" points="22.6878 62 0 62 0 0.5562 22.6878 0.5562 22.6878 62"></polygon>
+        <polygon id="path-3" points="33.7967 0 0.2587 0 0.2587 55.0389996 33.7967 55.0389996 33.7967 1.42108547e-14"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(423.000000, 368.000000)">
+        <path d="M72.5193,24.7828 L66.4223,24.7828 L66.4223,35.7278 L72.5193,35.7278 C75.9273,35.7278 76.9363,34.4798 76.9363,31.8398 L76.9363,28.5758 C76.9363,25.9348 75.8323,24.7828 72.5193,24.7828 L72.5193,24.7828 Z M60.3743,19.4548 L72.8553,19.4548 C80.2483,19.4548 82.9843,22.4788 82.9843,28.0958 L82.9843,32.4638 C82.9843,38.0328 80.0083,41.0568 72.5673,41.0568 L66.4223,41.0568 L66.4223,51.4258 L60.3743,51.4258 L60.3743,19.4548 Z" id="Fill-1" fill="#FFFFFF"></path>
+        <path d="M97.575,42.5928 L93.255,42.5928 C91.335,42.5928 90.806,43.1208 90.806,44.8978 C90.806,46.5298 91.335,47.2488 93.159,47.2488 C94.887,47.2488 96.471,46.6738 97.575,46.0498 L97.575,42.5928 Z M103.431,51.4258 L98.632,51.4258 L98.199,49.8418 C96.087,51.2338 93.591,51.9058 91.239,51.9058 C86.967,51.9058 85.142,48.9778 85.142,44.9458 C85.142,40.1928 87.207,38.3678 91.959,38.3678 L97.575,38.3678 L97.575,35.9208 C97.575,33.3278 96.855,32.4158 93.111,32.4158 C90.999,32.4158 88.694,32.7038 86.631,33.1348 L85.91,28.6718 C88.118,27.9998 91.335,27.5668 93.927,27.5668 C101.271,27.5668 103.431,30.1598 103.431,36.0158 L103.431,51.4258 Z" id="Fill-3" fill="#FFFFFF"></path>
+        <path d="M106.9324,42.9288 L106.9324,36.5448 C106.9324,30.2558 109.6684,27.5668 117.0134,27.5668 C118.6464,27.5668 120.9974,27.8548 122.7264,28.4308 L122.0064,33.2318 C120.4214,32.7998 118.3104,32.6078 117.1584,32.6078 C113.7974,32.6078 112.7894,33.6158 112.7894,36.4958 L112.7894,42.9778 C112.7894,45.8578 113.7974,46.8658 117.1584,46.8658 C118.6464,46.8658 120.3264,46.6738 122.0064,46.2418 L122.7264,51.0418 C121.1904,51.5698 118.9344,51.9068 117.0134,51.9068 C109.6684,51.9068 106.9324,49.2178 106.9324,42.9288" id="Fill-5" fill="#FFFFFF"></path>
+        <path d="M146.2947,28.0474 L139.4297,39.6174 L146.5827,51.4254 L140.1497,51.4254 L133.0937,39.6174 L139.7657,28.0474 L146.2947,28.0474 Z M126.4207,51.4254 L126.4207,18.4944 L132.2767,17.6784 L132.2767,51.4254 L126.4207,51.4254 Z" id="Fill-7" fill="#FFFFFF"></path>
+        <path d="M153.9256,37.2647 L161.3656,37.2647 L161.3656,36.1117 C161.3656,33.9037 160.6946,32.3677 157.8136,32.3677 C154.9336,32.3677 153.9256,33.9037 153.9256,36.1117 L153.9256,37.2647 Z M158.4856,47.1057 C160.7416,47.1057 163.0936,46.7697 165.6386,46.0007 L166.5506,50.4177 C163.9096,51.4257 160.7416,51.9067 157.9576,51.9067 C150.6126,51.9067 148.0696,48.4967 148.0696,42.8807 L148.0696,36.6887 C148.0696,31.7437 150.2776,27.5667 157.7656,27.5667 C165.2536,27.5667 166.9346,31.9357 166.9346,36.9767 L166.9346,41.9687 L153.9256,41.9687 L153.9256,43.1687 C153.9256,46.0007 154.9336,47.1057 158.4856,47.1057 L158.4856,47.1057 Z" id="Fill-9" fill="#FFFFFF"></path>
+        <path d="M182.5799,32.9439 C180.3239,33.9519 178.4999,35.0079 176.3879,36.3519 L176.3879,51.4259 L170.5309,51.4259 L170.5309,28.0479 L175.4759,28.0479 L175.8589,30.6389 C177.1549,29.7759 179.9399,28.1429 182.0039,27.5669 L182.5799,32.9439 Z" id="Fill-11" fill="#FFFFFF"></path>
+        <g id="Group-15" transform="translate(0.000000, 8.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Clip-14"></g>
+            <polygon id="Fill-13" fill="#71A798" mask="url(#mask-2)" points="-0.0002 0.5562 22.6878 13.6642 22.6878 62.0002 -0.0002 48.8912"></polygon>
+        </g>
+        <g id="Group-18" transform="translate(9.000000, 0.000000)">
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <g id="Clip-17"></g>
+            <path d="M24.9187,14.2047 L0.2587,-0.0003 L0.2587,9.8647 L17.0267,19.5477 L17.0267,49.1407 L24.9187,53.6737 C29.8017,56.4927 33.7967,54.8037 33.7967,49.9207 L33.7967,28.2077 C33.7967,23.3247 29.8017,17.0237 24.9187,14.2047" id="Fill-16" fill="#567D72" mask="url(#mask-4)"></path>
+        </g>
+    </g>
+</svg>
diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss
index 0edc0c7c4..41cc1fac4 100644
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@@ -1,5 +1,5 @@
 @mixin button {
-  font-family: $mono;
+  font-family: $font-family-open-sans;
   height: $button-height;
   line-height: $button-height;
   background-color: transparent;
diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss
index 7e5d35917..c9f0431ad 100644
--- a/website/source/assets/stylesheets/_components.scss
+++ b/website/source/assets/stylesheets/_components.scss
@@ -5,7 +5,6 @@ header .header {
   h1 {
     margin-bottom: -8px;
     margin-top: 60px;
-    text-transform: uppercase;
   }
 
   span {
@@ -19,15 +18,19 @@ header .header {
   background-position: 35px -40px;
   background-size: 100%;
 
-  h2 {
-    margin-top: 70px;
+  @media (min-width: 1200px) {
+    h1 {
+      margin-top: 100px;
+    }
   }
 
   @media (max-width: $screen-md-max) {
     height: $hero-height;
 
-    h2 {
-      font-size: 2.1em;
+    h1 {
+      font-size: 36px;
+      padding-top: 1em;
+      padding-bottom: 1em;
     }
   }
 
@@ -35,9 +38,10 @@ header .header {
     height: auto;
     background: none;
 
-    h2 {
+    h1 {
       margin: 0;
-      padding: 1em;
+      padding-top: 1em;
+      margin-bottom: 1em;
     }
   }
 }
@@ -57,7 +61,6 @@ header .header {
 
     @media (max-width: $screen-sm) {
       background: none;
-      font-size: 75%;
       min-height: 50px;
       padding: 0;
     }
@@ -72,16 +75,19 @@ header .header {
   }
 
   h2 {
-    font-family: $serif;
     font-size: 44px;
     color: #7bc6b1;
     margin: 0px;
     padding: 0px;
-    padding-top: 7px;
+    padding-top: 15px;
     padding-bottom: 3px;
     line-height: 1.0;
     white-space: nowrap;
 
+    @media (max-width: $screen-sm) {
+      font-size: 30px;
+    }
+
     &:hover {
       color: $dark-background;
     }
@@ -181,7 +187,7 @@ header .header {
         color: #b1d631;
         font-size: 14px;
         font-weight: normal;
-        font-family: $mono;
+        font-family: $font-family-mono;
         text-shadow: 0 0 0;
       }
 
@@ -203,7 +209,6 @@ header .header {
         margin-right: 20px;
 
         li {
-          font-family: $serif;
           font-size: 17px;
           line-height: (30/17) !important;
           margin-bottom: $baseline;
@@ -225,10 +230,8 @@ header .header {
       }
 
       div.alert {
-        font-family: $serif;
         font-size: 17px;
         line-height: 1.5;
-        letter-spacing: 1px;
         margin-left: -135px;
         margin-right: -135px;
         padding-top: 40px;
@@ -256,20 +259,21 @@ header .header {
     }
 
     h1 {
-      font-size: 40px;
       line-height: (25/20);
-      text-transform: uppercase;
+      font-weight: 600;
     }
 
     h2 {
       margin-top: $baseline * 2;
       text-transform: capitalize;
+      font-weight: 600;
     }
 
     h3 {
-      margin-top: $baseline;
+      margin-top: $baseline * 2;
       text-transform: capitalize;
-      font-size: 26px;
+      font-size: 24px;
+      font-weight: 600;
     }
   }
 }
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index e6bb091e3..b5ec8db11 100644
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -9,13 +9,12 @@
   background-color: $black;
   .navbar-brand {
     .logo{
-      color: $green;
-      padding-left: 36px;
-      font-size: 22px;
-      line-height: 77px;
-      background: image-url('logo-header.png') 0 0 no-repeat;
-      @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
-      background-position: 0 center;
+      width: 110px;
+      height: 42px;
+      line-height: 70px;
+      margin-top: 15px;
+      background: image-url('logo-header.svg') 0 0 no-repeat;
+      font-size: 0;
 
       &:hover{
         opacity: .6;
@@ -60,32 +59,22 @@
 }
 
 @media (max-width: 768px) {
-  #header {
-    .navbar-brand {
-
-    }
-  }
-}
-
-@media (max-width: 414px) {
   #header {
     .navbar-brand {
       .logo{
-        padding-left: 37px;
-        font-size: 18px;
-        @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75);
-        //background-position: 0 45%;
+        margin-left: 18px;
       }
     }
   }
 }
 
-
-@media (max-width: 320px) {
+@media (max-width: 414px) {
   #header {
     .navbar-brand {
       .logo{
-        font-size: 0 !important; //hide terraform text
+        width: 84px;
+        height: 32px;
+        background-size: contain;;
       }
     }
   }
diff --git a/website/source/assets/stylesheets/_helpers.scss b/website/source/assets/stylesheets/_helpers.scss
index 1f95b8f0e..c952e645c 100644
--- a/website/source/assets/stylesheets/_helpers.scss
+++ b/website/source/assets/stylesheets/_helpers.scss
@@ -19,7 +19,7 @@ $border-dark: #333;
 // base measures
 $baseline: 20px;
 $base-font-size: 16px;
-$base-line-height: 20px;
+$base-line-height: 1.5;
 $button-height: 60px;
 
 .center {
@@ -40,13 +40,13 @@ $sidebar-width: 250px;
 
 
 //typography
-$serif: 'myriad-pro', helvetica, Georgia, serif;
-$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$mono: 'Inconsolata', 'courier new', courier, monospace;
+$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-mono: 'Inconsolata', 'Monaco', 'courier new', courier, monospace;
 
-.serif { font-family: $serif; }
-.sans { font-family: $sans; }
-.mono { font-family: $mono; }
+.open-sans { font-family: $font-family-open-sans;}
+.klavika { font-family: $font-family-klavika; }
+.mono { font-family: $font-family-mono; }
 
 .text-center { text-align: center !important; }
 .text-left { text-align: left !important; }
@@ -56,15 +56,6 @@ $mono: 'Inconsolata', 'courier new', courier, monospace;
 
 .uppercase { text-transform: uppercase !important; }
 
-@font-face {
-    font-family: 'HeimatStencil-SemiBold';
-    src: font-url('2772B2_0_0.eot');
-    src: font-url('2772B2_0_0.woff') format('woff'),
-         font-url('2772B2_0_0.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
 //color
 .dark-background {
   background-color: #000;
diff --git a/website/source/assets/stylesheets/_reset.scss b/website/source/assets/stylesheets/_reset.scss
index 5a417ec09..db6b68457 100644
--- a/website/source/assets/stylesheets/_reset.scss
+++ b/website/source/assets/stylesheets/_reset.scss
@@ -9,7 +9,7 @@ form, input, textarea, button {
   -khtml-border-radius: 0;
   border-radius: 0;
   background-color: transparent;
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: $base-font-size;
   line-height: 1.0;
   color: inherit;
diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss
index b1450fbd3..81237ef95 100644
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@@ -3,7 +3,7 @@
   max-width: 320px;
   $border: 1px solid $gray-dark;
   font-size: 16px;
-  font-family: $mono;
+  font-family: $font-family-mono;
   color: $gray-light;
   background-color: $sidebar-background-color;
 
diff --git a/website/source/assets/stylesheets/_styles.scss b/website/source/assets/stylesheets/_styles.scss
index 077ec44d8..beac0f638 100644
--- a/website/source/assets/stylesheets/_styles.scss
+++ b/website/source/assets/stylesheets/_styles.scss
@@ -17,20 +17,22 @@ html {
 
 body {
   background-color: $background;
-  font-family: $sans;
-  letter-spacing: 1px;
+  font-family: $font-family-open-sans;
   font-size: $base-font-size;
+  font-weight: 400;
   line-height: $base-line-height;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  letter-spacing: 2px;
-  font-weight: normal;
+.home {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $font-family-klavika;
+    letter-spacing: 1px;
+    font-weight: normal;
+  }
 }
 
 h1 {
-  font-family: $sans;
-  font-size: 70px;
+  font-size: 42px;
   line-height: (80/70);
   @include respond-to(mobile) {
     font-size: 50px;
@@ -39,9 +41,9 @@ h1 {
 }
 
 h2 {
-  font-family: $sans;
-  font-size: 40px;
+  font-size: 36px;
   line-height: (50/40);
+  text-transform: uppercase;
 
   &.has-dividers {
     //overflow: auto !important;
@@ -55,38 +57,31 @@ h2 {
 }
 
 h3 {
-  font-family: $sans;
-  font-size: 20px;
+  font-size: 24px;
   line-height: (30/20);
 }
 
 h4 {
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: 20px;
   line-height: (30/20);
 }
 
 h5 {
-  font-family: $sans;
   font-size: 16px;
   line-height: (22/16);
 }
 
 h6 {
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: 16px;
   line-height: (22/16);
 }
 
 p {
-  font-family: $serif;
-  font-size: 17px;
-  line-height: (30/17);
-  letter-spacing: 1px;
 
   &.large-text {
     font-size: 20px;
-    line-height: (35/20);
   }
 
   a {
@@ -121,10 +116,8 @@ dt {
 }
 
 dd {
-  font-family: $serif;
   font-size: 17px;
   line-height: 1.5;
-  letter-spacing: 1px;
   margin-bottom: 30px;
 }
 
@@ -159,7 +152,7 @@ pre {
 }
 
 table {
-  font-family: $mono;
+  font-family: $font-family-mono;
   margin: ($baseline * 2) 0;
   color: $gray-dark;
 
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 1603f9e02..500f9d42f 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -7,10 +7,10 @@ description: Packer is a free and open source tool for creating golden images
   <header class="dark-background">
     <div class="container hero">
       <div class="row">
-        <div class="col-md-4 col-md-offset-1">
-          <h2>
+        <div class="col-md-6">
+          <h1>
             <span class="text-green">Packer</span> is a tool for creating machine and container images for multiple platforms from a single source configuration.
-          </h2>
+          </h1>
         </div>
       </div>
     </div>
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb
index 4841fbed8..db61fc82e 100644
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@@ -13,12 +13,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
     <link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
-    <script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
-    <script type="text/javascript">
-      try {
-        Typekit.load();
-      } catch (e) {}
-    </script>
+
     <!-- Google Tag Manager -->
     <script>
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -28,6 +23,11 @@
           })(window,document,'script','dataLayer','GTM-NR2SD7C');
     </script>
     <!-- End Google Tag Manager -->
+
+    <!-- Typekit script to import Klavika -->
+    <script src="https://use.typekit.net/wxf7mfi.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
   </head>
   <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
     <!-- Google Tag Manager (noscript) -->