diff --git a/packages/web/src/components/track/desktop/BottomRow.tsx b/packages/web/src/components/track/desktop/BottomRow.tsx
index b843ff312c..67fe06a981 100644
--- a/packages/web/src/components/track/desktop/BottomRow.tsx
+++ b/packages/web/src/components/track/desktop/BottomRow.tsx
@@ -113,7 +113,13 @@ export const BottomRow = ({
 
   if (isTrack && premiumConditions && !isLoading && !doesUserHaveAccess) {
     return (
-      <div className={cn(typeStyles.titleSmall, styles.bottomRow)}>
+      <div
+        className={cn(
+          typeStyles.title,
+          typeStyles.titleSmall,
+          styles.bottomRow
+        )}
+      >
         <PremiumConditionsPill
           premiumConditions={premiumConditions}
           unlocking={premiumTrackStatus === 'UNLOCKING'}
diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
index 6186403542..bec0643979 100644
--- a/packages/web/src/components/track/desktop/TrackTile.tsx
+++ b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -293,7 +293,11 @@ const TrackTile = ({
             ) : (
               <a
                 href={permalink}
-                className={cn(typeStyles.titleMedium, styles.title)}
+                className={cn(
+                  typeStyles.title,
+                  typeStyles.titleMedium,
+                  styles.title
+                )}
                 onClick={onClickTitleWrapper}
               >
                 {title}
@@ -318,9 +322,14 @@ const TrackTile = ({
           </div>
 
           <div
-            className={cn(typeStyles.bodyXSmall, styles.socialsRow, {
-              [styles.isHidden]: isUnlisted
-            })}
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.socialsRow,
+              {
+                [styles.isHidden]: isUnlisted
+              }
+            )}
           >
             {isLoading ? (
               <Skeleton width='30%' className={styles.skeleton} />
@@ -331,7 +340,13 @@ const TrackTile = ({
               </>
             )}
           </div>
-          <div className={cn(typeStyles.bodyXSmall, styles.topRight)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.topRight
+            )}
+          >
             {isUnlisted ? (
               <div className={styles.topRightIconLabel}>
                 <IconHidden className={styles.topRightIcon} />
@@ -342,7 +357,13 @@ const TrackTile = ({
               <div className={styles.duration}>{getDurationText()}</div>
             ) : null}
           </div>
-          <div className={cn(typeStyles.bodyXSmall, styles.bottomRight)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.bottomRight
+            )}
+          >
             {!isLoading
               ? renderLockedOrPlaysContent({
                   doesUserHaveAccess,
diff --git a/packages/web/src/components/track/mobile/BottomButtons.tsx b/packages/web/src/components/track/mobile/BottomButtons.tsx
index 355738a79c..48f2cc3b4b 100644
--- a/packages/web/src/components/track/mobile/BottomButtons.tsx
+++ b/packages/web/src/components/track/mobile/BottomButtons.tsx
@@ -51,7 +51,13 @@ const BottomButtons = (props: BottomButtonsProps) => {
     !props.doesUserHaveAccess
   ) {
     return (
-      <div className={cn(typeStyles.titleSmall, styles.bottomButtons)}>
+      <div
+        className={cn(
+          typeStyles.title,
+          typeStyles.titleSmall,
+          styles.bottomButtons
+        )}
+      >
         <div className={styles.premiumContentContainer}>
           <PremiumConditionsPill
             premiumConditions={props.premiumConditions}
diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
index 43caa2b1a8..518117d533 100644
--- a/packages/web/src/components/track/mobile/TrackTile.tsx
+++ b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -125,7 +125,14 @@ export const RankIcon = ({
   className?: string
 }) => {
   return isVisible ? (
-    <div className={cn(typeStyles.bodyXsmall, styles.rankContainer, className)}>
+    <div
+      className={cn(
+        typeStyles.body,
+        typeStyles.bodyXSmall,
+        styles.rankContainer,
+        className
+      )}
+    >
       {showCrown ? <IconCrown /> : <IconTrending />}
       {index + 1}
     </div>
@@ -276,6 +283,7 @@ const TrackTile = (props: CombinedProps) => {
       <div className={styles.mainContent} onClick={handleClick}>
         <div
           className={cn(
+            typeStyles.body,
             typeStyles.bodyXSmall,
             styles.topRight,
             styles.statText
@@ -317,7 +325,11 @@ const TrackTile = (props: CombinedProps) => {
             })}
           >
             <a
-              className={cn(typeStyles.titleMedium, styles.title)}
+              className={cn(
+                typeStyles.title,
+                typeStyles.titleMedium,
+                styles.title
+              )}
               href={permalink}
               onClick={props.goToTrackPage}
             >
@@ -368,7 +380,13 @@ const TrackTile = (props: CombinedProps) => {
           )}
         </div>
         {coSign ? (
-          <div className={cn(typeStyles.bodyXSmall, styles.coSignText)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.coSignText
+            )}
+          >
             <div className={styles.name}>
               {coSign.user.name}
               <UserBadges userId={coSign.user.user_id} badgeSize={8} />
@@ -379,7 +397,13 @@ const TrackTile = (props: CombinedProps) => {
             })}
           </div>
         ) : null}
-        <div className={cn(typeStyles.bodyXSmall, styles.statsRow)}>
+        <div
+          className={cn(
+            typeStyles.body,
+            typeStyles.bodyXSmall,
+            styles.statsRow
+          )}
+        >
           <div className={styles.stats}>
             <RankIcon
               showCrown={showRankIcon}
@@ -434,7 +458,12 @@ const TrackTile = (props: CombinedProps) => {
             )}
           </div>
           <div
-            className={cn(typeStyles.bodyXSmall, styles.bottomRight, fadeIn)}
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.bottomRight,
+              fadeIn
+            )}
           >
             {!isLoading
               ? renderLockedOrPlaysContent({
diff --git a/packages/web/src/components/typography/Text.tsx b/packages/web/src/components/typography/Text.tsx
index 6bbd3899b3..9336cca460 100644
--- a/packages/web/src/components/typography/Text.tsx
+++ b/packages/web/src/components/typography/Text.tsx
@@ -1,20 +1,12 @@
-import { CSSProperties, ReactNode } from 'react'
+import { CSSProperties, ElementType, ReactNode } from 'react'
 
-import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
+import cn from 'classnames'
 
-import { fontWeightMap, variantInfoMap, variantStrengthMap } from './constants'
-import {
-  TextSizeInfo,
-  TextStrengthInfo,
-  TextVariant,
-  TextSize,
-  TextStrength
-} from './types'
+import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
 
-const defaultBodyInfo: TextSizeInfo & TextStrengthInfo = {
-  ...variantInfoMap.body.M!,
-  ...variantStrengthMap.body.default!
-}
+import { variantTagMap } from './constants'
+import { TextVariant, TextSize, TextStrength } from './types'
+import styles from './typography.module.css'
 
 export type TextProps = {
   className?: string
@@ -29,43 +21,34 @@ export const Text = (props: TextProps) => {
   const {
     className,
     children,
-    variant = 'body',
-    strength = 'default',
-    size = 'M',
+    variant = 'body' as TextVariant,
+    strength = 'Default' as TextStrength,
+    size = 'Medium' as TextSize,
     color = '--neutral',
     ...otherProps
   } = props
 
+  const Tag: ElementType = variantTagMap[variant][size] ?? 'p'
+
   const themeColors = getCurrentThemeColors()
   const textColor = themeColors[color] ?? themeColors['--neutral']
-
-  const variantSizeInfo = variantInfoMap[variant][size] ?? {}
-  const variantStrengthInfo = variantStrengthMap[variant][strength] ?? {}
-
-  const {
-    tag: Tag,
-    fontSize,
-    lineHeight,
-    letterSpacing,
-    fontWeight,
-    textTransform
-  } = {
-    ...defaultBodyInfo,
-    ...variantSizeInfo,
-    ...variantStrengthInfo
-  }
-
   const styleObject: CSSProperties = {
-    fontWeight: fontWeightMap[fontWeight].toString(),
-    fontSize,
-    lineHeight,
-    letterSpacing,
-    textTransform,
     color: textColor
   }
 
+  type TextClass = keyof typeof styles
+  const variantClassNames = [
+    variant as TextClass,
+    `${variant}${size}` as TextClass,
+    `${variant}${strength}` as TextClass
+  ].map((cn) => styles[cn])
+
   return (
-    <Tag className={className} style={styleObject} {...otherProps}>
+    <Tag
+      className={cn(...variantClassNames, className)}
+      style={styleObject}
+      {...otherProps}
+    >
       {children}
     </Tag>
   )
diff --git a/packages/web/src/components/typography/constants.ts b/packages/web/src/components/typography/constants.ts
index de1781811e..7e499d3d10 100644
--- a/packages/web/src/components/typography/constants.ts
+++ b/packages/web/src/components/typography/constants.ts
@@ -1,9 +1,4 @@
-import {
-  FontWeight,
-  TextVariant,
-  TextVariantSizeInfo,
-  TextVariantStrengthInfo
-} from './types'
+import { FontWeight, TextVariant, VariantSizeTagMap } from './types'
 
 export const fontWeightMap: Record<FontWeight, number> = {
   heavy: 900,
@@ -16,155 +11,36 @@ export const fontWeightMap: Record<FontWeight, number> = {
   ultraLight: 100
 }
 
-export const variantInfoMap: Record<TextVariant, TextVariantSizeInfo> = {
+export const variantTagMap: Record<TextVariant, VariantSizeTagMap> = {
   display: {
-    XL: {
-      tag: 'h1',
-      fontSize: '96px',
-      lineHeight: '120px'
-    },
-    L: {
-      tag: 'h1',
-      fontSize: '72px',
-      lineHeight: '88px'
-    },
-    M: {
-      tag: 'h1',
-      fontSize: '56px',
-      lineHeight: '68px'
-    },
-    S: {
-      tag: 'h1',
-      fontSize: '42px',
-      lineHeight: '52px'
-    }
+    XLarge: 'h1',
+    Large: 'h1',
+    Medium: 'h1',
+    Small: 'h1'
   },
   heading: {
-    XL: {
-      tag: 'h1',
-      fontSize: '36px',
-      lineHeight: '40px'
-    },
-    L: {
-      tag: 'h2',
-      fontSize: '28px',
-      lineHeight: '32px'
-    },
-    M: {
-      tag: 'h3',
-      fontSize: '24px',
-      lineHeight: '32px'
-    },
-    S: {
-      tag: 'h4',
-      fontSize: '20px',
-      lineHeight: '24px'
-    }
+    XLarge: 'h1',
+    Large: 'h2',
+    Medium: 'h3',
+    Small: 'h4'
   },
   title: {
-    L: {
-      tag: 'p',
-      fontSize: '18px',
-      lineHeight: '24px'
-    },
-    M: {
-      tag: 'p',
-      fontSize: '16px',
-      lineHeight: '20px'
-    },
-    S: {
-      tag: 'p',
-      fontSize: '14px',
-      lineHeight: '16px'
-    },
-    XS: {
-      tag: 'p',
-      fontSize: '12px',
-      lineHeight: '16px'
-    }
+    Large: 'p',
+    Medium: 'p',
+    Small: 'p',
+    XSmall: 'p'
   },
   label: {
-    XL: {
-      tag: 'label',
-      fontSize: '20px',
-      lineHeight: '24px',
-      letterSpacing: '0.5px',
-      textTransform: 'uppercase'
-    },
-    L: {
-      tag: 'label',
-      fontSize: '16px',
-      lineHeight: '16px',
-      letterSpacing: '0.5px',
-      textTransform: 'uppercase'
-    },
-    M: {
-      tag: 'label',
-      fontSize: '14px',
-      lineHeight: '16px',
-      letterSpacing: '0.5px',
-      textTransform: 'uppercase'
-    },
-    S: {
-      tag: 'label',
-      fontSize: '12px',
-      lineHeight: '12px',
-      letterSpacing: '0.5px',
-      textTransform: 'uppercase'
-    },
-    XS: {
-      tag: 'label',
-      fontSize: '10px',
-      lineHeight: '12px',
-      letterSpacing: '0.5px',
-      textTransform: 'uppercase'
-    }
+    XLarge: 'label',
+    Large: 'label',
+    Medium: 'label',
+    Small: 'label',
+    XSmall: 'label'
   },
   body: {
-    L: {
-      tag: 'p',
-      fontSize: '18px',
-      lineHeight: '24px'
-    },
-    M: {
-      tag: 'p',
-      fontSize: '16px',
-      lineHeight: '20px'
-    },
-    S: {
-      tag: 'p',
-      fontSize: '14px',
-      lineHeight: '20px'
-    },
-    XS: {
-      tag: 'p',
-      fontSize: '12px',
-      lineHeight: '20px'
-    }
+    Large: 'p',
+    Medium: 'p',
+    Small: 'p',
+    XSmall: 'p'
   }
 }
-
-export const variantStrengthMap: Record<TextVariant, TextVariantStrengthInfo> =
-  {
-    display: {
-      default: { fontWeight: 'bold' },
-      strong: { fontWeight: 'heavy' }
-    },
-    heading: {
-      default: { fontWeight: 'bold' },
-      strong: { fontWeight: 'heavy' }
-    },
-    title: {
-      weak: { fontWeight: 'demiBold' },
-      default: { fontWeight: 'bold' },
-      strong: { fontWeight: 'heavy' }
-    },
-    label: {
-      default: { fontWeight: 'bold' },
-      strong: { fontWeight: 'heavy' }
-    },
-    body: {
-      default: { fontWeight: 'medium' },
-      strong: { fontWeight: 'demiBold' }
-    }
-  }
diff --git a/packages/web/src/components/typography/types.ts b/packages/web/src/components/typography/types.ts
index f3c90153a7..9891be3e9f 100644
--- a/packages/web/src/components/typography/types.ts
+++ b/packages/web/src/components/typography/types.ts
@@ -10,23 +10,9 @@ export type FontWeight =
   | 'thin' // 200
   | 'ultraLight' // 100
 
-export type TextStrength = 'weak' | 'default' | 'strong'
-export type TextStrengthInfo = {
-  fontWeight: FontWeight
-}
-type TextTransformValue = 'uppercase' | 'lowercase' | 'capitalize' | 'inherit'
+export type TextStrength = 'Weak' | 'Default' | 'Strong'
 
-export type TextSize = 'XL' | 'L' | 'M' | 'S' | 'XS'
-export type TextSizeInfo = {
-  tag: ElementType
-  fontSize: string | number
-  lineHeight: string | number
-  letterSpacing?: string | number
-  textTransform?: TextTransformValue
-}
+export type TextSize = 'XLarge' | 'Large' | 'Medium' | 'Small' | 'XSmall'
 
 export type TextVariant = 'display' | 'heading' | 'title' | 'label' | 'body'
-export type TextVariantSizeInfo = Partial<Record<TextSize, TextSizeInfo>>
-export type TextVariantStrengthInfo = Partial<
-  Record<TextStrength, TextStrengthInfo>
->
+export type VariantSizeTagMap = Partial<Record<TextSize, ElementType>>
diff --git a/packages/web/src/components/typography/typography.module.css b/packages/web/src/components/typography/typography.module.css
index 1ef0fbf9cf..8617355918 100644
--- a/packages/web/src/components/typography/typography.module.css
+++ b/packages/web/src/components/typography/typography.module.css
@@ -18,32 +18,31 @@
 */
 
 /* Display Styles */
+.display {
+  font-weight: var(--font-bold);
+}
 
 /* 96 / 120 */
 .displayXLarge {
   font-size: var(--unit-24);
-  font-weight: var(--font-bold);
   line-height: calc(var(--unit) * 30);
 }
 
 /* 72 / 88 */
 .displayLarge {
   font-size: var(--unit-18);
-  font-weight: var(--font-bold);
   line-height: var(--unit-22);
 }
 
 /* 56 / 68 */
 .displayMedium {
   font-size: var(--unit-14);
-  font-weight: var(--font-bold);
   line-height: var(--unit-17);
 }
 
 /* 42 / 52 */
 .displaySmall {
   font-size: calc(var(--unit) * 10.5);
-  font-weight: var(--font-bold);
   line-height: var(--unit-13);
 }
 
@@ -52,32 +51,31 @@
 }
 
 /* Heading Styles */
+.heading {
+  font-weight: var(--font-bold);
+}
 
 /* 36 / 40 */
 .headingXLarge {
   font-size: var(--unit-9);
-  font-weight: var(--font-bold);
   line-height: var(--unit-10);
 }
 
 /* 28 / 32 */
 .headingLarge {
   font-size: var(--unit-7);
-  font-weight: var(--font-bold);
   line-height: var(--unit-8);
 }
 
 /* 24 / 32 */
 .headingMedium {
   font-size: var(--unit-6);
-  font-weight: var(--font-bold);
   line-height: var(--unit-8);
 }
 
 /* 20 / 24 */
 .headingSmall {
   font-size: var(--unit-5);
-  font-weight: var(--font-bold);
   line-height: var(--unit-6);
 }
 
@@ -86,32 +84,31 @@
 }
 
 /* Title Styles */
+.title {
+  font-weight: var(--font-bold);
+}
 
 /* 18 / 24 */
 .titleLarge {
   font-size: calc(var(--unit) * 4.5);
-  font-weight: var(--font-bold);
   line-height: var(--unit-6);
 }
 
 /* 16 / 20 */
 .titleMedium {
   font-size: var(--unit-4);
-  font-weight: var(--font-bold);
   line-height: var(--unit-5);
 }
 
 /* 14 / 16 */
 .titleSmall {
   font-size: calc(var(--unit) * 3.5);
-  font-weight: var(--font-bold);
   line-height: var(--unit-4);
 }
 
 /* 12 / 16 */
 .titleXSmall {
   font-size: var(--unit-3);
-  font-weight: var(--font-bold);
   line-height: var(--unit-4);
 }
 
@@ -124,44 +121,39 @@
 }
 
 /* Label Styles */
+.label {
+  font-weight: var(--font-bold);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
 
 /* 20 / 24 */
 .labelXLarge {
   font-size: var(--unit-5);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
   line-height: var(--unit-6);
 }
 
 /* 16 / 16 */
 .labelLarge {
   font-size: var(--unit-4);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
   line-height: var(--unit-4);
 }
 
 /* 14 / 16 */
 .labelMedium {
   font-size: calc(var(--unit) * 3.5);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
   line-height: var(--unit-4);
 }
 
 /* 12 /12 */
 .labelSmall {
   font-size: var(--unit-3);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
   line-height: var(--unit-3);
 }
 
 /* 10 / 12 */
 .labelXSmall {
   font-size: calc(var(--unit) * 2.5);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
   line-height: var(--unit-3);
 }
 
@@ -174,32 +166,31 @@
 }
 
 /* Body Styles */
+.body {
+  font-weight: var(--font-medium);
+}
 
 /* 18 / 24 */
 .bodyLarge {
   font-size: calc(var(--unit) * 4.5);
-  font-weight: var(--font-medium);
   line-height: var(--unit-6);
 }
 
 /* 16 / 20 */
 .bodyMedium {
   font-size: var(--unit-4);
-  font-weight: var(--font-medium);
   line-height: var(--unit-5);
 }
 
 /* 14 / 20 */
 .bodySmall {
   font-size: calc(var(--unit) * 3.5);
-  font-weight: var(--font-medium);
   line-height: var(--unit-5);
 }
 
 /* 12 / 20 */
 .bodyXSmall {
   font-size: var(--unit-3);
-  font-weight: var(--font-medium);
   line-height: var(--unit-5);
 }
 
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
index 82e1c2dca7..43e694646c 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -479,6 +479,7 @@ const TrackHeader = ({
         <Linkify options={{ attributes: { onClick: onExternalLinkClick } }}>
           <h3
             className={cn(
+              typeStyles.body,
               typeStyles.bodyMedium,
               styles.description,
               styles.withSectionDivider
diff --git a/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx b/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
index 5739147baf..1577728c20 100644
--- a/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
@@ -158,8 +158,12 @@ export const AttributionModalForm = () => {
 
   const preview = (
     <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
-      <label className={typeStyles.titleLarge}>{messages.title}</label>
-      <div className={typeStyles.bodyMedium}>{messages.description}</div>
+      <label className={cn(typeStyles.title, typeStyles.titleLarge)}>
+        {messages.title}
+      </label>
+      <div className={cn(typeStyles.body, typeStyles.bodyMedium)}>
+        {messages.description}
+      </div>
     </div>
   )
 
@@ -224,7 +228,7 @@ const AttributionModalFields = () => {
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
         <div
-          className={typeStyles.titleLarge}
+          className={cn(typeStyles.title, typeStyles.titleLarge)}
         >{`${messages.isrc.header} / ${messages.iswc.header}`}</div>
         <span className={cn(layoutStyles.row, layoutStyles.gap6)}>
           <InputV2
@@ -243,7 +247,9 @@ const AttributionModalFields = () => {
       </div>
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap6)}>
-        <div className={typeStyles.titleLarge}>{messages.licenseType}</div>
+        <div className={cn(typeStyles.title, typeStyles.titleLarge)}>
+          {messages.licenseType}
+        </div>
         <div className={styles.attributionCommercialRow}>
           <div
             className={cn(
@@ -252,7 +258,7 @@ const AttributionModalFields = () => {
               layoutStyles.gap2
             )}
           >
-            <div className={typeStyles.titleMedium}>
+            <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
               {messages.allowAttribution.header}
             </div>
             <SegmentedControl
@@ -274,7 +280,7 @@ const AttributionModalFields = () => {
               }
             )}
           >
-            <div className={typeStyles.titleMedium}>
+            <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
               {messages.commercialUse.header}
             </div>
             <SegmentedControl
@@ -290,7 +296,7 @@ const AttributionModalFields = () => {
         </div>
         <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
           <div
-            className={cn(typeStyles.titleMedium, {
+            className={cn(typeStyles.title, typeStyles.titleMedium, {
               [styles.disabled]: !allowAttribution
             })}
           >
@@ -316,7 +322,9 @@ const AttributionModalFields = () => {
               ))}
             </div>
           ) : null}
-          <div className={typeStyles.titleMedium}>{licenseType}</div>
+          <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
+            {licenseType}
+          </div>
         </div>
         {licenseDescription ? (
           <div className={typeStyles.bodySmall}>{licenseDescription}</div>