diff --git a/src/components/Common/CategoryItem/CategoryItem.tsx b/src/components/Common/CategoryItem/CategoryItem.tsx
index 3dc9f679..08075406 100644
--- a/src/components/Common/CategoryItem/CategoryItem.tsx
+++ b/src/components/Common/CategoryItem/CategoryItem.tsx
@@ -2,7 +2,7 @@ import cx from 'classnames';
 import { Link } from 'react-router-dom';
 
 import { imageWrapper, categoryImage, circle, bordered, link } from './categoryItem.css';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import { PATH } from '@/constants/path';
 import { useGA } from '@/hooks/common';
diff --git a/src/components/Common/ErrorBoundary/ErrorBoundary.tsx b/src/components/Common/ErrorBoundary/ErrorBoundary.tsx
index 311ec189..a3e3bdd4 100644
--- a/src/components/Common/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/Common/ErrorBoundary/ErrorBoundary.tsx
@@ -2,8 +2,7 @@ import type { ComponentType, PropsWithChildren } from 'react';
 import { Component } from 'react';
 
 import { button, buttonWrapper, container } from './errorBoundary.css';
-import Text from '../Text/Text';
-
+import Text from '../Typography/Text/Text';
 export interface FallbackProps {
   message: string;
 }
diff --git a/src/components/Common/ErrorComponent/ErrorComponent.tsx b/src/components/Common/ErrorComponent/ErrorComponent.tsx
index 067918a7..ff0027c4 100644
--- a/src/components/Common/ErrorComponent/ErrorComponent.tsx
+++ b/src/components/Common/ErrorComponent/ErrorComponent.tsx
@@ -1,5 +1,5 @@
 import { container } from './errorComponent.css';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import Error from '@/assets/error.png';
 
diff --git a/src/components/Common/ImageUploader/ImageUploader.tsx b/src/components/Common/ImageUploader/ImageUploader.tsx
index 5b1e99a0..60b7b14d 100644
--- a/src/components/Common/ImageUploader/ImageUploader.tsx
+++ b/src/components/Common/ImageUploader/ImageUploader.tsx
@@ -3,7 +3,7 @@ import type { ChangeEventHandler } from 'react';
 
 import { container, deleteButton, image, imageWrapper, uploadInput, uploadLabel } from './imageUploader.css';
 import SvgIcon from '../Svg/SvgIcon';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import { IMAGE_MAX_SIZE } from '@/constants';
 import { useEnterKeyDown } from '@/hooks/common';
diff --git a/src/components/Common/StarRating/StarRating.tsx b/src/components/Common/StarRating/StarRating.tsx
index c773bf2c..590ad600 100644
--- a/src/components/Common/StarRating/StarRating.tsx
+++ b/src/components/Common/StarRating/StarRating.tsx
@@ -1,6 +1,6 @@
 import { date, ratingInfo, ratingNumber, ratingWrapper } from './starRating.css';
 import SvgIcon from '../Svg/SvgIcon';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import { vars } from '@/styles/theme.css';
 import { getRelativeDate } from '@/utils/date';
diff --git a/src/components/Common/TagList/TagList.tsx b/src/components/Common/TagList/TagList.tsx
index 359cc7ed..6d5b13bc 100644
--- a/src/components/Common/TagList/TagList.tsx
+++ b/src/components/Common/TagList/TagList.tsx
@@ -1,5 +1,5 @@
 import { tag, tagList } from './tagList.css';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import type { Tag } from '@/types/common';
 
diff --git a/src/components/Common/Text/Text.tsx b/src/components/Common/Text/Text.tsx
deleted file mode 100644
index e2ff5229..00000000
--- a/src/components/Common/Text/Text.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import cx from 'classnames';
-
-import { text } from './text.css';
-import type { TextElement, TextVariants, OverridableComponentPropsWithoutRef } from './text.types';
-
-type TextProps<T extends TextElement> = OverridableComponentPropsWithoutRef<T, TextVariants>;
-
-const Text = <T extends TextElement = 'p'>({
-  children,
-  size = 'body',
-  weight = 'regular',
-  color = 'default',
-  as,
-  className,
-  ...props
-}: TextProps<T>) => {
-  const Component = as || 'p';
-
-  return (
-    <Component className={cx(text({ color, size, weight }), className)} {...props}>
-      {children}
-    </Component>
-  );
-};
-
-export default Text;
diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index 264a940a..4675823b 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -3,7 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 
 import { leftNavigationWrapper, container, headerTitle, leftTitle, register, link } from './topBar.css';
 import SvgIcon from '../Svg/SvgIcon';
-import Text from '../Text/Text';
+import Text from '../Typography/Text/Text';
 
 import LogoImage from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
diff --git a/src/components/Common/Typography/Heading/Heading.stories.tsx b/src/components/Common/Typography/Heading/Heading.stories.tsx
new file mode 100644
index 00000000..99abda5c
--- /dev/null
+++ b/src/components/Common/Typography/Heading/Heading.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Heading from './Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'common/Heading',
+  component: Heading,
+  args: {
+    children: '안녕하세요 펀잇입니다.',
+    color: 'default',
+    size: 'body',
+    weight: 'regular',
+    as: 'h1',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/components/Common/Typography/Heading/Heading.tsx b/src/components/Common/Typography/Heading/Heading.tsx
new file mode 100644
index 00000000..88dd6490
--- /dev/null
+++ b/src/components/Common/Typography/Heading/Heading.tsx
@@ -0,0 +1,28 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+
+import { typography } from '../typography.css';
+import type { OverridableComponentPropsWithoutRef, TypographyVariants } from '../typography.types';
+
+type HeadingElement = Extract<ElementType, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+type HeadingProps<T extends HeadingElement> = OverridableComponentPropsWithoutRef<T, TypographyVariants>;
+
+const Heading = <T extends HeadingElement = 'h1'>({
+  children,
+  size = 'body',
+  weight = 'regular',
+  color = 'default',
+  as,
+  className,
+  ...props
+}: HeadingProps<T>) => {
+  const Component = as || 'h1';
+
+  return (
+    <Component className={cx(typography({ color, size, weight }), className)} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Heading;
diff --git a/src/components/Common/Text/Text.stories.tsx b/src/components/Common/Typography/Text/Text.stories.tsx
similarity index 96%
rename from src/components/Common/Text/Text.stories.tsx
rename to src/components/Common/Typography/Text/Text.stories.tsx
index 841a9e4f..d87b8115 100644
--- a/src/components/Common/Text/Text.stories.tsx
+++ b/src/components/Common/Typography/Text/Text.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Text from './Text';
-import { sizes } from './text.types';
+import { sizes } from '../typography.types';
 
 const meta: Meta<typeof Text> = {
   title: 'common/Text',
diff --git a/src/components/Common/Typography/Text/Text.tsx b/src/components/Common/Typography/Text/Text.tsx
new file mode 100644
index 00000000..f3855930
--- /dev/null
+++ b/src/components/Common/Typography/Text/Text.tsx
@@ -0,0 +1,28 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+
+import { typography } from '../typography.css';
+import type { OverridableComponentPropsWithoutRef, TypographyVariants } from '../typography.types';
+
+export type TextElement = Extract<ElementType, 'p' | 'span'>;
+type TextProps<T extends TextElement> = OverridableComponentPropsWithoutRef<T, TypographyVariants>;
+
+const Text = <T extends TextElement = 'p'>({
+  children,
+  size = 'body',
+  weight = 'regular',
+  color = 'default',
+  as,
+  className,
+  ...props
+}: TextProps<T>) => {
+  const Component = as || 'p';
+
+  return (
+    <Component className={cx(typography({ color, size, weight }), className)} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Text;
diff --git a/src/components/Common/Text/text.css.ts b/src/components/Common/Typography/typography.css.ts
similarity index 96%
rename from src/components/Common/Text/text.css.ts
rename to src/components/Common/Typography/typography.css.ts
index 58c892b8..054bf03b 100644
--- a/src/components/Common/Text/text.css.ts
+++ b/src/components/Common/Typography/typography.css.ts
@@ -5,7 +5,7 @@ const baseText = style({
   lineHeight: 1.4,
 });
 
-export const text = recipe({
+export const typography = recipe({
   base: baseText,
   variants: {
     color: {
diff --git a/src/components/Common/Text/text.types.ts b/src/components/Common/Typography/typography.types.ts
similarity index 80%
rename from src/components/Common/Text/text.types.ts
rename to src/components/Common/Typography/typography.types.ts
index e6456a3f..a52f102e 100644
--- a/src/components/Common/Text/text.types.ts
+++ b/src/components/Common/Typography/typography.types.ts
@@ -1,6 +1,6 @@
 import type { ElementType, ComponentPropsWithoutRef } from 'react';
 
-import type { text } from './text.css';
+import type { typography } from './typography.css';
 
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
@@ -12,8 +12,7 @@ export type Color = (typeof colors)[number];
 export type Size = (typeof sizes)[number];
 export type Weight = (typeof weights)[number];
 
-export type TextVariants = RecipeVariants<typeof text>;
-
 export type OverridableComponentPropsWithoutRef<T extends ElementType, P = unknown> = P &
   ComponentPropsWithoutRef<T> & { as?: T };
-export type TextElement = Extract<ElementType, 'p' | 'span'>;
+
+export type TypographyVariants = RecipeVariants<typeof typography>;
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index 7f0a071d..c76cc771 100644
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -21,7 +21,8 @@ export { default as SectionHeader } from './SectionHeader/SectionHeader';
 export { default as SelectOptionList } from './SelectOptionList/SelectOptionList';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
-export { default as Text } from './Text/Text';
+export { default as Text } from './Typography/Text/Text';
+export { default as Heading } from './Typography/Heading/Heading';
 export { default as Indicator } from './Indicator/Indicator';
 export { default as TopBar } from './TopBar/TopBar';
 export { default as StarRating } from './StarRating/StarRating';