diff --git a/packages/exoflex/example/src/examples/TypographyExample.tsx b/packages/exoflex/example/src/examples/TypographyExample.tsx
new file mode 100644
index 000000000..6e7be8d1a
--- /dev/null
+++ b/packages/exoflex/example/src/examples/TypographyExample.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { Typography } from 'exoflex';
+
+let {
+  Heading,
+  Subheading,
+  LargeTitle,
+  Title,
+  Subtitle,
+  Paragraph,
+  Label,
+  Caption,
+} = Typography;
+
+function TypographyExample() {
+  return (
+    <ScrollView contentContainerStyle={styles.root}>
+      <Heading style={styles.spacing}>Heading</Heading>
+      <Subheading style={styles.spacing}>Subheading</Subheading>
+      <LargeTitle style={styles.spacing}>LargeTitle</LargeTitle>
+      <Title style={styles.spacing}>Title</Title>
+      <Subtitle style={styles.spacing}>Subtitle</Subtitle>
+      <Paragraph style={styles.spacing}>Paragraph</Paragraph>
+      <Label style={styles.spacing}>Label</Label>
+      <Caption style={styles.spacing}>Caption</Caption>
+      <Heading style={styles.spacing} weight="medium">
+        Medium Heading
+      </Heading>
+      <Subheading style={styles.spacing} weight="medium">
+        Medium Subheading
+      </Subheading>
+      <LargeTitle style={styles.spacing} weight="medium">
+        Medium LargeTitle
+      </LargeTitle>
+      <Title style={styles.spacing} weight="medium">
+        Medium Title
+      </Title>
+      <Subtitle style={styles.spacing} weight="medium">
+        Medium Subtitle
+      </Subtitle>
+      <Paragraph style={styles.spacing} weight="medium">
+        Medium Paragraph
+      </Paragraph>
+      <Label style={styles.spacing} weight="medium">
+        Medium Label
+      </Label>
+      <Caption style={styles.spacing} weight="medium">
+        Medium Caption
+      </Caption>
+    </ScrollView>
+  );
+}
+
+TypographyExample.title = 'Typography';
+
+let styles = StyleSheet.create({
+  root: {
+    padding: 16,
+    backgroundColor: '#eeeeee',
+  },
+  spacing: {
+    margin: 4,
+  },
+});
+
+export default TypographyExample;
diff --git a/packages/exoflex/example/src/examples/index.tsx b/packages/exoflex/example/src/examples/index.tsx
index e5803ba27..665e12a93 100644
--- a/packages/exoflex/example/src/examples/index.tsx
+++ b/packages/exoflex/example/src/examples/index.tsx
@@ -19,6 +19,7 @@ import RadioButtonGroupExample from './RadioButtonGroupExample';
 import SwitchExample from './SwitchExample';
 import TextInputExample from './TextInputExample';
 import ToastExample from './ToastExample';
+import TypographyExample from './TypographyExample';
 
 import Welcome from '../Welcome';
 
@@ -41,6 +42,7 @@ export let EXAMPLES = {
   switch: SwitchExample,
   textinput: TextInputExample,
   toast: ToastExample,
+  typography: TypographyExample,
 };
 
 export let ROUTES = Object.entries(EXAMPLES).reduce(
diff --git a/packages/exoflex/src/components/Card/CardTitle.tsx b/packages/exoflex/src/components/Card/CardTitle.tsx
index 6ba5300bf..0b1239ff8 100644
--- a/packages/exoflex/src/components/Card/CardTitle.tsx
+++ b/packages/exoflex/src/components/Card/CardTitle.tsx
@@ -7,8 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import Label from '../Label';
-import Text from '../Text';
+import { Label, Paragraph } from '../Typography';
 
 type Props = {
   title: string;
@@ -29,7 +28,11 @@ function CardTitle({
   return (
     <View {...otherProps} style={[styles.root, style]}>
       <View>
-        {!!title && <Title style={titleStyle}>{title}</Title>}
+        {!!title && (
+          <Paragraph weight="500" numberOfLines={1} style={titleStyle}>
+            {title}
+          </Paragraph>
+        )}
         {!!subtitle && (
           <Label style={[styles.subtitle, subtitleStyle]}>{subtitle}</Label>
         )}
@@ -40,16 +43,6 @@ function CardTitle({
 
 CardTitle.displayName = 'Card.Title';
 
-type TitleProps = {
-  children: string;
-  style?: StyleProp<TextStyle>;
-};
-
-// TODO: Discuss Typograhpy with designer
-let Title = ({ ...otherProps }: TitleProps) => (
-  <Text weight="500" numberOfLines={1} {...otherProps} />
-);
-
 let styles = StyleSheet.create({
   root: {
     flexDirection: 'row',
@@ -57,7 +50,11 @@ let styles = StyleSheet.create({
     justifyContent: 'space-between',
     padding: 12,
   },
-  subtitle: { marginTop: 2 },
+  subtitle: {
+    marginTop: 2,
+    // TODO: This color should use colors.text with 0.6 opacity.
+    color: '#757575',
+  },
 });
 
 export default CardTitle;
diff --git a/packages/exoflex/src/components/Label.tsx b/packages/exoflex/src/components/Label.tsx
deleted file mode 100644
index efcf3bdde..000000000
--- a/packages/exoflex/src/components/Label.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-
-import Text, { Props as TextProps } from './Text';
-
-type Props = TextProps;
-
-function Label({ style, ...otherProps }: Props) {
-  return (
-    <Text
-      {...otherProps}
-      style={[
-        styles.root,
-        {
-          // TODO: This color should use colors.text with 0.6 opacity.
-          color: '#757575',
-        },
-        style,
-      ]}
-    />
-  );
-}
-
-Label.defaultProps = Text.defaultProps;
-
-let styles = StyleSheet.create({
-  root: {
-    fontSize: 12,
-  },
-});
-
-export default Label;
diff --git a/packages/exoflex/src/components/TextInput/ErrorMessage.tsx b/packages/exoflex/src/components/TextInput/ErrorMessage.tsx
index df993fc20..ab499b622 100644
--- a/packages/exoflex/src/components/TextInput/ErrorMessage.tsx
+++ b/packages/exoflex/src/components/TextInput/ErrorMessage.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Label from '../Label';
+import { Label } from '../Typography';
 
 type Props = ComponentProps<Label>;
 
diff --git a/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx b/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx
index 13f9835da..8e0007d32 100644
--- a/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx
+++ b/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx
@@ -3,7 +3,7 @@ import { View, TextInput, StyleSheet } from 'react-native';
 import { IconButton } from 'react-native-paper';
 
 import ErrorMessage from './ErrorMessage';
-import Label from '../Label';
+import { Label } from '../Typography';
 import useTheme from '../../helpers/useTheme';
 import { ChildTextInputProps } from './types';
 
@@ -47,7 +47,7 @@ function TextInputOutlined(
         containerStyle,
       ]}
     >
-      {!!label && <Label style={labelStyle}>{label}</Label>}
+      {!!label && <Label style={[styles.label, labelStyle]}>{label}</Label>}
       <TextInput
         ref={ref}
         editable={!disabled && editable}
@@ -99,6 +99,10 @@ let styles = StyleSheet.create({
     position: 'absolute',
     bottom: -18,
   },
+  label: {
+    // TODO: This color should use colors.text with 0.6 opacity.
+    color: '#757575',
+  },
 });
 
 export default forwardRef(TextInputOutlined);
diff --git a/packages/exoflex/src/components/Typography/Caption.tsx b/packages/exoflex/src/components/Typography/Caption.tsx
new file mode 100644
index 000000000..d104e122a
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Caption.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Caption({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Caption.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 10,
+  },
+});
+
+export default Caption;
diff --git a/packages/exoflex/src/components/Typography/Heading.tsx b/packages/exoflex/src/components/Typography/Heading.tsx
new file mode 100644
index 000000000..0dbb6cdb7
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Heading.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Heading({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="1"
+      style={[styles.root, style]}
+      {...otherProps}
+    />
+  );
+}
+
+Heading.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 42,
+  },
+});
+
+export default Heading;
diff --git a/packages/exoflex/src/components/Typography/Label.tsx b/packages/exoflex/src/components/Typography/Label.tsx
new file mode 100644
index 000000000..1067b35d4
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Label.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Label({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Label.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 12,
+  },
+});
+
+export default Label;
diff --git a/packages/exoflex/src/components/Typography/LargeTitle.tsx b/packages/exoflex/src/components/Typography/LargeTitle.tsx
new file mode 100644
index 000000000..3f804363a
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/LargeTitle.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function LargeTitle({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="3"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+LargeTitle.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 28,
+  },
+});
+
+export default LargeTitle;
diff --git a/packages/exoflex/src/components/Typography/Paragraph.tsx b/packages/exoflex/src/components/Typography/Paragraph.tsx
new file mode 100644
index 000000000..48def643c
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Paragraph.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Paragraph({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Paragraph.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 14,
+  },
+});
+
+export default Paragraph;
diff --git a/packages/exoflex/src/components/Typography/Subheading.tsx b/packages/exoflex/src/components/Typography/Subheading.tsx
new file mode 100644
index 000000000..4fe9f6a13
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Subheading.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Subheading({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="2"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+Subheading.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 36,
+  },
+});
+
+export default Subheading;
diff --git a/packages/exoflex/src/components/Typography/Subtitle.tsx b/packages/exoflex/src/components/Typography/Subtitle.tsx
new file mode 100644
index 000000000..a8f49cae2
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Subtitle.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Subtitle({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="5"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+Subtitle.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 16,
+  },
+});
+
+export default Subtitle;
diff --git a/packages/exoflex/src/components/Typography/Title.tsx b/packages/exoflex/src/components/Typography/Title.tsx
new file mode 100644
index 000000000..bbeb7c12b
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/Title.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Title({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="4"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+Title.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 18,
+  },
+});
+
+export default Title;
diff --git a/packages/exoflex/src/components/Typography/index.ts b/packages/exoflex/src/components/Typography/index.ts
new file mode 100644
index 000000000..aa93e883a
--- /dev/null
+++ b/packages/exoflex/src/components/Typography/index.ts
@@ -0,0 +1,8 @@
+export { default as Paragraph } from './Paragraph';
+export { default as Caption } from './Caption';
+export { default as Heading } from './Heading';
+export { default as LargeTitle } from './LargeTitle';
+export { default as Label } from './Label';
+export { default as Subheading } from './Subheading';
+export { default as Subtitle } from './Subtitle';
+export { default as Title } from './Title';
diff --git a/packages/exoflex/src/components/index.ts b/packages/exoflex/src/components/index.ts
index b52a65b9d..ac460dc22 100644
--- a/packages/exoflex/src/components/index.ts
+++ b/packages/exoflex/src/components/index.ts
@@ -1,4 +1,5 @@
 import * as Drawer from './Drawer';
+import * as Typography from './Typography';
 
 export { default as Accordion } from './Accordion';
 export { default as ActivityIndicator } from './ActivityIndicator';
@@ -22,5 +23,5 @@ export { default as TimePicker } from './TimePicker/TimePicker';
 export { default as Toast } from './Toast';
 export { default as ToastContainer } from './ToastContainer';
 
-export { Drawer };
+export { Drawer, Typography };
 export { Calendar } from './Calendar';
diff --git a/packages/exoflex/src/index.ts b/packages/exoflex/src/index.ts
index e774e3d1c..80e3f56df 100644
--- a/packages/exoflex/src/index.ts
+++ b/packages/exoflex/src/index.ts
@@ -30,4 +30,16 @@ export {
   TimePicker,
   Toast,
   ToastContainer,
+  Typography,
 } from './components';
+
+export {
+  Heading,
+  Subheading,
+  LargeTitle,
+  Title,
+  Subtitle,
+  Paragraph,
+  Label,
+  Caption,
+} from './components/Typography';