diff --git a/packages/react-text/bundle-size/Text.Default.fixture.js b/packages/react-text/bundle-size/Text.Default.fixture.js
new file mode 100644
index 0000000000000..1a9ac30e14028
--- /dev/null
+++ b/packages/react-text/bundle-size/Text.Default.fixture.js
@@ -0,0 +1,7 @@
+import { Text } from '@fluentui/react-text';
+
+console.log(Text);
+
+export default {
+  name: 'Text - Default',
+};
diff --git a/packages/react-text/bundle-size/Text.Wrappers.fixture.js b/packages/react-text/bundle-size/Text.Wrappers.fixture.js
new file mode 100644
index 0000000000000..9f9dfc7f4532a
--- /dev/null
+++ b/packages/react-text/bundle-size/Text.Wrappers.fixture.js
@@ -0,0 +1,17 @@
+import {
+  Display,
+  LargeTitle,
+  Title1,
+  Title2,
+  Title3,
+  Headline,
+  Subheadline,
+  Body,
+  Caption,
+} from '@fluentui/react-text';
+
+console.log(Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption);
+
+export default {
+  name: 'Text - Wrappers',
+};
diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index a85affabff3eb..dc198c5ddb4b9 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -6,35 +6,51 @@
 
 import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import { ComponentStateCompat } from '@fluentui/react-utilities';
+import { ForwardRefExoticComponent } from 'react';
 import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
 import * as React_2 from 'react';
+import { RefAttributes } from 'react';
 import { Theme } from '@fluentui/react-theme';
 
 // @public (undocumented)
 const body: MakeStylesStyleFunctionRule<Theme>;
 
+// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
+//
+// @public
+const Body_2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export { Body_2 as Body }
+
+// @public
+export const Caption: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public
 const caption: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
-export const Display: React_2.ForwardRefExoticComponent<DisplayProps & React_2.RefAttributes<HTMLElement>>;
+export const Display: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 const display: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
-export interface DisplayProps extends Omit<TextProps, 'font' | 'size'> {
-}
+export const Headline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 const headline: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const LargeTitle: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const largeTitle: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
+// @public
+export const Subheadline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const subheadline: MakeStylesStyleFunctionRule<Theme>;
 
@@ -65,12 +81,21 @@ export interface TextState extends ComponentStateCompat<TextProps, TextDefaulted
     ref: React_2.Ref<HTMLElement>;
 }
 
+// @public
+export const Title1: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title1: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const Title2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title2: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const Title3: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title3: MakeStylesStyleFunctionRule<Theme>;
 
diff --git a/packages/react-text/src/Body.ts b/packages/react-text/src/Body.ts
new file mode 100644
index 0000000000000..486c9ba844556
--- /dev/null
+++ b/packages/react-text/src/Body.ts
@@ -0,0 +1 @@
+export * from './components/Body/index';
diff --git a/packages/react-text/src/Caption.ts b/packages/react-text/src/Caption.ts
new file mode 100644
index 0000000000000..1c62b4efa3f61
--- /dev/null
+++ b/packages/react-text/src/Caption.ts
@@ -0,0 +1 @@
+export * from './components/Caption/index';
diff --git a/packages/react-text/src/Headline.ts b/packages/react-text/src/Headline.ts
new file mode 100644
index 0000000000000..92233e0f48b92
--- /dev/null
+++ b/packages/react-text/src/Headline.ts
@@ -0,0 +1 @@
+export * from './components/Headline/index';
diff --git a/packages/react-text/src/LargeTitle.ts b/packages/react-text/src/LargeTitle.ts
new file mode 100644
index 0000000000000..a44ca06dcb17a
--- /dev/null
+++ b/packages/react-text/src/LargeTitle.ts
@@ -0,0 +1 @@
+export * from './components/LargeTitle/index';
diff --git a/packages/react-text/src/Subheadline.ts b/packages/react-text/src/Subheadline.ts
new file mode 100644
index 0000000000000..46b3646d68a25
--- /dev/null
+++ b/packages/react-text/src/Subheadline.ts
@@ -0,0 +1 @@
+export * from './components/Subheadline/index';
diff --git a/packages/react-text/src/TextWrappers.stories.mdx b/packages/react-text/src/TextWrappers.stories.mdx
index 06705d09625f5..4302e318f09ef 100644
--- a/packages/react-text/src/TextWrappers.stories.mdx
+++ b/packages/react-text/src/TextWrappers.stories.mdx
@@ -1,4 +1,4 @@
-import { Display } from './components/Display';
+import { Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption } from './index';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 
@@ -6,4 +6,12 @@ import { webLightTheme } from '@fluentui/react-theme';
 
 <FluentProvider theme={webLightTheme}>
   <Display block>Display text wrapper, semibold, base1000</Display>
+  <LargeTitle block>LargeTitle text wrapper, semibold, base900</LargeTitle>
+  <Title1 block>Title1 text wrapper, semibold, base800</Title1>
+  <Title2 block>Title2 text wrapper, semibold, base700</Title2>
+  <Title3 block>Title3 text wrapper, semibold, base600</Title3>
+  <Headline block>Headline text wrapper, semibold, base500</Headline>
+  <Subheadline block>Subheadline text wrapper, semibold, base400</Subheadline>
+  <Body block>Body text wrapper, regular, base300</Body>
+  <Caption block>Caption text wrapper, regular, base200</Caption>
 </FluentProvider>
diff --git a/packages/react-text/src/Title1.ts b/packages/react-text/src/Title1.ts
new file mode 100644
index 0000000000000..8c2e484d13ef2
--- /dev/null
+++ b/packages/react-text/src/Title1.ts
@@ -0,0 +1 @@
+export * from './components/Title1/index';
diff --git a/packages/react-text/src/Title2.ts b/packages/react-text/src/Title2.ts
new file mode 100644
index 0000000000000..ce285d2ae99a1
--- /dev/null
+++ b/packages/react-text/src/Title2.ts
@@ -0,0 +1 @@
+export * from './components/Title2/index';
diff --git a/packages/react-text/src/Title3.ts b/packages/react-text/src/Title3.ts
new file mode 100644
index 0000000000000..66e21d53fb805
--- /dev/null
+++ b/packages/react-text/src/Title3.ts
@@ -0,0 +1 @@
+export * from './components/Title3/index';
diff --git a/packages/react-text/src/components/Body/Body.test.tsx b/packages/react-text/src/components/Body/Body.test.tsx
new file mode 100644
index 0000000000000..65130e9e850fe
--- /dev/null
+++ b/packages/react-text/src/components/Body/Body.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Body } from './Body';
+import { isConformant } from '../../common/isConformant';
+
+describe('Body', () => {
+  isConformant({
+    Component: Body,
+    displayName: 'Body',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Body>Default Body</Body>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
new file mode 100644
index 0000000000000..20ef6f90c99c3
--- /dev/null
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.body,
+});
+
+/**
+ * Text wrapper component for the Body typography variant
+ */
+export const Body = createWrapper({ useStyles, displayName: 'Body' });
diff --git a/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap b/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
new file mode 100644
index 0000000000000..be1844be0ab17
--- /dev/null
+++ b/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Body
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Body/index.ts b/packages/react-text/src/components/Body/index.ts
new file mode 100644
index 0000000000000..0b63ac83587ab
--- /dev/null
+++ b/packages/react-text/src/components/Body/index.ts
@@ -0,0 +1 @@
+export * from './Body';
diff --git a/packages/react-text/src/components/Caption/Caption.test.tsx b/packages/react-text/src/components/Caption/Caption.test.tsx
new file mode 100644
index 0000000000000..b90951df79e34
--- /dev/null
+++ b/packages/react-text/src/components/Caption/Caption.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Caption } from './Caption';
+import { isConformant } from '../../common/isConformant';
+
+describe('Caption', () => {
+  isConformant({
+    Component: Caption,
+    displayName: 'Caption',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Caption>Default Caption</Caption>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
new file mode 100644
index 0000000000000..6e13d65ab56f2
--- /dev/null
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.caption,
+});
+
+/**
+ * Text wrapper component for the Caption typography variant
+ */
+export const Caption = createWrapper({ useStyles, displayName: 'Caption' });
diff --git a/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap b/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
new file mode 100644
index 0000000000000..e6f16a413be2a
--- /dev/null
+++ b/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Caption
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Caption/index.ts b/packages/react-text/src/components/Caption/index.ts
new file mode 100644
index 0000000000000..2c6dacc019b85
--- /dev/null
+++ b/packages/react-text/src/components/Caption/index.ts
@@ -0,0 +1 @@
+export * from './Caption';
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index 9f57037ac9f07..48402fddbdc1b 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -1,8 +1,6 @@
-import * as React from 'react';
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
-import { renderText, useText, useTextStyles } from '../Text/index';
+import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { DisplayProps } from './Display.types';
+import { createWrapper } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -14,14 +12,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Display typography variant
  */
-export const Display = React.forwardRef<HTMLElement, DisplayProps>((props, ref) => {
-  const styles = useStyles();
-  const state = useText(props, ref);
-  useTextStyles(state);
-
-  state.className = mergeClasses(state.className, styles.root, props.className);
-
-  return renderText(state);
-});
-
-Display.displayName = 'Display';
+export const Display = createWrapper({ useStyles, displayName: 'Display' });
diff --git a/packages/react-text/src/components/Display/Display.types.ts b/packages/react-text/src/components/Display/Display.types.ts
deleted file mode 100644
index f21dc1dc1037a..0000000000000
--- a/packages/react-text/src/components/Display/Display.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TextProps } from '../Text/index';
-
-/**
- * Display Props
- */
-export interface DisplayProps extends Omit<TextProps, 'font' | 'size'> {}
diff --git a/packages/react-text/src/components/Display/index.ts b/packages/react-text/src/components/Display/index.ts
index 74b0f1df114c8..6a069964d8a04 100644
--- a/packages/react-text/src/components/Display/index.ts
+++ b/packages/react-text/src/components/Display/index.ts
@@ -1,2 +1 @@
 export * from './Display';
-export * from './Display.types';
diff --git a/packages/react-text/src/components/Headline/Headline.test.tsx b/packages/react-text/src/components/Headline/Headline.test.tsx
new file mode 100644
index 0000000000000..e7f4464dabd9c
--- /dev/null
+++ b/packages/react-text/src/components/Headline/Headline.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Headline } from './Headline';
+import { isConformant } from '../../common/isConformant';
+
+describe('Headline', () => {
+  isConformant({
+    Component: Headline,
+    displayName: 'Headline',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Headline>Default Headline</Headline>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
new file mode 100644
index 0000000000000..2b2e916f31105
--- /dev/null
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.headline,
+});
+
+/**
+ * Text wrapper component for the Headline typography variant
+ */
+export const Headline = createWrapper({ useStyles, displayName: 'Headline' });
diff --git a/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap b/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
new file mode 100644
index 0000000000000..003a05bffbb50
--- /dev/null
+++ b/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Headline renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Headline
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Headline/index.ts b/packages/react-text/src/components/Headline/index.ts
new file mode 100644
index 0000000000000..90e4df0e937b7
--- /dev/null
+++ b/packages/react-text/src/components/Headline/index.ts
@@ -0,0 +1 @@
+export * from './Headline';
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.test.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.test.tsx
new file mode 100644
index 0000000000000..27fdc00020ebf
--- /dev/null
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { LargeTitle } from './LargeTitle';
+import { isConformant } from '../../common/isConformant';
+
+describe('LargeTitle', () => {
+  isConformant({
+    Component: LargeTitle,
+    displayName: 'LargeTitle',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<LargeTitle>Default LargeTitle</LargeTitle>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
new file mode 100644
index 0000000000000..0cb25a2d4b9b9
--- /dev/null
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.largeTitle,
+});
+
+/**
+ * Text wrapper component for the Large Title typography variant
+ */
+export const LargeTitle = createWrapper({ useStyles, displayName: 'LargeTitle' });
diff --git a/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap b/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap
new file mode 100644
index 0000000000000..43a941fd10b76
--- /dev/null
+++ b/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LargeTitle renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default LargeTitle
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/LargeTitle/index.ts b/packages/react-text/src/components/LargeTitle/index.ts
new file mode 100644
index 0000000000000..7845d85250ad9
--- /dev/null
+++ b/packages/react-text/src/components/LargeTitle/index.ts
@@ -0,0 +1 @@
+export * from './LargeTitle';
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.test.tsx b/packages/react-text/src/components/Subheadline/Subheadline.test.tsx
new file mode 100644
index 0000000000000..465b5608b5d8d
--- /dev/null
+++ b/packages/react-text/src/components/Subheadline/Subheadline.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Subheadline } from './Subheadline';
+import { isConformant } from '../../common/isConformant';
+
+describe('Subheadline', () => {
+  isConformant({
+    Component: Subheadline,
+    displayName: 'Subheadline',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Subheadline>Default Subheadline</Subheadline>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
new file mode 100644
index 0000000000000..1814508562e3e
--- /dev/null
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.subheadline,
+});
+
+/**
+ * Text wrapper component for the Subheadline typography variant
+ */
+export const Subheadline = createWrapper({ useStyles, displayName: 'Subheadline' });
diff --git a/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap b/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
new file mode 100644
index 0000000000000..f319236f0e28c
--- /dev/null
+++ b/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subheadline renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Subheadline
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Subheadline/index.ts b/packages/react-text/src/components/Subheadline/index.ts
new file mode 100644
index 0000000000000..06e39cabda845
--- /dev/null
+++ b/packages/react-text/src/components/Subheadline/index.ts
@@ -0,0 +1 @@
+export * from './Subheadline';
diff --git a/packages/react-text/src/components/Title1/Title1.test.tsx b/packages/react-text/src/components/Title1/Title1.test.tsx
new file mode 100644
index 0000000000000..a1484276c8093
--- /dev/null
+++ b/packages/react-text/src/components/Title1/Title1.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Title1 } from './Title1';
+import { isConformant } from '../../common/isConformant';
+
+describe('Title1', () => {
+  isConformant({
+    Component: Title1,
+    displayName: 'Title1',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Title1>Default Title1</Title1>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
new file mode 100644
index 0000000000000..839c121b00cc5
--- /dev/null
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.title1,
+});
+
+/**
+ * Text wrapper component for the Title 1 typography variant
+ */
+export const Title1 = createWrapper({ useStyles, displayName: 'Title1' });
diff --git a/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap b/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap
new file mode 100644
index 0000000000000..98ab9e0ea3f8f
--- /dev/null
+++ b/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title1 renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Title1
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Title1/index.ts b/packages/react-text/src/components/Title1/index.ts
new file mode 100644
index 0000000000000..b32f898402c89
--- /dev/null
+++ b/packages/react-text/src/components/Title1/index.ts
@@ -0,0 +1 @@
+export * from './Title1';
diff --git a/packages/react-text/src/components/Title2/Title2.test.tsx b/packages/react-text/src/components/Title2/Title2.test.tsx
new file mode 100644
index 0000000000000..fe2787a44c7df
--- /dev/null
+++ b/packages/react-text/src/components/Title2/Title2.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Title2 } from './Title2';
+import { isConformant } from '../../common/isConformant';
+
+describe('Title2', () => {
+  isConformant({
+    Component: Title2,
+    displayName: 'Title2',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Title2>Default Title2</Title2>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
new file mode 100644
index 0000000000000..ad4f1fa65c9c8
--- /dev/null
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.title2,
+});
+
+/**
+ * Text wrapper component for the Title 2 typography variant
+ */
+export const Title2 = createWrapper({ useStyles, displayName: 'Title2' });
diff --git a/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap b/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap
new file mode 100644
index 0000000000000..99a3aa2a7acbc
--- /dev/null
+++ b/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title2 renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Title2
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Title2/index.ts b/packages/react-text/src/components/Title2/index.ts
new file mode 100644
index 0000000000000..e6db0795e90e6
--- /dev/null
+++ b/packages/react-text/src/components/Title2/index.ts
@@ -0,0 +1 @@
+export * from './Title2';
diff --git a/packages/react-text/src/components/Title3/Title3.test.tsx b/packages/react-text/src/components/Title3/Title3.test.tsx
new file mode 100644
index 0000000000000..651857951966e
--- /dev/null
+++ b/packages/react-text/src/components/Title3/Title3.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Title3 } from './Title3';
+import { isConformant } from '../../common/isConformant';
+
+describe('Title3', () => {
+  isConformant({
+    Component: Title3,
+    displayName: 'Title3',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Title3>Default Title3</Title3>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
new file mode 100644
index 0000000000000..c568a0b45960e
--- /dev/null
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.title3,
+});
+
+/**
+ * Text wrapper component for the Title 3 typography variant
+ */
+export const Title3 = createWrapper({ useStyles, displayName: 'Title3' });
diff --git a/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap b/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap
new file mode 100644
index 0000000000000..8b49a75a2a8c6
--- /dev/null
+++ b/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title3 renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Title3
+  </span>
+</div>
+`;
diff --git a/packages/react-text/src/components/Title3/index.ts b/packages/react-text/src/components/Title3/index.ts
new file mode 100644
index 0000000000000..ad1eaed1b185b
--- /dev/null
+++ b/packages/react-text/src/components/Title3/index.ts
@@ -0,0 +1 @@
+export * from './Title3';
diff --git a/packages/react-text/src/components/wrapper.tsx b/packages/react-text/src/components/wrapper.tsx
new file mode 100644
index 0000000000000..f9525099a248c
--- /dev/null
+++ b/packages/react-text/src/components/wrapper.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { mergeClasses } from '@fluentui/react-make-styles';
+import { renderText, TextProps, useText, useTextStyles } from '../Text';
+
+export interface Props extends Omit<TextProps, 'font' | 'size'> {}
+
+export function createWrapper(options: { displayName: string; useStyles: () => Record<'root', string> }) {
+  const { useStyles, displayName } = options;
+  const Wrapper = React.forwardRef<HTMLElement, Props>((props, ref) => {
+    const styles = useStyles();
+    const state = useText(props, ref);
+    useTextStyles(state);
+
+    state.className = mergeClasses(state.className, styles.root, props.className);
+
+    return renderText(state);
+  });
+  Wrapper.displayName = displayName;
+
+  return Wrapper;
+}
diff --git a/packages/react-text/src/index.ts b/packages/react-text/src/index.ts
index 3bcb20c11d726..77df7f9aa6b7a 100644
--- a/packages/react-text/src/index.ts
+++ b/packages/react-text/src/index.ts
@@ -1,3 +1,11 @@
 export * from './Text';
 export * from './typographyStyles';
 export * from './Display';
+export * from './LargeTitle';
+export * from './Title1';
+export * from './Title2';
+export * from './Title3';
+export * from './Headline';
+export * from './Subheadline';
+export * from './Body';
+export * from './Caption';