diff --git a/src/elements/typography/README.md b/src/elements/typography/README.md
new file mode 100644
index 0000000..69980cc
--- /dev/null
+++ b/src/elements/typography/README.md
@@ -0,0 +1,16 @@
+# Typography
+```html
+<div>
+  <h1>H1</h1>
+  <h2>H2</h2>
+  <h3>H3</h3>
+  <h4>H4</h4>
+  <h5>H5</h5>
+  <h6>H6</h6>
+  <h7>H7</h7>
+  <p>P</p>
+</div>
+```
+
+### Description
+This is the base typography alignment and spacing.
diff --git a/src/elements/typography/index.js b/src/elements/typography/index.js
new file mode 100644
index 0000000..ccf6b7a
--- /dev/null
+++ b/src/elements/typography/index.js
@@ -0,0 +1,16 @@
+import { PropTypes } from "react";
+
+const Typography = () => (
+  <div>
+    <h1>H1</h1>
+    <h2>H2</h2>
+    <h3>H3</h3>
+    <h4>H4</h4>
+    <h5>H5</h5>
+    <h6>H6</h6>
+    <h7>H7</h7>
+    <p>P</p>
+  </div>
+  );
+
+export default Typography;
diff --git a/src/elements/typography/index.story.js b/src/elements/typography/index.story.js
new file mode 100644
index 0000000..0566991
--- /dev/null
+++ b/src/elements/typography/index.story.js
@@ -0,0 +1,21 @@
+import { storiesOf } from "@kadira/storybook";
+import backgrounds from "react-storybook-addon-backgrounds";
+import withReadme from "storybook-readme/with-readme";
+import centered from "../../../.storybook/decorators/centered";
+import defaultColors from "../../defaults";
+
+import Typography from "./index";
+import Readme from "./README.md";
+
+const story = storiesOf("Typography", module)
+  .addDecorator(centered)
+  .addDecorator(backgrounds(defaultColors()));
+
+story.add(
+  "Typography",
+  withReadme(Readme,
+    () => (
+      <Typography />
+    )
+  )
+);