diff --git a/.flowconfig b/.flowconfig
index 389f89a9..9ff2061a 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,7 +1,14 @@
+[version]
+0.32.0
+
 [ignore]
-.*/website/.*
+.*/test/.*
+.*/www/.*
+.*/node_modules/typography/.*
+.*/node_modules/fbjs/.*
+.*/node_modules/react-side-effect/.*
+
 [include]
-./*
 
 [libs]
 
diff --git a/.gitignore b/.gitignore
index 07973feb..8653d662 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,4 @@ npm-debug*
 examples/bundle.js
 .gatsby-context.js
 .idea/
+www/public
diff --git a/README.md b/README.md
index 8af88bc0..b5b70ebd 100644
--- a/README.md
+++ b/README.md
@@ -206,12 +206,12 @@ When creating a new instance of Typography, you can pass in an
 * **title**: The theme title.
 * **baseFontSize**: The base font size in pixels, defaults to `16px`.
 * **baseLineHeight**: The base line height using the css unitless number, defaults to `1.5`.
-* **scale**: The "scale ratio" for the theme. This scale is the ratio
-  between the `h1` font size and the `baseFontSize`. So if the scale is `2`
+* **scaleRatio**: The "scale ratio" for the theme. This value is the ratio
+  between the `h1` font size and the `baseFontSize`. So if the scale ratio is `2`
   and the `baseFontSize` is `16px` then the `h1` font size is `32px`.
 ```javascript
 {
-  scale: 2,
+  scaleRatio: 2,
 }
 ```
 * **googleFonts**: An array specifying Google Fonts for this project.
diff --git a/Types.js b/Types.js
index 8d6860f2..9637bbce 100644
--- a/Types.js
+++ b/Types.js
@@ -1,11 +1,16 @@
 // @flow
 type GoogleFontsType = {name: string; styles: string[]}
+type VerticalRhythmType = {
+  rhythm: (value: number) => string,
+  scale: (value: number) => Object,
+  adjustFontSizeTo: (value?: number | string) => Object,
+}
 
 export type OptionsType = {
   title: string,
   baseFontSize?: string,
   baseLineHeight?: number,
-  scale?: number,
+  scaleRatio?: number,
   googleFonts?: GoogleFontsType[],
   headerFontFamily?: string[],
   bodyFontFamily?: string[],
@@ -16,15 +21,15 @@ export type OptionsType = {
   headerWeight?: number | string,
   bodyWeight?: number | string,
   boldWeight?: number | string,
-  blockMarginBottom?: number | string,
+  blockMarginBottom?: number,
   includeNormalize?: boolean,
   overrideStyles?: (
-    verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here.
+    verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
     options: OptionsType,
     styles: mixed,
   ) => Object,
   overrideThemeStyles?: (
-    verticalRhythm: mixed, // TODO Create flow type for compass-vertical-rhythm and import here.
+    verticalRhythm: VerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
     options: OptionsType,
     styles: mixed,
   ) => Object,
diff --git a/docs/what.md b/docs/what.md
index 76695c6b..7af48de5 100644
--- a/docs/what.md
+++ b/docs/what.md
@@ -31,16 +31,15 @@ font size will be `32px`.  If you decide to change the scale ratio to
 Typography.js, all sizes should be set using a scale value so all
 non-base-font-size text can be resized together.
 
-You can set custom font sizes using the `adjustFontSizeToMSValue`
-function.
+You can set custom font sizes using the `scale` function.
 
 ```javascript
-import { adjustFontSizeToMSValue } from '../utils/typography'
+import { scale } from '../utils/typography'
 
 <div>
   <h1
     style={{
-      ...adjustFontSizeToMSValue(1.5),
+      ...scale(1.5),
     }}
   >
     Hello world
diff --git a/package.json b/package.json
index 96f2e44e..4eb2e8c4 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,22 @@
 {
   "devDependencies": {
-    "babel-cli": "^6.10.1",
+    "babel-cli": "^6.14.0",
     "babel-eslint": "^6.1.2",
-    "babel-plugin-transform-flow-strip-types": "^6.8.0",
+    "babel-plugin-transform-flow-strip-types": "^6.14.0",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015": "^6.14.0",
     "babel-preset-stage-0": "^6.5.0",
-    "eslint": "^3.0.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-flow-vars": "^0.4.0",
-    "eslint-plugin-import": "^1.10.2",
-    "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-react": "^5.2.2",
-    "flow-bin": "^0.28.0",
-    "glob": "^7.0.5",
+    "eslint": "^3.5.0",
+    "eslint-config-airbnb": "^11.1.0",
+    "eslint-plugin-flow-vars": "^0.5.0",
+    "eslint-plugin-import": "^1.15.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^6.3.0",
+    "flow-bin": "^0.32.0",
+    "glob": "^7.1.0",
     "json2md": "^1.5.2",
     "lerna": "^2.0.0-beta.24",
-    "lodash": "^4.13.1",
+    "lodash": "^4.16.1",
     "phantom": "^2.1.12",
     "phantomjs-prebuilt": "^2.1.7"
   },
diff --git a/packages/typography-design-tools/src/DesignTool.js b/packages/typography-design-tools/src/DesignTool.js
index bc0b0918..52ec9ab8 100644
--- a/packages/typography-design-tools/src/DesignTool.js
+++ b/packages/typography-design-tools/src/DesignTool.js
@@ -228,10 +228,10 @@ class DesignTool extends React.Component {
           <SectionRow>
             <ModularScaleTool
               key='scale'
-              scale={this.state.options.scale}
+              scaleRatio={this.state.options.scaleRatio}
               onChange={(newScale) => {
                 const newOptions = { ...this.state.options }
-                newOptions.scale = newScale
+                newOptions.scaleRatio = newScale
                 this.setState({ options: newOptions })
               }}
             />
diff --git a/packages/typography-design-tools/src/ModularScaleTool.js b/packages/typography-design-tools/src/ModularScaleTool.js
index 8a1430d0..e58d524f 100644
--- a/packages/typography-design-tools/src/ModularScaleTool.js
+++ b/packages/typography-design-tools/src/ModularScaleTool.js
@@ -8,11 +8,11 @@ class ModularScale extends React.Component {
   render () {
     return (
       <SectionTool
-        title="Scale"
+        title="Scale Ratio"
       >
         <NumberEditor
-          unit="scale"
-          value={msToRatio(this.props.scale)}
+          unit="ratio"
+          value={msToRatio(this.props.scaleRatio)}
           min={1}
           max={6}
           step={0.1}
diff --git a/packages/typography-theme-alton/src/index.js b/packages/typography-theme-alton/src/index.js
index 1ff60b64..35b25112 100644
--- a/packages/typography-theme-alton/src/index.js
+++ b/packages/typography-theme-alton/src/index.js
@@ -32,7 +32,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const vr = verticalRhythm({
       baseFontSize: '16px',
       baseLineHeight: '28.44px',
@@ -47,7 +47,7 @@ const theme: OptionsType = {
         color: gray(options.bodyGray),
       },
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         color: gray(41),
         fontStyle: 'italic',
         paddingLeft: rhythm(13/16),
diff --git a/packages/typography-theme-bootstrap/src/index.js b/packages/typography-theme-bootstrap/src/index.js
index 343a6f33..2e322bd1 100644
--- a/packages/typography-theme-bootstrap/src/index.js
+++ b/packages/typography-theme-bootstrap/src/index.js
@@ -23,18 +23,18 @@ const theme: OptionsType = {
   bodyWeight: 400,
   headerWeight: 500,
   boldWeight: 'bold',
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     body: {
       color: gray(23, 204),
     },
-    h1: adjustFontSizeToMSValue(4/4),
-    h2: adjustFontSizeToMSValue(3/4),
-    h3: adjustFontSizeToMSValue(2/4),
-    h4: adjustFontSizeToMSValue(1/6),
-    h5: adjustFontSizeToMSValue(-1/6),
-    h6: adjustFontSizeToMSValue(-2/6),
+    h1: scale(4/4),
+    h2: scale(3/4),
+    h3: scale(2/4),
+    h4: scale(1/6),
+    h5: scale(-1/6),
+    h6: scale(-2/6),
     blockquote: {
-      ...adjustFontSizeToMSValue(1/4),
+      ...scale(1/4),
       borderLeft: `${rhythm(1/6)} solid #eceeef`,
       paddingTop: rhythm(1/3),
       paddingBottom: rhythm(1/3),
diff --git a/packages/typography-theme-de-young/src/index.js b/packages/typography-theme-de-young/src/index.js
index 43a23037..6e9a1fae 100644
--- a/packages/typography-theme-de-young/src/index.js
+++ b/packages/typography-theme-de-young/src/index.js
@@ -32,7 +32,7 @@ const theme: OptionsType = {
   headerWeight: 500,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ rhythm }) => {
     const vr = verticalRhythm({
       baseFontSize: '18px',
       baseLineHeight: '29.7px',
diff --git a/packages/typography-theme-doelger/src/index.js b/packages/typography-theme-doelger/src/index.js
index 09c421d7..71655f05 100644
--- a/packages/typography-theme-doelger/src/index.js
+++ b/packages/typography-theme-doelger/src/index.js
@@ -30,7 +30,7 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#ff483b'
     return {
       a: {
@@ -49,7 +49,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
         color: gray(35),
         paddingLeft: rhythm(10/16),
@@ -83,4 +83,3 @@ const theme: OptionsType = {
 }
 
 export default theme
-
diff --git a/packages/typography-theme-elk-glen/src/index.js b/packages/typography-theme-elk-glen/src/index.js
index 11ff72e0..3b62df2b 100644
--- a/packages/typography-theme-elk-glen/src/index.js
+++ b/packages/typography-theme-elk-glen/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#292d35'
     const vr = verticalRhythm({
       baseFontSize: '17px',
@@ -53,7 +53,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
         color: gray(35),
         paddingLeft: rhythm(10/16),
diff --git a/packages/typography-theme-fairy-gates/src/index.js b/packages/typography-theme-fairy-gates/src/index.js
index 6fdd8c40..db25d534 100644
--- a/packages/typography-theme-fairy-gates/src/index.js
+++ b/packages/typography-theme-fairy-gates/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: '600',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#1ca086'
     const vr = verticalRhythm({
       baseFontSize: '17px',
@@ -54,7 +54,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
         color: gray(35),
         paddingLeft: rhythm(10/16),
diff --git a/packages/typography-theme-funston/src/index.js b/packages/typography-theme-funston/src/index.js
index ddbabfe1..185db73b 100644
--- a/packages/typography-theme-funston/src/index.js
+++ b/packages/typography-theme-funston/src/index.js
@@ -29,7 +29,7 @@ const theme: OptionsType = {
   headerWeight: '400',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     html: {
       '-webkit-font-smoothing': 'antialiased',
     },
@@ -43,7 +43,7 @@ const theme: OptionsType = {
       color: '#3498DB',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(40),
       paddingLeft: rhythm(13/16),
       marginLeft: rhythm(-1),
diff --git a/packages/typography-theme-grand-view/src/index.js b/packages/typography-theme-grand-view/src/index.js
index a602a9ff..6c519032 100644
--- a/packages/typography-theme-grand-view/src/index.js
+++ b/packages/typography-theme-grand-view/src/index.js
@@ -30,7 +30,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#d65947',
       textDecoration: 'none',
@@ -42,7 +42,7 @@ const theme: OptionsType = {
       marginTop: rhythm(2),
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       paddingLeft: rhythm(13/16),
       marginLeft: 0,
diff --git a/packages/typography-theme-irving/src/index.js b/packages/typography-theme-irving/src/index.js
index ecf15c9d..a22cef1b 100644
--- a/packages/typography-theme-irving/src/index.js
+++ b/packages/typography-theme-irving/src/index.js
@@ -30,7 +30,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const styles = {
       a: {
         color: gray(options.bodyGray),
@@ -39,7 +39,7 @@ const theme: OptionsType = {
         color: '#3498DB',
       },
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         color: gray(30),
         paddingLeft: rhythm(3/4),
         marginLeft: 0,
@@ -50,7 +50,7 @@ const theme: OptionsType = {
         marginBottom: rhythm(1/2),
       },
       table: {
-        ...adjustFontSizeToMSValue(-1/5),
+        ...scale(-1/5),
       },
       // Mobile styles.
       [TABLET_MEDIA_QUERY]: {
diff --git a/packages/typography-theme-judah/src/index.js b/packages/typography-theme-judah/src/index.js
index b0ba6f9c..7f3de5ca 100644
--- a/packages/typography-theme-judah/src/index.js
+++ b/packages/typography-theme-judah/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: 400,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#e51937',
       textDecoration: 'none',
@@ -41,7 +41,7 @@ const theme: OptionsType = {
       textDecoration: 'none',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(0),
       fontStyle: 'italic',
       paddingLeft: rhythm(13/16),
diff --git a/packages/typography-theme-kirkham/src/index.js b/packages/typography-theme-kirkham/src/index.js
index ba95ea53..be626a52 100644
--- a/packages/typography-theme-kirkham/src/index.js
+++ b/packages/typography-theme-kirkham/src/index.js
@@ -31,12 +31,12 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#9f392b',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       fontStyle: 'italic',
       paddingLeft: rhythm(13/16),
diff --git a/packages/typography-theme-lincoln/src/index.js b/packages/typography-theme-lincoln/src/index.js
index 16b3b486..500dd151 100644
--- a/packages/typography-theme-lincoln/src/index.js
+++ b/packages/typography-theme-lincoln/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: '400',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#134896'
     const vr = verticalRhythm({
       baseFontSize: '17px',
@@ -59,7 +59,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
         color: gray(35),
         paddingLeft: rhythm(10/16),
diff --git a/packages/typography-theme-moraga/src/index.js b/packages/typography-theme-moraga/src/index.js
index f0eeb551..258b565b 100644
--- a/packages/typography-theme-moraga/src/index.js
+++ b/packages/typography-theme-moraga/src/index.js
@@ -27,7 +27,7 @@ const theme: OptionsType = {
   headerWeight: '200',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ scale, rhythm }, options) => {
     const vr = verticalRhythm({
       baseFontSize: '16px',
       baseLineHeight: '24.88px',
@@ -47,7 +47,7 @@ const theme: OptionsType = {
         textDecoration: 'underline',
       },
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         color: gray(40),
         paddingLeft: rhythm(3/4),
         marginLeft: 0,
@@ -64,7 +64,7 @@ const theme: OptionsType = {
           paddingLeft: rhythm(1/2),
         },
         table: {
-          ...adjustFontSizeToMSValue(-1/5),
+          ...scale(-1/5),
         },
       },
     }
diff --git a/packages/typography-theme-ocean-beach/src/index.js b/packages/typography-theme-ocean-beach/src/index.js
index f5d1f9ba..b9b41207 100644
--- a/packages/typography-theme-ocean-beach/src/index.js
+++ b/packages/typography-theme-ocean-beach/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#950451'
     const vr = verticalRhythm({
       baseFontSize: '17px',
@@ -58,7 +58,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(6/16)} solid ${linkColor}`,
         color: gray(35),
         paddingLeft: rhythm(10/16),
diff --git a/packages/typography-theme-parnassus/src/index.js b/packages/typography-theme-parnassus/src/index.js
index 1bd41cd3..a9ee43be 100644
--- a/packages/typography-theme-parnassus/src/index.js
+++ b/packages/typography-theme-parnassus/src/index.js
@@ -32,7 +32,7 @@ const theme: OptionsType = {
   headerWeight: 800,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const vr = verticalRhythm({
       baseFontSize: '15px',
       baseLineHeight: '27.35px',
@@ -51,7 +51,7 @@ const theme: OptionsType = {
         marginTop: rhythm(2),
       },
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         color: gray(41),
         paddingLeft: rhythm(18/16),
         marginLeft: 0,
diff --git a/packages/typography-theme-st-annes/src/index.js b/packages/typography-theme-st-annes/src/index.js
index b3928f0c..aed43db0 100644
--- a/packages/typography-theme-st-annes/src/index.js
+++ b/packages/typography-theme-st-annes/src/index.js
@@ -30,7 +30,7 @@ const theme: OptionsType = {
   headerWeight: 600,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#fb251b',
       textDecoration: 'none',
@@ -42,7 +42,7 @@ const theme: OptionsType = {
       marginTop: rhythm(2),
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       paddingLeft: rhythm(18/16),
       marginLeft: 0,
diff --git a/packages/typography-theme-stern-grove/src/index.js b/packages/typography-theme-stern-grove/src/index.js
index 313afdf6..bdb6ab57 100644
--- a/packages/typography-theme-stern-grove/src/index.js
+++ b/packages/typography-theme-stern-grove/src/index.js
@@ -22,7 +22,7 @@ const theme: OptionsType = {
   headerWeight: 400,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#07e',
       textDecoration: 'none',
@@ -31,7 +31,7 @@ const theme: OptionsType = {
       color: '#e32',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       background: gray(97),
       color: gray(31),
       paddingLeft: rhythm(14/16),
diff --git a/packages/typography-theme-stow-lake/src/index.js b/packages/typography-theme-stow-lake/src/index.js
index a1a705a2..c37cf041 100644
--- a/packages/typography-theme-stow-lake/src/index.js
+++ b/packages/typography-theme-stow-lake/src/index.js
@@ -30,7 +30,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#4665b7',
       textDecoration: 'none',
@@ -42,7 +42,7 @@ const theme: OptionsType = {
       marginTop: rhythm(2),
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       paddingLeft: rhythm(18/16),
       marginLeft: 0,
diff --git a/packages/typography-theme-sutro/src/index.js b/packages/typography-theme-sutro/src/index.js
index 903dfaf5..4b94e54f 100644
--- a/packages/typography-theme-sutro/src/index.js
+++ b/packages/typography-theme-sutro/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 300,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     a: {
       color: '#f92300',
       textDecoration: 'none',
@@ -40,7 +40,7 @@ const theme: OptionsType = {
       textDecoration: 'underline',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       fontStyle: 'italic',
       paddingLeft: rhythm(13/16),
@@ -76,14 +76,14 @@ const theme: OptionsType = {
     },
     [TABLET_MEDIA_QUERY]: {
       h1: {
-        ...adjustFontSizeToMSValue(5/5),
+        ...scale(5/5),
       },
     },
     'h1,h2,h3,h4,h5,h6': {
       marginTop: rhythm(2),
     },
     h1: {
-      ...adjustFontSizeToMSValue(6/5),
+      ...scale(6/5),
       letterSpacing: '-2px',
     },
     h6: {
diff --git a/packages/typography-theme-twin-peaks/src/index.js b/packages/typography-theme-twin-peaks/src/index.js
index d074ee07..f32780af 100644
--- a/packages/typography-theme-twin-peaks/src/index.js
+++ b/packages/typography-theme-twin-peaks/src/index.js
@@ -31,7 +31,7 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 600,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => {
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => {
     const linkColor = '#ff5700'
     const vr = verticalRhythm({
       baseFontSize: '19px',
@@ -62,7 +62,7 @@ const theme: OptionsType = {
       },
       // Blockquote styles.
       blockquote: {
-        ...adjustFontSizeToMSValue(1/5),
+        ...scale(1/5),
         borderLeft: `${rhythm(3/16)} solid ${linkColor}`,
         color: gray(41),
         paddingLeft: rhythm(13/16),
diff --git a/packages/typography-theme-us-web-design-standards/src/index.js b/packages/typography-theme-us-web-design-standards/src/index.js
index 02f5cb1b..57066ba7 100644
--- a/packages/typography-theme-us-web-design-standards/src/index.js
+++ b/packages/typography-theme-us-web-design-standards/src/index.js
@@ -30,14 +30,14 @@ const theme: OptionsType = {
   headerWeight: 700,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
-    h1: adjustFontSizeToMSValue(5/5),
-    h2: adjustFontSizeToMSValue(3/5),
-    h3: adjustFontSizeToMSValue(1/5),
-    h4: adjustFontSizeToMSValue(0/5),
-    h5: adjustFontSizeToMSValue(-1/8),
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
+    h1: scale(5/5),
+    h2: scale(3/5),
+    h3: scale(1/5),
+    h4: scale(0/5),
+    h5: scale(-1/8),
     h6: {
-      ...adjustFontSizeToMSValue(-2/8),
+      ...scale(-2/8),
       fontFamily: options.bodyFontFamily.join(','),
       fontWeight: options.bodyWeight,
       textTransform: 'uppercase',
@@ -49,7 +49,7 @@ const theme: OptionsType = {
       color: '#4c2c92',
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/4),
+      ...scale(1/4),
       borderLeft: `${rhythm(1/6)} solid`,
       borderColor: gray(93),
       paddingTop: rhythm(1/3),
diff --git a/packages/typography-theme-wordpress-2012/src/index.js b/packages/typography-theme-wordpress-2012/src/index.js
index bc8e0feb..eadf04d0 100644
--- a/packages/typography-theme-wordpress-2012/src/index.js
+++ b/packages/typography-theme-wordpress-2012/src/index.js
@@ -24,7 +24,7 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     blockquote: {
       fontStyle: 'italic',
       paddingLeft: rhythm(1),
@@ -49,7 +49,7 @@ const theme: OptionsType = {
       marginLeft: rhythm(1.5),
     },
     table: {
-      ...adjustFontSizeToMSValue(-1/5),
+      ...scale(-1/5),
       color: gray(46),
     },
     th: {
diff --git a/packages/typography-theme-wordpress-2013/src/index.js b/packages/typography-theme-wordpress-2013/src/index.js
index cbf58bd1..c0d73f6b 100644
--- a/packages/typography-theme-wordpress-2013/src/index.js
+++ b/packages/typography-theme-wordpress-2013/src/index.js
@@ -30,13 +30,13 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     h1: {
-      ...adjustFontSizeToMSValue(8/5),
+      ...scale(8/5),
     },
     [TABLET_MEDIA_QUERY]: {
       h1: {
-        ...adjustFontSizeToMSValue(5/5),
+        ...scale(5/5),
       },
     },
     a: {
@@ -56,7 +56,7 @@ const theme: OptionsType = {
       paddingLeft: rhythm(1.5),
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       fontWeight: 300,
       fontStyle: 'italic',
       marginLeft: rhythm(1.5),
@@ -72,7 +72,7 @@ const theme: OptionsType = {
       marginBottom: rhythm(1.25),
     },
     table: {
-      ...adjustFontSizeToMSValue(-1/5),
+      ...scale(-1/5),
     },
     th: {
       fontWeight: options.boldWeight,
diff --git a/packages/typography-theme-wordpress-2014/src/index.js b/packages/typography-theme-wordpress-2014/src/index.js
index 5e999f1a..450274bf 100644
--- a/packages/typography-theme-wordpress-2014/src/index.js
+++ b/packages/typography-theme-wordpress-2014/src/index.js
@@ -25,7 +25,7 @@ const theme: OptionsType = {
   headerWeight: 600,
   bodyWeight: 400,
   boldWeight: 600,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     'h1,h2,h3,h4,h5,h6': {
       marginTop: rhythm(1.5),
       marginBottom: rhythm(0.5),
@@ -40,7 +40,7 @@ const theme: OptionsType = {
     },
     // Blockquote styles.
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       fontWeight: 300,
       color: gray(46),
       fontStyle: 'italic',
diff --git a/packages/typography-theme-wordpress-2015/src/index.js b/packages/typography-theme-wordpress-2015/src/index.js
index 1e76f152..26ddbe0c 100644
--- a/packages/typography-theme-wordpress-2015/src/index.js
+++ b/packages/typography-theme-wordpress-2015/src/index.js
@@ -23,7 +23,7 @@ const theme: OptionsType = {
   headerWeight: '700',
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     'h5,h6': {
       letterSpacing: '0.1em',
       textTransform: 'uppercase',
@@ -44,7 +44,7 @@ const theme: OptionsType = {
     },
     // Blockquote.
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       fontStyle: 'italic',
       paddingLeft: rhythm(5/8),
diff --git a/packages/typography-theme-wordpress-2016/src/index.js b/packages/typography-theme-wordpress-2016/src/index.js
index e4110fe0..2a96a0d8 100644
--- a/packages/typography-theme-wordpress-2016/src/index.js
+++ b/packages/typography-theme-wordpress-2016/src/index.js
@@ -34,12 +34,12 @@ const theme: OptionsType = {
   headerWeight: 900,
   bodyWeight: 400,
   boldWeight: 700,
-  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+  overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
     h1: {
       fontFamily: ['Montserrat', 'sans-serif'].join(','),
     },
     blockquote: {
-      ...adjustFontSizeToMSValue(1/5),
+      ...scale(1/5),
       color: gray(41),
       fontStyle: 'italic',
       paddingLeft: rhythm(13/16),
diff --git a/packages/typography/README.md b/packages/typography/README.md
index a406386a..b5b70ebd 100644
--- a/packages/typography/README.md
+++ b/packages/typography/README.md
@@ -45,7 +45,7 @@ import Typography from 'typography'
 
 const typography = new Typography({
   baseFontSize: '18px',
-  baseLineHeight: '30px',
+  baseLineHeight: 1.666,
   headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
   bodyFontFamily: ['Georgia', 'serif'],
   // See below for the full list of options.
@@ -88,7 +88,6 @@ increase the base font size slightly:
 import Typography from 'typography'
 import funstonTheme from 'typography-theme-funston'
 funstonTheme.baseFontSize = '22px' // was 20px.
-funstonTheme.baseLineHeight = '31px' // was 28px.
 
 const typography = new Typography(funstonTheme)
 ```
@@ -207,12 +206,12 @@ When creating a new instance of Typography, you can pass in an
 * **title**: The theme title.
 * **baseFontSize**: The base font size in pixels, defaults to `16px`.
 * **baseLineHeight**: The base line height using the css unitless number, defaults to `1.5`.
-* **scale**: The "scale ratio" for the theme. This scale is the ratio
-  between the `h1` font size and the `baseFontSize`. So if the scale is `2`
+* **scaleRatio**: The "scale ratio" for the theme. This value is the ratio
+  between the `h1` font size and the `baseFontSize`. So if the scale ratio is `2`
   and the `baseFontSize` is `16px` then the `h1` font size is `32px`.
 ```javascript
 {
-  scale: 2,
+  scaleRatio: 2,
 }
 ```
 * **googleFonts**: An array specifying Google Fonts for this project.
@@ -255,7 +254,7 @@ to `20`.
 * **boldWeight**: Specify the font weight for "bold" (b, strong, dt, th)
   elements. Defaults to `bold`.
 * **blockMarginBottom**: Specify the default margin-bottom for block
-  elements. Defaults to one "rhythm unit" or the base line height.
+  elements. Defaults to one "rhythm unit" (i.e. the height of the base line height).
 * **includeNormalize**: Include normalize.css.
   Normalize.css is an excellent project which works to normalize the
 base browser CSS across browsers and serves as an excellent foundation
@@ -299,6 +298,10 @@ overrideThemeStyles: ({ rhythm }, options, styles) => ({
 })
 ```
 
+## Related
+
+- [postcss-typography](https://github.com/BarryThePenguin/postcss-typography)
+
 ## Developing Typography.js
 Typography.js is a monorepo facilitated by
 [Lerna](https://github.com/lerna/lerna).
diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js
index 819577c4..0b073135 100644
--- a/packages/typography/src/index.js
+++ b/packages/typography/src/index.js
@@ -11,7 +11,7 @@ const typography = function (opts: OptionsType) {
   const defaults: OptionsType = {
     baseFontSize: '16px',
     baseLineHeight: 1.5,
-    scale: 2,
+    scaleRatio: 2,
     googleFonts: [],
     headerFontFamily: [
       '-apple-system',
@@ -45,19 +45,15 @@ const typography = function (opts: OptionsType) {
   // Add this function to the vertical rhythm object so it'll be passed around
   // as well and be available. Not related really but this is the easiest
   // way to pass around extra utility functions atm... :-\
-  vr.adjustFontSizeToMSValue = (value: number) => {
-    // This doesn't pick the right scale if a theme has more than one scale.
-    // Perhaps add optional parameter for a width and it'll get the scale
+  vr.scale = (value: number) => {
+    // This doesn't pick the right scale ratio if a theme has more than one ratio.
+    // Perhaps add optional parameter for a width and it'll get the ratio
     // for this width. Tricky part is maxWidth could be set in non-pixels.
     const baseFont = options.baseFontSize.slice(0, -2)
-    const newFontSize = `${ms(value, options.scale) * baseFont}px`
+    const newFontSize = `${ms(value, options.scaleRatio) * baseFont}px`
     return vr.adjustFontSizeTo(newFontSize)
   }
 
-  // Depricated old names.
-  vr.fontSizeToMS = vr.adjustFontSizeToMSValue
-  vr.fontSizeToPx = vr.adjustFontSizeTo
-
   return ({
     options,
     ...vr,
diff --git a/packages/typography/src/utils/createStyles.js b/packages/typography/src/utils/createStyles.js
index 45847699..246eac41 100644
--- a/packages/typography/src/utils/createStyles.js
+++ b/packages/typography/src/utils/createStyles.js
@@ -195,12 +195,12 @@ module.exports = (vr: any, options: OptionsType) => {
   })
 
   // Set header sizes.
-  const h1 = vr.adjustFontSizeToMSValue(5/5)
-  const h2 = vr.adjustFontSizeToMSValue(3/5)
-  const h3 = vr.adjustFontSizeToMSValue(2/5)
-  const h4 = vr.adjustFontSizeToMSValue(0/5)
-  const h5 = vr.adjustFontSizeToMSValue(-1/5)
-  const h6 = vr.adjustFontSizeToMSValue(-1.5/5)
+  const h1 = vr.scale(5/5)
+  const h2 = vr.scale(3/5)
+  const h3 = vr.scale(2/5)
+  const h4 = vr.scale(0/5)
+  const h5 = vr.scale(-1/5)
+  const h6 = vr.scale(-1.5/5)
 
   each([h1, h2, h3, h4, h5, h6], (header, i) => {
     styles = set(styles, `h${i + 1}.fontSize`, header.fontSize)