diff --git a/src/components/BlockQuote/README.md b/src/components/BlockQuote/README.md
new file mode 100644
index 0000000..f9e512c
--- /dev/null
+++ b/src/components/BlockQuote/README.md
@@ -0,0 +1,5 @@
+```js
+<BlockQuote>
+  vx is collection of reusable low-level visualization components.
+</BlockQuote>
+```
diff --git a/src/components/BlockQuote/index.js b/src/components/BlockQuote/index.js
new file mode 100644
index 0000000..3208e5e
--- /dev/null
+++ b/src/components/BlockQuote/index.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../ThemeContext/withTheme';
+
+const BlockQuote = styled('blockquote')({
+  padding: '8px 16px',
+  lineHeight: 1.8,
+  color: '#777777',
+  borderLeft: '2px solid #EFEFEF'
+}, ({ theme }) => ({
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
+}));
+
+BlockQuote.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(BlockQuote);
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index ba8fd75..82ef58b 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -30,9 +30,11 @@ const Button = styled('button')({
     backgroundColor: color
   });
 
-  styles.push({ fontFamily: bold ? theme.titleFontFamily : theme.fontFamily });
-
-  styles.push({ fontWeight: bold ? 800 : 700 });
+  styles.push({
+    fontFamily: bold ? theme.titleFontFamily : theme.fontFamily,
+    fontSize: theme.fontSize,
+    fontWeight: bold ? 800 : 700
+  });
 
   if (bold) styles.push({
     lineHeight: 1.8,
diff --git a/src/components/Card/CardContent/index.js b/src/components/Card/CardContent/index.js
index b565da0..0bfd6b9 100644
--- a/src/components/Card/CardContent/index.js
+++ b/src/components/Card/CardContent/index.js
@@ -5,7 +5,8 @@ import withTheme from '../../ThemeContext/withTheme';
 const CardContent = styled('div')({
   lineHeight: 1.8
 }, ({ theme }) => ({
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
 }));
 
 CardContent.propTypes = {
diff --git a/src/components/Card/CardTitle/index.js b/src/components/Card/CardTitle/index.js
index cf1db05..79606aa 100644
--- a/src/components/Card/CardTitle/index.js
+++ b/src/components/Card/CardTitle/index.js
@@ -4,10 +4,11 @@ import withTheme from '../../ThemeContext/withTheme';
 
 const CardTitle = styled('h3')({
   marginTop: 0,
-  marginBottom: 12
+  marginBottom: 8
 }, ({ theme }) => ({
   color: theme.primaryColor,
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize * 1.1
 }));
 
 CardTitle.propTypes = {
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
index d9802ff..617fa84 100644
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -10,7 +10,8 @@ const Card = styled('article')({
   color: black,
   backgroundColor: cardGrey
 }, ({ theme }) => ({
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
 }));
 
 Card.propTypes = {
diff --git a/src/components/Link/index.js b/src/components/Link/index.js
index e05c401..22e94e4 100644
--- a/src/components/Link/index.js
+++ b/src/components/Link/index.js
@@ -16,7 +16,8 @@ const generateLink = (Component) => {
     }
   }, ({ theme }) => ({
     color: theme.primaryColor,
-    fontFamily: theme.fontFamily
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSize
   }));
 
   Styled.propTypes = {
diff --git a/src/components/ThemeContext/VxThemeProvider/FontProvider/README.md b/src/components/ThemeContext/VxThemeProvider/FontProvider/README.md
new file mode 100644
index 0000000..461b34b
--- /dev/null
+++ b/src/components/ThemeContext/VxThemeProvider/FontProvider/README.md
@@ -0,0 +1,5 @@
+```js
+<FontProvider>
+  The correct font is available here!
+</FontProvider>
+```
diff --git a/src/components/ThemeContext/VxThemeProvider/FontProvider/index.js b/src/components/ThemeContext/VxThemeProvider/FontProvider/index.js
new file mode 100644
index 0000000..eb9af40
--- /dev/null
+++ b/src/components/ThemeContext/VxThemeProvider/FontProvider/index.js
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../../withTheme';
+
+const FontProvider = styled('div')(({ theme }) => ({
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
+}));
+
+FontProvider.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(FontProvider);
diff --git a/src/components/ThemeContext/VxThemeProvider/README.md b/src/components/ThemeContext/VxThemeProvider/README.md
index 5e46247..1897a68 100644
--- a/src/components/ThemeContext/VxThemeProvider/README.md
+++ b/src/components/ThemeContext/VxThemeProvider/README.md
@@ -3,6 +3,6 @@
   This component sets the ThemeContext which is used by other components. Its use is not obligatory, but if you do use it, use it at the top level of your app.
   <br />
   <br />
-  It also sets the <Code>font-family</Code>, thus rendering <Code>font.css</Code> useless.
+  It also sets the <Code>font-family</Code> and <Code>font-size</Code>, thus rendering <Code>font.css</Code> useless.
 </VxThemeProvider>
 ```
diff --git a/src/components/ThemeContext/VxThemeProvider/index.js b/src/components/ThemeContext/VxThemeProvider/index.js
index 7300a67..5099f8c 100644
--- a/src/components/ThemeContext/VxThemeProvider/index.js
+++ b/src/components/ThemeContext/VxThemeProvider/index.js
@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ThemeContext, { defaultTheme } from '../index';
-import { defaultFontFamily } from '../../../styles';
+import FontProvider from './FontProvider';
 
-const fontStyle = { fontFamily: defaultFontFamily };
-
-const VxThemeProvider = ({ theme, ...props }) => (
-  <div style={fontStyle}>
-    <ThemeContext.Provider
-      value={{ ...defaultTheme, ...theme }}
-      {...props}
-    />
-  </div>
+const VxThemeProvider = ({ theme, children, ...props }) => (
+  <ThemeContext.Provider
+    value={{ ...defaultTheme, ...theme }}
+    {...props}
+  >
+    <FontProvider>
+      {children}
+    </FontProvider>
+  </ThemeContext.Provider>
 );
 
 VxThemeProvider.propTypes = {
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  children: PropTypes.node
 };
 
 export default VxThemeProvider;
diff --git a/src/components/ThemeContext/index.js b/src/components/ThemeContext/index.js
index 137d401..757609f 100644
--- a/src/components/ThemeContext/index.js
+++ b/src/components/ThemeContext/index.js
@@ -6,6 +6,7 @@ export const defaultTheme = {
   primaryColor: red,
   secondaryColor: darkGrey,
   fontFamily: defaultFontFamily,
+  fontSize: 18,
   titleFontFamily
 };
 
diff --git a/src/font.css b/src/font.css
index d60ce18..21b1bb0 100644
--- a/src/font.css
+++ b/src/font.css
@@ -1,3 +1,4 @@
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ font-size: 18px;
 }