diff --git a/website/pages/index.html b/website/pages/index.html
index 317048ca..2136e1c1 100644
--- a/website/pages/index.html
+++ b/website/pages/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KaTeX – The fastest math typesetting library for the web</title>
     <meta name="Description" content="KaTeX – The fastest math typesetting library for the web">
     <meta property="og:title" content="KaTeX – The fastest math typesetting library for the web">
@@ -11,11 +12,9 @@
     <meta property="og:description" content="Simple API, no dependencies – yet super-fast on all major browsers.">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css" integrity="sha256-7GAtDQ79wTEOjhBKf70uBQG7A5yyb+8rigu07atXWDY=" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,700i" rel="stylesheet">
     <link href="https://use.fontawesome.com/efe646278d.css" type="text/css" rel="stylesheet">
     <link href="static/index.css" type="text/css" rel="stylesheet">
-    <script src="//use.typekit.net/ulc1wme.js"></script>
-    <script>try{Typekit.load();}catch(e){}</script>
   </head>
   <body>
     <div class="header"><div class="container">
diff --git a/website/static/static/index.css b/website/static/static/index.css
index 57ca8336..8834c92a 100644
--- a/website/static/static/index.css
+++ b/website/static/static/index.css
@@ -1,11 +1,16 @@
 body {
-    font: 16px/1.4 "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font: 16px/1.4 "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    margin: 0;
+}
+
+b {
+  font-weight: bolder;
 }
 
 .container {
     margin: 0 auto;
-    margin: 0 auto;
-    width: 800px;
+    width: 100%;
+    max-width: 800px;
 }
 
 .header, .footer {
@@ -22,14 +27,14 @@ body {
 .cta a {
     border-radius: 3px;
     display: inline-block;
-    font-weight: 600;
+    font-weight: 700;
     margin: 0 10px;
     padding: 8px 24px;
     text-decoration: none;
 }
 
 .header {
-    padding: 40px 0 0;
+    padding: 40px 15px 0;
 }
 
 .logo {
@@ -46,7 +51,7 @@ body {
 }
 
 .tagline em {
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .header .cta a {
@@ -64,18 +69,19 @@ body {
     margin: 50px 0 0;
 }
 
-.demo,
-.demo-left,
-.demo-right {
-    height: 260px;
+.demo {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 
 .demo-left,
 .demo-right {
     box-sizing: border-box;
-    float: left;
     padding: 20px 30px;
-    width: 50%;
+    height: 260px;
+    width: 100%;
 }
 
 .demo-instructions {
@@ -95,6 +101,8 @@ body {
     color: #fff;
     font: 14px Menlo, monospace;
     height: 160px;
+    margin: 0;
+    overflow: auto;
     padding: 10px;
     resize: none;
     width: 100%;
@@ -116,21 +124,22 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     min-height: 400px;
     position: relative;
-    padding: 30px 0;
+    padding: 30px 15px;
 }
 
 .subtagline {
     color: #329894;
     font-size: 24px;
-    font-weight: 600;
+    font-weight: 700;
     padding: 20px 0;
     text-align: center;
 }
 
 .features {
     font-size: 20px;
+    font-weight: 300;
     margin: 0 auto;
-    width: 540px;
+    max-width: 540px;
 }
 
 .features > li {
@@ -167,7 +176,7 @@ body {
     background-position: 50% 50%;
     background-size: cover;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    height: 340px;
+    padding-top: 42%;
     width: 100%;
 }
 
@@ -185,7 +194,7 @@ body {
 }
 
 .footer {
-    padding: 30px 0;
+    padding: 30px 15px;
     font-size: 21px;
 }
 
@@ -210,3 +219,20 @@ body {
 .errorMessage {
     color: red;
 }
+
+@media only screen and (min-width: 736px) {
+    .demo-left,
+    .demo-right {
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+    }
+}
+
+@media only screen and (max-width: 735px) {
+    .cta a {
+        display: block;
+        margin-bottom: 10px;
+    }
+}
