diff --git a/examples/js/index.js b/examples/js/index.js
index 9f96f68e..b4e063b4 100644
--- a/examples/js/index.js
+++ b/examples/js/index.js
@@ -142,7 +142,7 @@ const Presentation = () => (
     <Slide>
       <Heading>This is a Heading</Heading>
       <FitText>
-        This is a <code>FitText</code> component
+        This is a <CodeSpan>FitText</CodeSpan> component
       </FitText>
       <FitText
         color="secondary"
diff --git a/examples/one-page/index.html b/examples/one-page/index.html
index c778edf5..b7adc7c6 100644
--- a/examples/one-page/index.html
+++ b/examples/one-page/index.html
@@ -173,7 +173,7 @@
           </${Slide}>
           <${Slide}>
             <${Heading}>This is a Heading</${Heading}>
-            <${FitText}>This is a <code>FitText</code> component</${FitText}>
+            <${FitText}>This is a <${CodeSpan}>FitText</${CodeSpan}> component</${FitText}>
             <${FitText} color="secondary" style=${{
           textTransform: 'uppercase',
           fontFamily: 'Comic Sans MS'
diff --git a/examples/typescript/index.tsx b/examples/typescript/index.tsx
index 00845eb4..15337ced 100644
--- a/examples/typescript/index.tsx
+++ b/examples/typescript/index.tsx
@@ -141,7 +141,7 @@ const Presentation = () => (
     <Slide>
       <Heading>This is a Heading</Heading>
       <FitText>
-        This is a <code>FitText</code> component
+        This is a <CodeSpan>FitText</CodeSpan> component
       </FitText>
       <FitText
         color="secondary"
diff --git a/packages/spectacle/src/components/typography.tsx b/packages/spectacle/src/components/typography.tsx
index 4eab01d7..895acaa8 100644
--- a/packages/spectacle/src/components/typography.tsx
+++ b/packages/spectacle/src/components/typography.tsx
@@ -10,7 +10,14 @@ import {
   SpaceProps,
   BorderProps
 } from 'styled-system';
-import { FC, PropsWithChildren, RefAttributes, useRef, useState } from 'react';
+import {
+  FC,
+  PropsWithChildren,
+  RefAttributes,
+  useRef,
+  useState,
+  HTMLAttributes
+} from 'react';
 import useResizeObserver from 'use-resize-observer';
 
 const decoration = system({ textDecoration: true });
@@ -134,7 +141,9 @@ ScalableText.defaultProps = {
   scale: 1
 };
 
-const FitText: FC<PropsWithChildren<CommonTypographyProps>> = (props) => {
+const FitText: FC<
+  PropsWithChildren<CommonTypographyProps & HTMLAttributes<HTMLDivElement>>
+> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);