diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js
index 07ac2fd1015..27cc0ce97a7 100644
--- a/src/__tests__/Heading.js
+++ b/src/__tests__/Heading.js
@@ -82,6 +82,11 @@ describe('Heading', () => {
     }
   })
 
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Heading is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
+
   xit('renders fontSize with f* classes using inverse scale', () => {
     expect(render(<Heading fontSize={0} theme={theme} />)).toEqual(render(<span className="f6" />))
     expect(render(<Heading fontSize={1} theme={theme} />)).toEqual(render(<span className="f5" />))
diff --git a/src/__tests__/Link.js b/src/__tests__/Link.js
index 98658a1261e..8c352134fa9 100644
--- a/src/__tests__/Link.js
+++ b/src/__tests__/Link.js
@@ -29,4 +29,9 @@ describe('Link', () => {
   it('respects hoverColor prop', () => {
     expect(render(<Link hoverColor="blue.4" />)).toMatchSnapshot()
   })
+
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
 })
diff --git a/src/__tests__/Text.js b/src/__tests__/Text.js
index 429ceb14d2a..c3037936c23 100644
--- a/src/__tests__/Text.js
+++ b/src/__tests__/Text.js
@@ -22,7 +22,7 @@ describe('Text', () => {
     expect(render(<Text is="b" />).type).toEqual('b')
   })
 
-  it('renders font-size', () => {
+  it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
       expect(render(<Text fontSize={fontSize} />)).toHaveStyleRule('font-size', px(fontSize))
     }
@@ -51,6 +51,11 @@ describe('Text', () => {
     expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', '400')
   })
 
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Text fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Text is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
+
   it('respects lineHeight', () => {
     for (const [name, value] of Object.entries(theme.lineHeights)) {
       expect(render(<Text lineHeight={name} />)).toHaveStyleRule('line-height', String(value))
diff --git a/src/constants.js b/src/constants.js
index 6c4b4fb8376..ff3d18e5a15 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -19,6 +19,7 @@ export const BORDER = compose(
 export const TYPOGRAPHY = compose(
   styles.fontFamily,
   styles.fontSize,
+  styles.fontStyle,
   styles.fontWeight,
   styles.lineHeight,
   styles.textAlign
@@ -73,6 +74,7 @@ export const TYPOGRAPHY_LIST = [
   // typography props
   'fontFamily',
   'fontSize',
+  'fontStyle',
   'fontWeight',
   'lineHeight',
   'textAlign'