diff --git a/ionic/components/app/test/typography/index.ts b/ionic/components/app/test/typography/index.ts
new file mode 100644
index 0000000000..ff6f299c59
--- /dev/null
+++ b/ionic/components/app/test/typography/index.ts
@@ -0,0 +1,11 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    app.setTitle('Basic Buttons');
+  }
+}
diff --git a/ionic/components/app/test/typography/main.html b/ionic/components/app/test/typography/main.html
new file mode 100644
index 0000000000..ac073f04a1
--- /dev/null
+++ b/ionic/components/app/test/typography/main.html
@@ -0,0 +1,32 @@
+
+<ion-toolbar>
+  <ion-title>Typography</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+
+  <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+
+  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+
+  <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+
+  <p>
+    p: The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog.
+    The quick brown fox jumps over the lazy dog. 
+  </p>
+
+</ion-content>
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index b6ef131a17..436be3a32b 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -11,6 +11,13 @@ $font-size-root:               62.5% !default;
 $headings-font-weight:         500 !default;
 $headings-line-height:         1.2 !default;
 
+$h1-font-size:                 3.6rem !default;
+$h2-font-size:                 3.0rem !default;
+$h3-font-size:                 2.4rem !default;
+$h4-font-size:                 2.0rem !default;
+$h5-font-size:                 1.6rem !default;
+$h6-font-size:                 1.4rem !default;
+
 
 html {
   font-size: $font-size-root;
@@ -42,29 +49,29 @@ h2 + h3 {
 }
 
 h1 {
-  font-size: 3.6rem;
+  font-size: $h1-font-size;
   margin-top: 2rem;
 }
 
 h2 {
-  font-size: 3rem;
+  font-size: $h2-font-size;
   margin-top: 1.8rem;
 }
 
 h3 {
-  font-size: 2.4rem;
+  font-size: $h3-font-size;
 }
 
 h4 {
-  font-size: 2rem;
+  font-size: $h4-font-size;
 }
 
 h5 {
-  font-size: 1.6rem;
+  font-size: $h5-font-size;
 }
 
 h6 {
-  font-size: 1.4rem;
+  font-size: $h6-font-size;
 }
 
 small {