diff --git a/public/icons/discover.svg b/public/icons/discover.svg
index ee85332a..57e6d43b 100644
--- a/public/icons/discover.svg
+++ b/public/icons/discover.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>book-open-page-variant</title><path d="M19 2L14 6.5V17.5L19 13V2M6.5 5C4.55 5 2.45 5.4 1 6.5V21.16C1 21.41 1.25 21.66 1.5 21.66C1.6 21.66 1.65 21.59 1.75 21.59C3.1 20.94 5.05 20.5 6.5 20.5C8.45 20.5 10.55 20.9 12 22C13.35 21.15 15.8 20.5 17.5 20.5C19.15 20.5 20.85 20.81 22.25 21.56C22.35 21.61 22.4 21.59 22.5 21.59C22.75 21.59 23 21.34 23 21.09V6.5C22.4 6.05 21.75 5.75 21 5.5V19C19.9 18.65 18.7 18.5 17.5 18.5C15.8 18.5 13.35 19.15 12 20V6.5C10.55 5.4 8.45 5 6.5 5Z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pound</title><path d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" /></svg>
\ No newline at end of file
diff --git a/public/icons/group.svg b/public/icons/group.svg
index 57e6d43b..2a4669d1 100644
--- a/public/icons/group.svg
+++ b/public/icons/group.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pound</title><path d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>book-open-page-variant</title><path d="M19 2L14 6.5V17.5L19 13V2M6.5 5C4.55 5 2.45 5.4 1 6.5V21.16C1 21.41 1.25 21.66 1.5 21.66C1.6 21.66 1.65 21.59 1.75 21.59C3.1 20.94 5.05 20.5 6.5 20.5C8.45 20.5 10.55 20.9 12 22C13.35 21.15 15.8 20.5 17.5 20.5C19.15 20.5 20.85 20.81 22.25 21.56C22.35 21.61 22.4 21.59 22.5 21.59C22.75 21.59 23 21.34 23 21.09V6.5C22.4 6.05 21.75 5.75 21 5.5V19C19.9 18.65 18.7 18.5 17.5 18.5C15.8 18.5 13.35 19.15 12 20V6.5C10.55 5.4 8.45 5 6.5 5Z" /></svg>
diff --git a/src/app/book/[bookId]/page.tsx b/src/app/book/[bookId]/page.tsx
index e0100ccc..3d0ccbf8 100644
--- a/src/app/book/[bookId]/page.tsx
+++ b/src/app/book/[bookId]/page.tsx
@@ -78,7 +78,7 @@ const BookTitle = ({ bookId }: { bookId: APIBook['bookId'] }) => {
 };
 
 const Heading = ({ text }: { text: string }) => (
-  <p className="text-xl font-bold">{text}</p>
+  <p className="font-subheading-bold">{text}</p>
 );
 
 const AddBookCommentButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {
diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx
index 5797abb3..1b317c27 100644
--- a/src/app/book/search/page.tsx
+++ b/src/app/book/search/page.tsx
@@ -52,7 +52,7 @@ const BookSearchPage = () => {
 
         {/** 최근 검색어 + 베스트 셀러 */}
         <section
-          className={`flex flex-col gap-[1.6rem] ${watchedKeyword && 'hidden'}`}
+          className={`flex flex-col gap-[2rem] ${watchedKeyword && 'hidden'}`}
         >
           <SSRSafeSuspense fallback={<ContentsSkelton />}>
             <RecentSearchResult
diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx
index 747e5919..0d4c693f 100644
--- a/src/app/bookshelf/[bookshelfId]/page.tsx
+++ b/src/app/bookshelf/[bookshelfId]/page.tsx
@@ -54,12 +54,12 @@ export default function UserBookShelfPage({
         </TopNavigation.RightItem>
       </TopNavigation>
       <div className="mt-[0.8rem] flex flex-col gap-[0.8rem] pb-[2rem] pt-[1rem] font-bold">
-        <h1 className="text-[1.8rem]">
+        <h1 className="font-subheading-bold">
           <span className="text-main-900">{data.userNickname}</span>
           님의 책장
         </h1>
         <div className="flex items-center justify-between">
-          <span className="text-[1.4rem] text-[#939393]">
+          <span className="text-black-600 font-body2-regular">
             {`${data.job.jobGroupKoreanName} • ${data.job.jobNameKoreanName}`}
           </span>
           <LikeButton
@@ -123,12 +123,12 @@ const BookShelfContent = ({
         <BookShelfRow books={initialBookImageUrl} />
       </div>
       <div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-[#CFCFCF] px-[1.7rem] py-[4rem]">
-        <p className="text-center text-md font-bold">
+        <p className="text-center font-body1-bold">
           지금 로그인하면
           <br />
           책장에 담긴 모든 책을 볼 수 있어요!
         </p>
-        <p className="text-center text-xs text-placeholder">
+        <p className="text-center text-placeholder font-body2-regular">
           <span className="text-main-900">{userNickname}</span>님의 책장에서
           다양한
           <br />
@@ -136,9 +136,9 @@ const BookShelfContent = ({
         </p>
         <Link href={KAKAO_OAUTH_LOGIN_URL}>
           <Button colorScheme="kakao" size="full">
-            <div className="flex justify-center gap-[1rem]">
+            <div className="flex items-center justify-center gap-[1rem]">
               <IconKakao width={16} height={'auto'} />
-              <span className="text-md font-normal">카카오 로그인</span>
+              <span className="font-body1-regular">카카오 로그인</span>
             </div>
           </Button>
         </Link>
diff --git a/src/app/error.tsx b/src/app/error.tsx
index e11f9dd8..f2c65513 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -10,7 +10,7 @@ export const ErrorPage = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <div className="text-2xl">
+      <div className="font-heading">
         <span className="font-bold text-main-900">다독이</span>도 몰라요~ 왜
         이래요~
       </div>
diff --git a/src/app/group/[groupId]/join/page.tsx b/src/app/group/[groupId]/join/page.tsx
index 2f7b6688..8750b3bc 100644
--- a/src/app/group/[groupId]/join/page.tsx
+++ b/src/app/group/[groupId]/join/page.tsx
@@ -64,12 +64,12 @@ const BookGroupJoinForm = ({ groupId }: { groupId: number }) => {
       className="mt-[2.5rem] flex flex-col gap-[2.5rem]"
       onSubmit={handleSubmit(submitJoinForm)}
     >
-      <p className="whitespace-pre-line text-2xl font-bold leading-snug">
+      <p className="whitespace-pre-line !leading-snug font-subheading-bold">
         {`문제를 맞추면
           모임에 가입할 수 있어요`}
       </p>
       <div className="flex flex-col gap-[1.5rem]">
-        <p className="text-sm">{question}</p>
+        <p className="font-body2-regular">{question}</p>
         <div className="flex flex-col gap-[0.5rem]">
           <Input
             {...register('answer', {
diff --git a/src/app/group/[groupId]/not-found.tsx b/src/app/group/[groupId]/not-found.tsx
index 86ded833..c3a07284 100644
--- a/src/app/group/[groupId]/not-found.tsx
+++ b/src/app/group/[groupId]/not-found.tsx
@@ -6,7 +6,7 @@ export default function NotFound() {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <p className="text-2xl">
+      <p className="font-heading">
         <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
       </p>
       <Link href="/group">
diff --git a/src/app/group/[groupId]/page.tsx b/src/app/group/[groupId]/page.tsx
index 0d7caa16..b509faaf 100644
--- a/src/app/group/[groupId]/page.tsx
+++ b/src/app/group/[groupId]/page.tsx
@@ -50,7 +50,7 @@ const DetailBookGroupPage = ({
 export default DetailBookGroupPage;
 
 const Heading = ({ text }: { text: string }) => (
-  <p className=" text-xl font-bold">{text}</p>
+  <p className="font-subheading-bold">{text}</p>
 );
 
 const PageSkeleton = () => (
diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx
index d61ca4e1..72437feb 100644
--- a/src/app/group/page.tsx
+++ b/src/app/group/page.tsx
@@ -75,7 +75,7 @@ const MyBookGroupList = () => {
   const { data: myId } = useMyProfileId({ enabled: isAuthenticated });
 
   return (
-    <section className="flex gap-[1rem] overflow-scroll">
+    <section className="flex gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem]">
       {bookGroups.map(({ title, book, bookGroupId, owner }) => (
         <SimpleBookGroupCard
           key={bookGroupId}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index e915d8b7..81e16422 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -10,7 +10,7 @@ const NotFound = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <div className="text-2xl">
+      <div className="font-heading">
         <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
       </div>
       <Button
diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx
index 2e8ea631..0ab7a74e 100644
--- a/src/app/profile/me/page.tsx
+++ b/src/app/profile/me/page.tsx
@@ -43,8 +43,10 @@ const MyProfileForUnAuth = () => {
         <div className="mb-[2rem] flex items-center gap-[1rem]">
           <Avatar size="large" />
           <div className="flex-grow">
-            <h2 className="text-lg font-bold">로그인 / 회원가입</h2>
-            <p className="text-sm text-placeholder">
+            <h2 className="pb-[0.2rem] font-subheading-bold">
+              로그인 / 회원가입
+            </h2>
+            <p className="text-placeholder font-body2-regular">
               카카오로 3초만에 가입할 수 있어요.
             </p>
           </div>
@@ -54,21 +56,25 @@ const MyProfileForUnAuth = () => {
         </div>
         <div className="flex flex-col gap-[0.6rem]">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-bold">책장</h3>
+            <h3 className="font-body1-bold">책장</h3>
           </div>
           <BookShelf>
             <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
               <BookShelf.Background />
               <div className="pb-[5.5rem] pt-[3rem] text-center">
-                <p className="text-sm text-placeholder">책장이 비었어요.</p>
+                <p className="text-placeholder font-body2-regular">
+                  책장이 비었어요.
+                </p>
               </div>
             </div>
           </BookShelf>
         </div>
         <div className="flex flex-col gap-[0.6rem]">
-          <h3 className="text-lg font-bold">참여한 모임</h3>
+          <h3 className="font-body1-bold">참여한 모임</h3>
           <div className="pb-[5.5rem] pt-[5.5rem] text-center">
-            <p className="text-sm text-placeholder">참여 중인 모임이 없어요.</p>
+            <p className="text-placeholder font-body2-regular">
+              참여 중인 모임이 없어요.
+            </p>
           </div>
         </div>
       </div>
@@ -101,7 +107,7 @@ const MyProfileForAuth = () => {
         <ProfileInfo userId={USER_ID} />
         <Link href="/profile/me/edit" className="w-full">
           <Button colorScheme="main-light" size="full">
-            <span className="mr-[0.5rem] text-sm font-bold text-black-700">
+            <span className="mr-[0.5rem] text-black-700 font-body2-bold">
               프로필 수정
             </span>
           </Button>
diff --git a/src/v1/base/BottomNavigation.tsx b/src/v1/base/BottomNavigation.tsx
index b5d94a30..1edafb4c 100644
--- a/src/v1/base/BottomNavigation.tsx
+++ b/src/v1/base/BottomNavigation.tsx
@@ -50,7 +50,7 @@ const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
             }`}
           >
             <div className="h-[2.6rem] w-[2.6rem]">{icon}</div>
-            <p className="text-xs font-bold">{label}</p>
+            <p className="font-caption1-bold">{label}</p>
           </button>
         </Link>
       ))}
diff --git a/src/v1/base/Button.tsx b/src/v1/base/Button.tsx
index 7de2e249..b8384d40 100644
--- a/src/v1/base/Button.tsx
+++ b/src/v1/base/Button.tsx
@@ -15,20 +15,20 @@ type ButtonProps = PropsWithChildren<{
 const getSizeClasses = (size: Size) => {
   switch (size) {
     case 'small': {
-      return 'text-sm px-[1.2rem] py-[0.6rem]';
+      return 'font-body2-bold px-[1.2rem] py-[0.6rem]';
     }
     case 'medium': {
-      return 'text-md px-[1.6rem] py-[0.8rem]';
+      return 'font-body1-bold px-[1.6rem] py-[0.8rem]';
     }
     case 'large': {
-      return 'text-lg px-[2.4rem] py-[1rem]';
+      return 'font-body1-bold px-[2.4rem] py-[1rem]';
     }
     case 'full': {
-      return 'text-lg px-[2.4rem] py-[1rem] w-full';
+      return 'font-body1-bold px-[2.4rem] py-[1rem] w-full';
     }
     default: {
       // medium
-      return 'text-md px-[1.6rem] py-[0.8rem]';
+      return 'font-body1-bold px-[1.6rem] py-[0.8rem]';
     }
   }
 };
@@ -41,7 +41,7 @@ const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
         : 'border-main-900 text-main-900';
     }
     case 'main-light': {
-      return 'border-transparent bg-main-600/[.18] text-main-900 font-normal';
+      return 'border-transparent bg-main-600/[.18] text-main-900 !font-normal';
     }
     case 'warning': {
       return isFill
@@ -60,7 +60,7 @@ const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
 };
 
 const BASE_BUTTON_CLASSES =
-  'cursor-pointer border-[0.1rem] leading-none inline-block font-bold focus:outline-none focus:ring-2';
+  'cursor-pointer border-[0.1rem] leading-none inline-block focus:outline-none focus:ring-2';
 
 const Button = ({
   size = 'medium',
diff --git a/src/v1/base/DatePicker.tsx b/src/v1/base/DatePicker.tsx
index 0465b2ba..9f6c4074 100644
--- a/src/v1/base/DatePicker.tsx
+++ b/src/v1/base/DatePicker.tsx
@@ -53,7 +53,7 @@ const DatePicker = (
 
   return (
     <label
-      className={`relative flex h-[3rem] max-w-[14rem] items-center justify-between gap-[0.5rem] bg-transparent ${disabledClasses}`}
+      className={`relative flex h-[3rem] max-w-[16rem] items-center justify-between gap-[0.5rem] bg-transparent ${disabledClasses}`}
       htmlFor={name}
     >
       <div className="flex h-full min-w-0 flex-grow items-center">
@@ -69,8 +69,8 @@ const DatePicker = (
           {...props}
         />
         <p
-          className={`truncate text-sm ${
-            currentDate ? 'text-inherit' : 'text-placeholder'
+          className={`truncate font-body1-regular ${
+            currentDate ? 'text-black-700' : 'text-placeholder'
           }`}
         >
           {currentDate
diff --git a/src/v1/base/Drawer.tsx b/src/v1/base/Drawer.tsx
index d5fb2d9e..2ba799dc 100644
--- a/src/v1/base/Drawer.tsx
+++ b/src/v1/base/Drawer.tsx
@@ -86,12 +86,16 @@ const DrawerHeader = ({ children }: { children?: ReactNode }) => {
 };
 
 const DrawerContent = ({ children }: { children?: ReactNode }) => {
-  return <div className="w-full px-6 pt-6 text-md sm:px-8">{children}</div>;
+  return (
+    <div className="w-full px-6 pt-6 font-body1-regular sm:px-8">
+      {children}
+    </div>
+  );
 };
 
 const Title = ({ text }: { text?: string }) => {
   return (
-    <h1 className="flex-grow truncate pl-[2.5rem] text-center text-md">
+    <h1 className="flex-grow truncate pl-[2.5rem] text-center font-body1-regular">
       {text}
     </h1>
   );
diff --git a/src/v1/base/ErrorMessage.tsx b/src/v1/base/ErrorMessage.tsx
index 1bfc5490..35cd9b12 100644
--- a/src/v1/base/ErrorMessage.tsx
+++ b/src/v1/base/ErrorMessage.tsx
@@ -5,7 +5,7 @@ const ErrorMessage = ({ children }: { children?: ReactNode }) => {
   return (
     <>
       {children && (
-        <div className="flex items-center gap-[0.4rem] text-xs text-warning-800">
+        <div className="flex items-center gap-[0.4rem] text-warning-800 font-caption1-regular">
           <div className="h-[1.2rem] w-[1.2rem]">
             <IconWarningCircle />
           </div>
diff --git a/src/v1/base/Input.tsx b/src/v1/base/Input.tsx
index 1d0dd1f4..96fefd1f 100644
--- a/src/v1/base/Input.tsx
+++ b/src/v1/base/Input.tsx
@@ -13,8 +13,8 @@ interface InputProps extends ComponentPropsWithoutRef<'input'> {
 }
 
 const FONT_SIZE_CLASSES = {
-  small: 'text-sm after:text-sm',
-  large: 'text-lg font-bold after:text-lg after:font-bold',
+  small: 'font-body1-regular after:font-body1-regular',
+  large: 'font-subheading-bold after:font-subheading-bold',
 };
 
 const getInputStyleClasses = (inputStyle: InputStyle) => {
diff --git a/src/v1/base/InputLength.tsx b/src/v1/base/InputLength.tsx
index aa56a82e..212585df 100644
--- a/src/v1/base/InputLength.tsx
+++ b/src/v1/base/InputLength.tsx
@@ -12,7 +12,7 @@ const InputLength = ({
   const textColor = isError ? 'text-warning-800 ' : 'text-main-900';
 
   return (
-    <p className="text-xs">
+    <p className="font-caption1-regular">
       <span className={textColor}>{currentLength ? currentLength : 0}</span>/
       {maxLength}
     </p>
diff --git a/src/v1/base/LikeButton.tsx b/src/v1/base/LikeButton.tsx
index 3364f07c..ee71d2cd 100644
--- a/src/v1/base/LikeButton.tsx
+++ b/src/v1/base/LikeButton.tsx
@@ -21,7 +21,7 @@ const LikeButton = ({ isLiked, likeCount, onClick }: LikeButtonProps) => {
         className={`${ICON_COLOR_CLASS} h-[1.5rem] w-[1.5rem] fill-white stroke-[0.15rem]`}
       />
       <p
-        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center text-xs font-bold`}
+        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center font-caption1-bold`}
       >
         {likeCount}
       </p>
diff --git a/src/v1/base/Menu.tsx b/src/v1/base/Menu.tsx
index bcffbbf1..3518fb60 100644
--- a/src/v1/base/Menu.tsx
+++ b/src/v1/base/Menu.tsx
@@ -83,7 +83,7 @@ const Item = ({
 
   return (
     <li
-      className="block cursor-pointer list-none truncate whitespace-nowrap rounded-[0.5rem] px-[1rem] py-[0.7rem] text-sm hover:bg-black-100"
+      className="block cursor-pointer list-none truncate whitespace-nowrap rounded-[0.5rem] px-[1rem] py-[0.7rem] font-body2-regular hover:bg-black-100"
       onClick={handleItemClick}
     >
       {children}
diff --git a/src/v1/base/QueryErrorBoundaryFallback.tsx b/src/v1/base/QueryErrorBoundaryFallback.tsx
index 3a727f49..6cdfb1be 100644
--- a/src/v1/base/QueryErrorBoundaryFallback.tsx
+++ b/src/v1/base/QueryErrorBoundaryFallback.tsx
@@ -7,9 +7,7 @@ const QueryErrorBoundaryFallback = ({
 }) => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-[1rem] rounded-lg py-[2rem]">
-      <p className="text-md font-bold">
-        데이터를 불러오는 중 문제가 발생했어요.
-      </p>
+      <p className="font-body1-bold">데이터를 불러오는 중 문제가 발생했어요.</p>
       <Button size="small" onClick={resetErrorBoundary}>
         다시 불러오기
       </Button>
diff --git a/src/v1/base/RadioButton.tsx b/src/v1/base/RadioButton.tsx
index 219ab84e..3372c616 100644
--- a/src/v1/base/RadioButton.tsx
+++ b/src/v1/base/RadioButton.tsx
@@ -5,7 +5,7 @@ type RadioButtonProps = {
 } & Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>;
 
 const BASE_RADIO_BUTTON_CLASSES =
-  'px-[1.2rem] py-[0.5rem] bg-main-600/[0.18] text-main-900 text-sm font-normal rounded-[2rem] cursor-pointer w-full h-full peer-checked:bg-main-900 peer-checked:text-white';
+  'px-[1.4rem] py-[0.6rem] bg-main-600/[0.18] text-main-900 font-body2-regular rounded-[2rem] cursor-pointer peer-checked:bg-main-900 peer-checked:text-white';
 
 const RadioButton = (
   { name, value, label, ...props }: RadioButtonProps,
@@ -22,7 +22,7 @@ const RadioButton = (
         ref={ref}
         {...props}
       />
-      <span className={BASE_RADIO_BUTTON_CLASSES}>{label ?? value}</span>
+      <p className={BASE_RADIO_BUTTON_CLASSES}>{label ?? value}</p>
     </label>
   );
 };
diff --git a/src/v1/base/Select.tsx b/src/v1/base/Select.tsx
index f0d7f017..da626aad 100644
--- a/src/v1/base/Select.tsx
+++ b/src/v1/base/Select.tsx
@@ -17,7 +17,7 @@ const _Select = (
     : 'border-black-400 focus:border-main-900';
 
   return (
-    <div className="text-sm">
+    <div className="font-body2-regular">
       <select
         ref={ref}
         defaultValue=""
diff --git a/src/v1/base/Switch.tsx b/src/v1/base/Switch.tsx
index daf0738b..4fac095c 100644
--- a/src/v1/base/Switch.tsx
+++ b/src/v1/base/Switch.tsx
@@ -9,7 +9,7 @@ const Switch = (
 ) => {
   return (
     <label
-      className="relative inline-flex h-[2.4rem] w-[4.2rem] cursor-pointer items-center"
+      className="relative inline-flex h-[2.8rem] w-[4.9rem] cursor-pointer items-center"
       htmlFor={name}
     >
       <input
@@ -21,7 +21,7 @@ const Switch = (
         {...props}
       />
       <div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-cancel peer-checked:bg-main-900" />
-      <span className="absolute left-0 h-[2rem] w-[2rem] translate-x-[0.25rem] transform rounded-full bg-white transition peer-checked:translate-x-[2rem]" />
+      <span className="absolute left-0 h-[2.4rem] w-[2.4rem] translate-x-[0.2rem] transform rounded-full bg-white transition peer-checked:translate-x-[2.3rem]" />
       <span className="sr-only">{`Enable ${name}`}</span>
     </label>
   );
diff --git a/src/v1/base/TextArea.tsx b/src/v1/base/TextArea.tsx
index 56e55012..78a9760d 100644
--- a/src/v1/base/TextArea.tsx
+++ b/src/v1/base/TextArea.tsx
@@ -92,7 +92,7 @@ const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(
 
     return (
       <textarea
-        className={`min-h-[8rem] w-full resize-none rounded-[0.5rem] border-[0.05rem] p-[1rem] text-sm outline-none placeholder:text-placeholder ${borderColor}`}
+        className={`min-h-[8rem] w-full resize-none rounded-[0.5rem] border-[0.05rem] p-[1rem] outline-none font-body1-regular placeholder:text-placeholder ${borderColor}`}
         placeholder={placeholder || '내용을 입력해주세요'}
         ref={ref}
         {...props}
diff --git a/src/v1/base/Toast/ToastItem.tsx b/src/v1/base/Toast/ToastItem.tsx
index 5218880b..88f9650d 100644
--- a/src/v1/base/Toast/ToastItem.tsx
+++ b/src/v1/base/Toast/ToastItem.tsx
@@ -34,7 +34,9 @@ const ToastItem = ({ type = 'normal', message }: ToastOption) => {
           {scheme.icon}
         </div>
       )}
-      <p className={`text-sm leading-tight ${scheme.textColor}`}>{message}</p>
+      <p className={`!leading-tight font-body2-regular ${scheme.textColor}`}>
+        {message}
+      </p>
     </div>
   );
 };
diff --git a/src/v1/base/TopHeader.tsx b/src/v1/base/TopHeader.tsx
index a4269194..cd75d351 100644
--- a/src/v1/base/TopHeader.tsx
+++ b/src/v1/base/TopHeader.tsx
@@ -6,8 +6,8 @@ type TopHeaderProps = PropsWithChildren<{
 
 const TopHeader = ({ text, children }: TopHeaderProps) => {
   return (
-    <header className="flex w-full items-center justify-between pb-[2.8rem]">
-      <h1 className="text-xl font-bold text-main-900">{text}</h1>
+    <header className="flex w-full items-center justify-between pb-[2rem]">
+      <h1 className="text-main-900 font-heading">{text}</h1>
       {children}
     </header>
   );
diff --git a/src/v1/base/TopNavigation.tsx b/src/v1/base/TopNavigation.tsx
index 342e149d..d5fc3cd7 100644
--- a/src/v1/base/TopNavigation.tsx
+++ b/src/v1/base/TopNavigation.tsx
@@ -8,7 +8,7 @@ type ItemProps = TopNavigationProps;
 
 const TopNavigation = ({ children }: TopNavigationProps) => {
   return (
-    <div className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-[2.4rem] w-full max-w-[43rem] items-center justify-center bg-white px-[4rem] py-[2.7rem] text-md">
+    <div className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-[2.4rem] w-full max-w-[43rem] items-center justify-center bg-white px-[4rem] py-[2.7rem] font-body1-regular">
       {children}
     </div>
   );
diff --git a/src/v1/book/detail/BookInfo.tsx b/src/v1/book/detail/BookInfo.tsx
index 74b72525..f3c5a91e 100644
--- a/src/v1/book/detail/BookInfo.tsx
+++ b/src/v1/book/detail/BookInfo.tsx
@@ -35,11 +35,11 @@ const BookInfo = ({ bookId }: { bookId: APIBook['bookId'] }) => {
 export default BookInfo;
 
 const BookTitle = ({ title }: { title: string }) => (
-  <p className="text-lg font-bold">{title}</p>
+  <p className="font-subheading-bold">{title}</p>
 );
 
 const BookAuthor = ({ author }: { author: string }) => (
-  <p className="text-sm">{author}</p>
+  <p className="font-body2-regular">{author}</p>
 );
 
 const BookmarkButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {
@@ -78,7 +78,7 @@ const BookSummary = ({
   summary: string;
   bookUrl: string;
 }) => (
-  <p className="text-md">
+  <p>
     {summary}&nbsp;...&nbsp;
     {bookUrl && (
       <a target="_blank" href={bookUrl}>
@@ -104,7 +104,7 @@ const BookmarkUserInfo = ({ bookId }: { bookId: APIBook['bookId'] }) => {
           ))}
         </AvatarGroup>
       )}
-      <p className="text-sm">
+      <p className="font-body2-regular">
         {getBookmarkedUserCountText(totalCount, avatarCount)}
       </p>
     </div>
diff --git a/src/v1/bookArchive/BookArchiveForAuth.tsx b/src/v1/bookArchive/BookArchiveForAuth.tsx
index d5f921c8..ca04fed3 100644
--- a/src/v1/bookArchive/BookArchiveForAuth.tsx
+++ b/src/v1/bookArchive/BookArchiveForAuth.tsx
@@ -35,21 +35,21 @@ const BookArchiveForAuth = ({
   if (!bookshelfData || !booksData) return null;
 
   return (
-    <div className="flex w-full flex-col gap-[1.5rem] text-md font-bold">
+    <div className="flex w-full flex-col gap-[1.5rem] font-body1-bold">
       <h2>👀 이런 책들이 많이 꽂혔어요</h2>
-      <ul className="flex gap-[1.5rem] overflow-auto">
+      <ul className="flex gap-[1.5rem] overflow-auto pb-[1.5rem]">
         {booksData.books.map(({ bookId, imageUrl, title }) => (
           <li key={bookId} className="max-w-[9rem]">
             <Link href={`/book/${bookId}`} className="flex flex-col gap-[1rem]">
               <BookCover src={imageUrl} title={title} size="large" />
-              <span className="line-clamp-2 break-keep text-center text-xs font-normal leading-tight">
+              <span className="line-clamp-2 break-keep text-center font-caption1-regular ">
                 {title}
               </span>
             </Link>
           </li>
         ))}
       </ul>
-      <h2>🔥 인기 책장</h2>
+      <h2 className="font-body1-bold">🔥 인기 책장</h2>
       {...bookshelfData.bookshelfResponses.map(bookShelf => (
         <BookShelfCard key={bookShelf.bookshelfId} {...bookShelf} />
       ))}
diff --git a/src/v1/bookArchive/BookArchiveForUnAuth.tsx b/src/v1/bookArchive/BookArchiveForUnAuth.tsx
index 01263646..0550cba8 100644
--- a/src/v1/bookArchive/BookArchiveForUnAuth.tsx
+++ b/src/v1/bookArchive/BookArchiveForUnAuth.tsx
@@ -13,7 +13,7 @@ const BookArchiveForUnAuth = () => {
   if (!isSuccess) return null;
 
   return (
-    <div className="flex w-full flex-col gap-[1.5rem] text-md font-bold">
+    <div className="flex w-full flex-col gap-[1.5rem] font-body1-bold">
       <h2>🔥 인기 책장</h2>
       {...data.bookshelfResponses.map(bookShelf => (
         <BookShelfCard key={bookShelf.bookshelfId} {...bookShelf} />
diff --git a/src/v1/bookGroup/BookGroupNavigation.tsx b/src/v1/bookGroup/BookGroupNavigation.tsx
index d84babef..9a21892b 100644
--- a/src/v1/bookGroup/BookGroupNavigation.tsx
+++ b/src/v1/bookGroup/BookGroupNavigation.tsx
@@ -245,9 +245,9 @@ const DeleteBookGroupModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="text-lg font-bold leading-loose">
-        모임을 정말 삭제할까요?
-        <p className="text-sm font-normal leading-tight text-black-500">
+      <div className="flex flex-col gap-[0.5rem] leading-loose font-subheading-bold">
+        <p>모임을 정말 삭제할까요?</p>
+        <p className="leading-tight text-black-500 font-body2-regular">
           참여 중인 모임원이 있는 경우, 모임을 삭제할 수 없어요.
         </p>
       </div>
diff --git a/src/v1/bookGroup/BookInfoCard.tsx b/src/v1/bookGroup/BookInfoCard.tsx
index 79aec9d6..aa2770d2 100644
--- a/src/v1/bookGroup/BookInfoCard.tsx
+++ b/src/v1/bookGroup/BookInfoCard.tsx
@@ -70,8 +70,10 @@ const BookInfoContent = ({
     <div className="flex min-h-[12.8rem] w-full gap-[2.4rem] rounded-[0.5rem] border-[0.05rem] border-cancel px-[2.2rem] py-[1.8rem]">
       <BookCover size="xsmall" src={bookInfo.imageUrl} title={bookInfo.title} />
       <div className="flex min-w-0 flex-grow flex-col">
-        <span className="truncate text-sm font-bold">{bookInfo.title}</span>
-        <span className="text-xs text-placeholder">{bookInfo.author}</span>
+        <span className="truncate font-body2-bold">{bookInfo.title}</span>
+        <span className="text-placeholder font-caption1-regular">
+          {bookInfo.author}
+        </span>
       </div>
       {removable ? (
         <IconDelete
@@ -95,7 +97,7 @@ const BookInfoContent = ({
 //       onClick={onBookSelect}
 //     >
 //       <IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
-//       <p className="text-xs text-placeholder">
+//       <p className="font-caption2-regular text-placeholder">
 //         독서모임에 사용할 책을 선택해주세요
 //       </p>
 //     </div>
diff --git a/src/v1/bookGroup/DetailBookGroupCard.tsx b/src/v1/bookGroup/DetailBookGroupCard.tsx
index a725c43c..f0e81ca2 100644
--- a/src/v1/bookGroup/DetailBookGroupCard.tsx
+++ b/src/v1/bookGroup/DetailBookGroupCard.tsx
@@ -67,11 +67,11 @@ const Public = ({ isPublic }: { isPublic: boolean }) => (
 );
 
 const Title = ({ title }: { title: string }) => {
-  return <p className="min-w-0 truncate text-md font-bold">{title}</p>;
+  return <p className="min-w-0 truncate font-body1-bold">{title}</p>;
 };
 
 const Description = ({ description }: { description: string }) => {
-  return <p className="min-w-0 truncate text-sm">{description}</p>;
+  return <p className="min-w-0 truncate font-body2-regular">{description}</p>;
 };
 
 const Duration = ({ start, end }: { start: string; end: string }) => {
@@ -85,7 +85,7 @@ const Duration = ({ start, end }: { start: string; end: string }) => {
   return (
     <div className="flex items-center gap-[0.5rem]">
       <IconCalendar className="w-[1.2rem] fill-placeholder" />
-      <p className="text-xs text-placeholder">
+      <p className="text-placeholder font-caption1-regular">
         {formatDateTime(start)} - {formatDateTime(end)}
       </p>
     </div>
@@ -102,7 +102,7 @@ const Owner = ({
   return (
     <div className="flex h-[2rem] gap-[0.5rem]">
       <Avatar name={name} src={profileImageSrc} size="small" />
-      <div className="flex items-center text-xs">
+      <div className="flex items-center font-caption1-regular">
         <p>{name}</p>
       </div>
     </div>
@@ -113,7 +113,7 @@ const MemberCount = ({ memberCount }: { memberCount: number }) => {
   return (
     <div className="flex items-center gap-[0.3rem]">
       <IconMembers className="h-[0.9rem] w-[1.3rem] fill-placeholder" />
-      <p className="text-xs text-placeholder">{memberCount}</p>
+      <p className="text-placeholder font-caption1-regular">{memberCount}</p>
     </div>
   );
 };
@@ -122,7 +122,7 @@ const CommentCount = ({ commentCount }: { commentCount: number }) => {
   return (
     <div className="flex items-center gap-[0.3rem]">
       <IconComments className="h-[1.2rem] w-[1.2rem] fill-placeholder" />
-      <p className="text-xs text-placeholder">{commentCount}</p>
+      <p className="text-placeholder font-caption1-regular">{commentCount}</p>
     </div>
   );
 };
diff --git a/src/v1/bookGroup/SimpleBookGroupCard.tsx b/src/v1/bookGroup/SimpleBookGroupCard.tsx
index 6ea7f622..060f6a86 100644
--- a/src/v1/bookGroup/SimpleBookGroupCard.tsx
+++ b/src/v1/bookGroup/SimpleBookGroupCard.tsx
@@ -20,7 +20,7 @@ const SimpleBookGroupCard = ({
         <div className="bg-orange-100 px-[1.8rem] py-[1.6rem]">
           <BookCover size="xsmall" src={imageSource} />
         </div>
-        <p className="break-keep text-center text-xs leading-tight">
+        <p className="break-keep text-center !leading-tight font-caption1-regular">
           {isOwner ? `👑 ${title}` : title}
         </p>
       </article>
diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx b/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
index b73fa8e8..fa756170 100644
--- a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
+++ b/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
@@ -12,7 +12,7 @@ const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
   return (
     <article>
       <section className="flex flex-col gap-[1.5rem]">
-        <h2 className="text-lg font-bold text-black-700">
+        <h2 className="text-black-700 font-subheading-bold">
           독서모임 이름을 적어주세요
         </h2>
         <TitleField name="title" />
diff --git a/src/v1/bookGroup/create/steps/SelectBookStep/SelectBookStep.tsx b/src/v1/bookGroup/create/steps/SelectBookStep/SelectBookStep.tsx
index 9fd306c8..67a8d959 100644
--- a/src/v1/bookGroup/create/steps/SelectBookStep/SelectBookStep.tsx
+++ b/src/v1/bookGroup/create/steps/SelectBookStep/SelectBookStep.tsx
@@ -28,7 +28,9 @@ const SelectBookStep = ({ onNextStep }: MoveFunnelStepProps) => {
 
   return (
     <article className="relative flex w-full flex-col gap-[1rem]">
-      <h2 className="text-lg font-bold">어떤 책으로 독서모임을 시작할까요?</h2>
+      <h2 className="font-subheading-bold">
+        어떤 책으로 독서모임을 시작할까요?
+      </h2>
 
       <Input
         placeholder="책 제목, 작가를 검색해보세요"
diff --git a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
index 689e2885..6be2b355 100644
--- a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
+++ b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
@@ -14,7 +14,9 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
 
   return (
     <article>
-      <h2 className="mb-[3rem] text-lg font-bold">가입은 어떻게 받을까요?</h2>
+      <h2 className="mb-[3rem] font-subheading-bold">
+        가입은 어떻게 받을까요?
+      </h2>
 
       <section className="flex flex-col gap-[2rem]">
         <JoinTypeFieldset>
diff --git a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinTypeRadioCard.tsx b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinTypeRadioCard.tsx
index afc0d173..8e0f3b23 100644
--- a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinTypeRadioCard.tsx
+++ b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinTypeRadioCard.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 
 const BASE_CLASSES =
-  'flex h-[8rem] w-full cursor-pointer items-center justify-between rounded-[0.5rem] border-[0.1rem] bg-white px-[2.5rem] text-black-600 text-md';
+  'flex h-[8rem] w-full cursor-pointer items-center justify-between rounded-[0.5rem] border-[0.1rem] bg-white px-[2.5rem] text-black-600 font-body1-regular';
 
 const JoinTypeRadioCard = (
   {
diff --git a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx
index 55182f6e..26de9788 100644
--- a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx
+++ b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx
@@ -33,7 +33,7 @@ const SetUpDetailStep = ({
     useFormContext<SetUpDetailStepFormValues>();
 
   return (
-    <article className="flex flex-col gap-[3.2rem] overflow-y-scroll pb-[7rem]">
+    <article className="flex flex-col gap-[2.5rem] overflow-y-scroll pb-[7rem]">
       <TitleField name={'title'} />
       <SelectedBookInfoField
         bookId={getValues('book.bookId')}
@@ -41,7 +41,7 @@ const SetUpDetailStep = ({
       />
       <IntroduceField name={'introduce'} />
 
-      <section className="flex flex-col gap-[1.6rem]">
+      <section className="flex flex-col gap-[1.5rem] pb-[1rem]">
         <MaxMemberCountField name={'maxMemberCount'} />
         <CustomMemberCountField name={'customMemberCount'} />
       </section>
@@ -139,7 +139,7 @@ const IntroduceField = ({ name }: SetUpDetailFieldProps) => {
   const introduceErrors = errors[name];
 
   return (
-    <section className="flex flex-col gap-[1.6rem]">
+    <section className="flex flex-col gap-[1.2rem]">
       <h2>활동 내용</h2>
       <TextArea
         count={true}
@@ -168,7 +168,7 @@ const MaxMemberCountField = ({ name }: SetUpDetailFieldProps) => {
   return (
     <>
       <h2>최대 인원</h2>
-      <fieldset className="inline-flex w-[70%] flex-wrap gap-[1rem]">
+      <fieldset className="inline-flex w-[80%] flex-wrap gap-[1.2rem]">
         {MAX_MEMBER_COUNT_OPTIONS.map(option => (
           <RadioButton
             key={option.value}
@@ -202,7 +202,8 @@ const CustomMemberCountField = ({ name }: SetUpDetailFieldProps) => {
         <div className="flex flex-col gap-[0.5rem]">
           <Input
             type="number"
-            placeholder="1000명 이상의 인원은 제한 없음을 선택해주세요"
+            min={0}
+            placeholder="최대인원을 입력해주세요"
             className="after:content-['명']"
             error={!!customMemberCountErrors}
             {...register(name, {
@@ -211,7 +212,10 @@ const CustomMemberCountField = ({ name }: SetUpDetailFieldProps) => {
                 message: '모임 최대 인원을 입력해주세요',
               },
               min: { value: 2, message: '모임 인원은 최소 2명부터 가능해요' },
-              max: { value: 1000, message: '1000 이하의 값을 입력해주세요' },
+              max: {
+                value: 1000,
+                message: '1000명 이상의 인원은 제한 없음을 선택해주세요',
+              },
             })}
           />
           <ErrorMessage>{customMemberCountErrors?.message}</ErrorMessage>
@@ -292,10 +296,10 @@ const SwitchIsPublicField = ({ name }: SetUpDetailFieldProps) => {
   const isCommentPublic = useWatch({ control, name });
 
   return (
-    <section className="flex items-start justify-between">
+    <section className="flex items-center justify-between">
       <div className="flex min-w-0 flex-col gap-[0.3rem]">
         <h2>댓글 공개 여부</h2>
-        <p className="text-xs text-placeholder">
+        <p className="text-placeholder font-caption1-regular">
           {isCommentPublic
             ? '모임에 가입하지 않아도 댓글을 볼 수 있어요'
             : '모임에 가입해야 댓글을 볼 수 있어요'}
diff --git a/src/v1/bookGroup/detail/BookGroupInfo.tsx b/src/v1/bookGroup/detail/BookGroupInfo.tsx
index 3dd97850..c49e6792 100644
--- a/src/v1/bookGroup/detail/BookGroupInfo.tsx
+++ b/src/v1/bookGroup/detail/BookGroupInfo.tsx
@@ -59,7 +59,7 @@ const Owner = ({
         size="medium"
         src={userInfo.profileImage}
       />
-      <span className="text-center text-sm font-bold">
+      <span className="text-center font-body2-bold">
         <span>{userInfo.nickname}</span>
         <span>{isMe && ' 👑'}</span>
       </span>
@@ -68,14 +68,14 @@ const Owner = ({
 };
 
 const Title = ({ title }: { title: string }) => {
-  return <p className="text-xl font-bold">{title}</p>;
+  return <p className="font-subheading-bold">{title}</p>;
 };
 
 const Duration = ({ start, end }: { start: string; end: string }) => {
   return (
     <div className="flex items-center gap-[1rem]">
       <IconCalendar className="h-auto w-[1.6rem] fill-placeholder" />
-      <span className="text-sm text-placeholder">
+      <span className="text-placeholder font-body2-regular">
         {start} ~ {end}
       </span>
     </div>
@@ -92,7 +92,7 @@ const MemberCapacity = ({
   return (
     <div className="flex items-center gap-[1rem]">
       <IconMembers className="h-auto w-[1.6rem] fill-placeholder" />
-      <p className="text-sm text-placeholder">
+      <p className="text-placeholder font-body2-regular">
         <span className="text-main-900">{current}</span>
         {`${max ? ` / ${max}` : ''}명`}
       </p>
@@ -101,5 +101,5 @@ const MemberCapacity = ({
 };
 
 const Description = ({ content }: { content: string }) => {
-  return <p className="text-md leading-snug">{content}</p>;
+  return <p className="leading-snug font-body1-regular">{content}</p>;
 };
diff --git a/src/v1/bookGroup/detail/MemberItem.tsx b/src/v1/bookGroup/detail/MemberItem.tsx
index 9ae497ac..820ba75c 100644
--- a/src/v1/bookGroup/detail/MemberItem.tsx
+++ b/src/v1/bookGroup/detail/MemberItem.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Avatar from '@/v1/base/Avatar';
 
 interface MemberItemProps {
   profileImageSrc: string;
@@ -15,7 +15,7 @@ const MemberItem = ({
 }: MemberItemProps) => {
   return (
     <div className="flex gap-[0.8rem]">
-      <Avatar profileImageSrc={profileImageSrc} name={name} />
+      <Avatar src={profileImageSrc} name={name} />
       <div className="flex flex-col">
         <Name text={name} isMarked={isOwner} />
         <Job group={job.group} name={job.name} />
@@ -26,33 +26,14 @@ const MemberItem = ({
 
 export default MemberItem;
 
-// FIXME: Avatar Base 컴포넌트로 변경
-const Avatar = ({
-  profileImageSrc,
-  name,
-}: {
-  profileImageSrc: string;
-  name: string;
-}) => (
-  <span
-    className={`relative h-[3.5rem] w-[3.5rem] ${
-      profileImageSrc ? 'bg-white' : 'bg-black-400'
-    }`}
-  >
-    {profileImageSrc && (
-      <Image alt={name} src={profileImageSrc} fill className="rounded-full" />
-    )}
-  </span>
-);
-
 const Name = ({ text, isMarked }: { text: string; isMarked: boolean }) => (
-  <p className="text-sm font-bold">
+  <p className="font-body2-bold">
     {text} {isMarked && ' 👑'}
   </p>
 );
 
 const Job = ({ group, name }: { group: string; name: string }) => (
-  <p className="text-xs text-placeholder">
+  <p className="text-placeholder font-caption1-regular">
     {group} • {name}
   </p>
 );
diff --git a/src/v1/bookGroup/detail/ShortMemberInfo.tsx b/src/v1/bookGroup/detail/ShortMemberInfo.tsx
index ee331ac2..177611f0 100644
--- a/src/v1/bookGroup/detail/ShortMemberInfo.tsx
+++ b/src/v1/bookGroup/detail/ShortMemberInfo.tsx
@@ -31,7 +31,7 @@ const ShortMemberInfo = ({ members }: ShortMemberInfoProps) => {
 export default ShortMemberInfo;
 
 const Heading = ({ text }: { text: string }) => (
-  <p className="text-xl font-bold">{text}</p>
+  <p className="font-subheading-bold">{text}</p>
 );
 
 const MemberList = ({ members }: { members: Member[] }) => (
@@ -48,7 +48,7 @@ const ViewAllButton = () => {
   return (
     <Link href={`${pathname}/members`}>
       <Button size="full" colorScheme="main-light">
-        <span className="mr-[0.5rem] text-sm font-bold text-black-700">
+        <span className="mr-[0.5rem] text-black-700 font-body2-bold">
           전체보기
         </span>
         <IconArrowLeft className="inline-block h-[1rem] w-[1rem] rotate-180" />
diff --git a/src/v1/bookGroup/edit/BookGroupEditDateForm.tsx b/src/v1/bookGroup/edit/BookGroupEditDateForm.tsx
index d38ab34c..2a7aeab4 100644
--- a/src/v1/bookGroup/edit/BookGroupEditDateForm.tsx
+++ b/src/v1/bookGroup/edit/BookGroupEditDateForm.tsx
@@ -17,8 +17,8 @@ const BookGroupEditDateForm = () => {
     <>
       <section className="flex justify-between">
         <div>
-          <h2 className="text-md text-black-500">모임 시작일</h2>
-          <p className="text-xs text-placeholder">
+          <h2 className="text-black-500">모임 시작일</h2>
+          <p className="pt-[0.3rem] text-placeholder font-caption1-regular">
             모임 시작일은 수정할 수 없어요
           </p>
         </div>
@@ -26,7 +26,7 @@ const BookGroupEditDateForm = () => {
       </section>
       <section className="flex flex-col gap-[0.5rem]">
         <div className="flex justify-between">
-          <h2 className="text-md text-black-700">모임 종료일</h2>
+          <h2 className="text-black-700">모임 종료일</h2>
           <DatePicker
             {...register('endDate', {
               required: { value: true, message: '종료일을 입력해주세요' },
diff --git a/src/v1/bookGroup/edit/BookGroupEditIntroduceForm.tsx b/src/v1/bookGroup/edit/BookGroupEditIntroduceForm.tsx
index 2ad8f878..4a0ea01b 100644
--- a/src/v1/bookGroup/edit/BookGroupEditIntroduceForm.tsx
+++ b/src/v1/bookGroup/edit/BookGroupEditIntroduceForm.tsx
@@ -14,7 +14,7 @@ const BookGroupEditIntroduceForm = () => {
 
   return (
     <section className="flex flex-col gap-[0.6rem]">
-      <h2 className="text-md text-black-700">활동 내용</h2>
+      <h2 className="text-black-700 font-body1-regular">활동 내용</h2>
       <TextArea
         count={true}
         maxLength={500}
diff --git a/src/v1/bookGroup/edit/BookGroupEditTopNavigation.tsx b/src/v1/bookGroup/edit/BookGroupEditTopNavigation.tsx
index 666c8429..2023958c 100644
--- a/src/v1/bookGroup/edit/BookGroupEditTopNavigation.tsx
+++ b/src/v1/bookGroup/edit/BookGroupEditTopNavigation.tsx
@@ -20,12 +20,12 @@ const BookGroupEditTopNavigation = ({
         <BackButton />
       </TopNavigation.LeftItem>
       <TopNavigation.CenterItem>
-        <h1 className="text-md text-black-900">모임 수정하기</h1>
+        <h1 className="text-black-900 font-body1-regular">모임 수정하기</h1>
       </TopNavigation.CenterItem>
       <TopNavigation.RightItem>
         <button
           onClick={handleSubmit(onSubmit)}
-          className="cursor-pointer font-bold text-main-900"
+          className="cursor-pointer text-main-900 font-body1-bold"
         >
           완료
         </button>
diff --git a/src/v1/bookSearch/BestSellers.tsx b/src/v1/bookSearch/BestSellers.tsx
index 522a7f45..e3243505 100644
--- a/src/v1/bookSearch/BestSellers.tsx
+++ b/src/v1/bookSearch/BestSellers.tsx
@@ -48,15 +48,15 @@ const BestSellers = () => {
   };
 
   return (
-    <section className="flex flex-col gap-[1.7rem]">
-      <h2 className="h-[2.4rem] text-lg">인기 도서</h2>
+    <section className="flex flex-col gap-[1.5rem]">
+      <h2 className="font-body1-regular">인기 도서</h2>
       <ul className="flex w-[calc(100%+2rem)] gap-[0.8rem] overflow-x-scroll whitespace-nowrap">
         <li className="rounded-[1.5rem] bg-[#5C5C5C] px-[1.5rem] py-[0.3rem]">
-          <p className="text-sm font-normal text-white">종합</p>
+          <p className="font-normal text-white font-body2-regular">종합</p>
         </li>
       </ul>
 
-      <ul className="flex w-full flex-row items-center divide-x divide-black-900 text-sm">
+      <ul className="flex w-full flex-row items-center divide-x divide-black-900 font-body2-regular">
         {searchRanges.map(keys => (
           <li
             className={`flex h-[1.1rem] cursor-pointer items-center px-[0.9rem] ${
@@ -73,7 +73,7 @@ const BestSellers = () => {
       </ul>
 
       {bestSellerSearchRange === 'WEEKLY' ? (
-        <ul className="flex w-[calc(100%+2rem)] overflow-x-scroll">
+        <ul className="flex w-[calc(100%+2rem)] overflow-x-scroll pb-[1rem]">
           {bestSellers.map(book => (
             <BestSeller
               key={book.isbn}
@@ -90,7 +90,7 @@ const BestSellers = () => {
           ))}
         </ul>
       ) : (
-        <p className="mb-[2.4rem] text-center text-sm text-placeholder">
+        <p className="mb-[2.4rem] text-center text-placeholder font-body2-regular">
           아직 준비중인 기능이에요 🔨
         </p>
       )}
@@ -141,14 +141,10 @@ const BestSeller = ({
     >
       <BookCover src={imageUrl} title={title} size={'xlarge'} />
       <div className="flex flex-row gap-[1rem]">
-        <p className="text-xl font-bold leading-tight text-black-900">
-          {bestRank}
-        </p>
-        <div className="flex min-w-0 flex-col gap-[0.3rem]">
-          <p className="line-clamp-2 text-sm leading-tight text-black-900">
-            {title}
-          </p>
-          <p className="line-clamp-1 text-sm text-[#5c5c5c]">{author}</p>
+        <p className="text-black-900 font-heading">{bestRank}</p>
+        <div className="flex min-w-0 flex-col gap-[0.3rem] font-body2-regular">
+          <p className="line-clamp-2 !leading-tight text-black-900 ">{title}</p>
+          <p className="line-clamp-1 text-[#5c5c5c] ">{author}</p>
         </div>
       </div>
     </div>
diff --git a/src/v1/bookSearch/BookSearchList.tsx b/src/v1/bookSearch/BookSearchList.tsx
index 4b656522..a315455b 100644
--- a/src/v1/bookSearch/BookSearchList.tsx
+++ b/src/v1/bookSearch/BookSearchList.tsx
@@ -32,7 +32,7 @@ const BookSearchList = ({
 
   if (!books.length) {
     return (
-      <p className="mb-[2.4rem] text-center text-sm text-placeholder">
+      <p className="mb-[2.4rem] text-center text-placeholder font-body2-regular">
         검색된 도서가 없어요 🥲
       </p>
     );
@@ -40,9 +40,11 @@ const BookSearchList = ({
 
   return (
     <>
-      <h3 className="mb-[1rem] font-bold">
-        <span className="">검색 결과 </span>
-        <span className="text-black-500">{totalCount}</span>
+      <h3 className="mb-[1rem] ">
+        <span className="text-black-600 font-body1-bold">검색 결과 </span>
+        <span className="pl-[0.2rem] text-black-500 font-body1-regular">
+          {totalCount}
+        </span>
       </h3>
       <ul className="grid w-full grid-cols-3 gap-[1.6rem]">
         {books.map((book, idx) => (
@@ -75,7 +77,7 @@ const BookSearchItem = ({
       className="flex min-h-0 w-full cursor-pointer flex-col gap-[0.8rem] bg-white p-[0.2rem]"
     >
       <BookCover size="fill" src={imageUrl} title={title} />
-      <p className="line-clamp-2 text-sm font-normal leading-tight text-black-900">
+      <p className="line-clamp-2 !leading-tight text-black-900 font-body2-regular">
         {title}
       </p>
     </li>
diff --git a/src/v1/bookSearch/RecentSearchList.tsx b/src/v1/bookSearch/RecentSearchList.tsx
index 81a020e3..54223468 100644
--- a/src/v1/bookSearch/RecentSearchList.tsx
+++ b/src/v1/bookSearch/RecentSearchList.tsx
@@ -10,8 +10,8 @@ type RecentSearchListProps = {
 
 const RecentSearchList = ({ keywords, onClick }: RecentSearchListProps) => {
   return (
-    <section className="flex flex-col gap-[1.7rem]">
-      <h2 className="h-[2.4rem] text-lg">최근 검색어</h2>
+    <section className="flex flex-col gap-[1.5rem]">
+      <h2 className="font-body1-regular">최근 검색어</h2>
       {keywords ? (
         <ul className="relative flex w-[calc(100%+2rem)] gap-[1rem] overflow-x-scroll whitespace-nowrap pb-[1rem]">
           {keywords.map(item => (
@@ -29,7 +29,7 @@ const RecentSearchList = ({ keywords, onClick }: RecentSearchListProps) => {
           ))}
         </ul>
       ) : (
-        <p className="mb-[2.4rem] text-center text-sm text-placeholder">
+        <p className="mb-[2.4rem] text-center text-placeholder font-body2-regular">
           검색 기록이 없어요!
         </p>
       )}
diff --git a/src/v1/bookShelf/BookShelf.tsx b/src/v1/bookShelf/BookShelf.tsx
index d0868e6b..f628108d 100644
--- a/src/v1/bookShelf/BookShelf.tsx
+++ b/src/v1/bookShelf/BookShelf.tsx
@@ -26,7 +26,7 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
   return (
     <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
-        <div className="text-md font-bold">{bookshelfName}</div>
+        <div className="font-body2-bold">{bookshelfName}</div>
         <Link href={`/bookshelf/${bookshelfId}`}>
           <IconArrowRight width="1.8rem" height="1.8rem" />
         </Link>
@@ -34,7 +34,7 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
       <Badge colorScheme="red" fontWeight="bold" size="small">
         <div className="flex items-center gap-[0.4rem]">
           <IconHeart className="h-[1.3rem] w-[1.3rem] fill-warning-800 stroke-white stroke-[0.15rem]" />
-          <div className="bold text-xs">{likeCount}</div>
+          <div className="font-caption1-bold">{likeCount}</div>
         </div>
       </Badge>
     </div>
diff --git a/src/v1/comment/CommentDrawer.tsx b/src/v1/comment/CommentDrawer.tsx
index 4ea69796..e0410e4c 100644
--- a/src/v1/comment/CommentDrawer.tsx
+++ b/src/v1/comment/CommentDrawer.tsx
@@ -53,7 +53,7 @@ const CommentDrawer = forwardRef<HTMLTextAreaElement, CommentDrawerProps>(
         </Drawer.Header>
         <Drawer.Content>
           <textarea
-            className="w-full resize-none border-none text-md focus:outline-none"
+            className="w-full resize-none border-none font-body1-regular focus:outline-none"
             rows={15}
             defaultValue={defaultComment}
             placeholder={placeholder}
diff --git a/src/v1/comment/CommentList.tsx b/src/v1/comment/CommentList.tsx
index 99d0d83e..714ad86d 100644
--- a/src/v1/comment/CommentList.tsx
+++ b/src/v1/comment/CommentList.tsx
@@ -43,12 +43,14 @@ const CommentList = ({
   );
 
   if (isHidden) {
-    return <p className="py-[2rem] text-center text-sm">{hiddenText}</p>;
+    return (
+      <p className="py-[2rem] text-center font-body2-regular">{hiddenText}</p>
+    );
   }
 
   if (comments.length === 0) {
     return (
-      <p className="self-center whitespace-pre-line py-[2rem] text-center text-sm">
+      <p className="self-center whitespace-pre-line py-[2rem] text-center font-body2-regular">
         {emptyText}
       </p>
     );
@@ -90,15 +92,15 @@ const CommentList = ({
 export default CommentList;
 
 const Name = ({ name }: { name: string }) => (
-  <p className="text-sm font-bold">{name}</p>
+  <p className="font-body2-bold">{name}</p>
 );
 
 const Date = ({ date }: { date: string }) => (
-  <p className="text-xs text-placeholder">{date}</p>
+  <p className="text-placeholder font-caption1-regular">{date}</p>
 );
 
 const CommentContent = ({ content }: { content: string }) => (
-  <p className="text-justify text-md">{content}</p>
+  <p className="text-justify font-body1-regular">{content}</p>
 );
 
 const CommentActionMenu = ({
@@ -184,9 +186,9 @@ const DeleteCommentModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="text-lg font-bold">
-        정말 삭제할까요?
-        <p className="text-xs font-normal text-black-500">
+      <div className="flex flex-col gap-[0.5rem] leading-loose font-subheading-bold">
+        <p>정말 삭제할까요?</p>
+        <p className="text-black-500 font-body2-regular">
           한번 삭제하면 되돌릴 수 없어요.
         </p>
       </div>
diff --git a/src/v1/profile/AddJobProfile.tsx b/src/v1/profile/AddJobProfile.tsx
index 7229cc9f..d688e307 100644
--- a/src/v1/profile/AddJobProfile.tsx
+++ b/src/v1/profile/AddJobProfile.tsx
@@ -93,24 +93,24 @@ const AddJobProfile = ({ jobCategories }: AddJobProfileProps) => {
     <>
       <TopNavigation>
         <TopNavigation.CenterItem textAlign="center">
-          <span className="text-md font-normal text-black-900">
-            프로필 등록
-          </span>
+          <p className="text-black-900 font-body1-regular">프로필 등록</p>
         </TopNavigation.CenterItem>
         <TopNavigation.RightItem>
-          <span
+          <button
             onClick={handleSubmit(handleSubmitForm)}
-            className="cursor-pointer text-md font-bold text-main-900"
+            className="text-main-900 font-body1-bold"
           >
             완료
-          </span>
+          </button>
         </TopNavigation.RightItem>
       </TopNavigation>
 
-      <div className="mt-[9.2rem] flex w-full flex-col gap-[3.3rem]">
-        <div className="flex flex-col gap-[1rem] font-normal">
-          <span className="text-lg text-black-700">프로필을 등록해주세요!</span>
-          <div className="text-sm text-placeholder">
+      <div className="mt-[3.8rem] flex w-full flex-col gap-[3.3rem]">
+        <div className="flex flex-col gap-[1rem]">
+          <span className="text-black-700 font-subheading-bold">
+            프로필을 등록해주세요!
+          </span>
+          <div className="text-placeholder font-body2-regular">
             <p>프로필을 등록하면</p>
             <p>
               <span className="text-main-900">다독다독</span>이 추천하는 책장을
@@ -124,9 +124,7 @@ const AddJobProfile = ({ jobCategories }: AddJobProfileProps) => {
           className="flex w-full flex-col gap-[3.2rem]"
         >
           <div className="flex flex-col gap-[1rem]">
-            <span className="h-[2.1rem] text-md font-normal text-black-700">
-              닉네임
-            </span>
+            <p className="text-black-700">닉네임</p>
             <div className="flex flex-col gap-[0.5rem]">
               <Input
                 placeholder="닉네임을 입력해주세요."
@@ -151,9 +149,7 @@ const AddJobProfile = ({ jobCategories }: AddJobProfileProps) => {
           </div>
 
           <div className="flex flex-col gap-[1rem]">
-            <span className="h-[2.1rem] text-md font-normal text-black-700">
-              직업/직군
-            </span>
+            <p className="text-black-700">직업/직군</p>
 
             <div className="flex flex-col gap-[0.5rem]">
               <Select
diff --git a/src/v1/profile/EditProfile.tsx b/src/v1/profile/EditProfile.tsx
index 187fad05..065ab62e 100644
--- a/src/v1/profile/EditProfile.tsx
+++ b/src/v1/profile/EditProfile.tsx
@@ -97,28 +97,24 @@ const EditProfile = ({ profile, jobGroups }: UserProfileProps) => {
           </Link>
         </TopNavigation.LeftItem>
         <TopNavigation.CenterItem textAlign="center">
-          <span className="text-md font-normal text-black-900">
-            프로필 수정
-          </span>
+          <p className="text-black-900">프로필 수정</p>
         </TopNavigation.CenterItem>
         <TopNavigation.RightItem>
-          <span
+          <button
             onClick={handleSubmit(handleSubmitForm)}
-            className="cursor-pointer text-md font-bold text-main-900"
+            className="text-main-900 font-body1-bold"
           >
             완료
-          </span>
+          </button>
         </TopNavigation.RightItem>
       </TopNavigation>
 
       <form
         onSubmit={handleSubmit(handleSubmitForm)}
-        className="mt-[9.2rem] flex w-full flex-col gap-[3.2rem]"
+        className="mt-[3.8rem] flex w-full flex-col gap-[3.2rem]"
       >
         <div className="flex flex-col gap-[1rem]">
-          <span className="h-[2.1rem] text-md font-normal text-black-700">
-            닉네임
-          </span>
+          <p className=" text-black-700">닉네임</p>
           <div className="flex flex-col gap-[0.5rem]">
             <Input
               placeholder="닉네임을 입력해주세요."
@@ -143,9 +139,7 @@ const EditProfile = ({ profile, jobGroups }: UserProfileProps) => {
         </div>
 
         <div className="flex flex-col gap-[1rem]">
-          <span className="h-[2.1rem] text-md font-normal text-black-700">
-            직업/직군
-          </span>
+          <p className="text-black-700">직업/직군</p>
 
           <div className="flex flex-col gap-[0.5rem]">
             <Select
diff --git a/src/v1/profile/LoginBottomSheet.tsx b/src/v1/profile/LoginBottomSheet.tsx
index 6027ee38..dd843092 100644
--- a/src/v1/profile/LoginBottomSheet.tsx
+++ b/src/v1/profile/LoginBottomSheet.tsx
@@ -21,10 +21,10 @@ const LoginBottomSheet = ({ isOpen, onClose }: LoginBottomSheetProps) => {
       />
       <div className="m-auto flex w-full max-w-[38rem] flex-col items-center gap-[2.5rem] px-[2rem] pt-[5rem]">
         <LogoWithText className="h-auto w-[6rem]" />
-        <p className="text-lg font-bold text-black-700">
+        <p className="text-black-700 font-subheading-bold">
           로그인이 필요한 서비스에요!
         </p>
-        <p className="whitespace-pre-line text-center text-sm font-normal text-placeholder">
+        <p className="whitespace-pre-line text-center text-placeholder font-body2-regular">
           간편하게 카카오로 로그인을 하고,
           <br />
           <span className="text-main-900">다독다독</span>의 다양한 기능을
@@ -33,7 +33,7 @@ const LoginBottomSheet = ({ isOpen, onClose }: LoginBottomSheetProps) => {
         <Button onClick={handleClickKakaoLogin} colorScheme="kakao" size="full">
           <div className="flex w-full items-center justify-center gap-[1rem]">
             <IconKakao className="h-auto w-[1.6rem]" />
-            <p className="text-md font-normal">카카오 로그인</p>
+            <p>카카오 로그인</p>
           </div>
         </Button>
       </div>
diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
index 44bd7634..f1573d26 100644
--- a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
+++ b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -14,7 +14,7 @@ const ProfileBookshelfPresenter = ({
   return (
     <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-bold">책장</h3>
+        <h3 className="font-body1-bold">책장</h3>
         <div className="flex gap-[2rem]">
           <Badge
             colorScheme="red"
@@ -24,7 +24,7 @@ const ProfileBookshelfPresenter = ({
           >
             <div className="flex items-center gap-[0.4rem]">
               <IconHeart className="h-[1.4rem] w-[1.4rem] fill-[#F56565]" />
-              <div className="bold text-xs">{likeCount}</div>
+              <div className="font-caption1-bold">{likeCount}</div>
             </div>
           </Badge>
           <Link href={`/bookshelf/${bookshelfId}`}>
diff --git a/src/v1/profile/group/ProfileGroupPresenter.tsx b/src/v1/profile/group/ProfileGroupPresenter.tsx
index d72ab387..f1347547 100644
--- a/src/v1/profile/group/ProfileGroupPresenter.tsx
+++ b/src/v1/profile/group/ProfileGroupPresenter.tsx
@@ -18,13 +18,13 @@ const ProfileGroupPresenter = ({
   return (
     <div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-bold">참여한 모임</h3>
+        <h3 className="font-body1-bold">참여한 모임</h3>
         <Link href={`/profile/${userId}/group`}>
           <IconArrowRight height="1.8rem" width="1.8rem" />
         </Link>
       </div>
 
-      <ul className="w-app flex gap-[1rem] overflow-y-hidden overflow-x-scroll px-[2rem]">
+      <ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
         {bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (
           <li key={bookGroupId}>
             <SimpleBookGroupCard
diff --git a/src/v1/profile/info/ProfileInfo.tsx b/src/v1/profile/info/ProfileInfo.tsx
index d23b2120..5835ffd0 100644
--- a/src/v1/profile/info/ProfileInfo.tsx
+++ b/src/v1/profile/info/ProfileInfo.tsx
@@ -53,7 +53,7 @@ const ProfileInfoSkeleton = () => {
       </div>
       <div className="flex items-center gap-[1rem]">
         <div className="h-[7rem] w-[7rem] rounded-full bg-placeholder" />
-        <div className="h-[2.7rem] w-[11rem] bg-placeholder text-lg" />
+        <div className="h-[2.7rem] w-[11rem] bg-placeholder" />
       </div>
     </div>
   );
diff --git a/src/v1/profile/info/ProfileInfoPresenter.tsx b/src/v1/profile/info/ProfileInfoPresenter.tsx
index 5d0c6ee1..d2ecdba2 100644
--- a/src/v1/profile/info/ProfileInfoPresenter.tsx
+++ b/src/v1/profile/info/ProfileInfoPresenter.tsx
@@ -31,7 +31,7 @@ const ProfileInfoPresenter = ({
       </div>
       <div className="flex items-center gap-[1rem]">
         <Avatar src={profileImage} size="large" />
-        <h2 className="text-lg">
+        <h2 className="font-subheading-regular">
           <b>{nickname}</b>님의 공간
         </h2>
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 716dafa4..e408935d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -129,5 +129,65 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    ({ addUtilities }) => {
+      addUtilities({
+        '.font-heading': {
+          fontSize: '2.1rem',
+          lineHeight: '1.5',
+          fontWeight: 700,
+        },
+        '.font-subheading-bold': {
+          fontSize: '1.8rem',
+          lineHeight: '1.5',
+          fontWeight: 700,
+        },
+        '.font-subheading-regular': {
+          fontSize: '1.8rem',
+          lineHeight: '1.5',
+          fontWeight: 400,
+        },
+        '.font-body1-bold': {
+          fontSize: '1.6rem',
+          lineHeight: '2.1rem',
+          fontWeight: 700,
+        },
+        '.font-body1-regular': {
+          fontSize: '1.6rem',
+          lineHeight: '2.1rem',
+          fontWeight: 400,
+        },
+        '.font-body2-bold': {
+          fontSize: '1.4rem',
+          lineHeight: '1.9rem',
+          fontWeight: 700,
+        },
+        '.font-body2-regular': {
+          fontSize: '1.4rem',
+          lineHeight: '1.9rem',
+          fontWeight: 400,
+        },
+        '.font-caption1-bold': {
+          fontSize: '1.2rem',
+          lineHeight: '1.6rem',
+          fontWeight: 700,
+        },
+        '.font-caption1-regular': {
+          fontSize: '1.2rem',
+          lineHeight: '1.6rem',
+          fontWeight: 400,
+        },
+        '.font-caption2-bold': {
+          fontSize: '1.1rem',
+          lineHeight: '1.3rem',
+          fontWeight: 700,
+        },
+        '.font-caption2-regular': {
+          fontSize: '1.1rem',
+          lineHeight: '1.3rem',
+          fontWeight: 400,
+        },
+      });
+    },
+  ],
 };