diff --git a/packages/fonts/src/fonts.ts b/packages/fonts/src/fonts.ts
index 179276b..ecae629 100644
--- a/packages/fonts/src/fonts.ts
+++ b/packages/fonts/src/fonts.ts
@@ -1,175 +1,65 @@
-export const fontBase = `
-  font-family: 'SUIT', sans-serif;
-  font-style: normal;
-`;
+interface Font {
+  fontFamily?: string;
+  fontStyle?: string;
+  fontWeight: number | string;
+  fontSize: number | string;
+  lineHeight: number | string;
+  letterSpacing: number | string;
+}
 
-export const fonts = {
-  HEADING_48_B: `
-    font-weight: 700;
-    font-size: 48px;
-    line-height: 72px;
-    letter-spacing: -2%;
-  `,
-  HEADING_32_B: `
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 48px;
-    letter-spacing: -2%;
-  `,
-  HEADING_28_B: `
-    font-weight: 700;
-    font-size: 28px;
-    line-height: 42px;
-    letter-spacing: -2%;
-  `,
-  HEADING_24_B: `
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 36px;
-    letter-spacing: -2%;
-  `,
-  HEADING_20_B: `
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 30px;
-    letter-spacing: -2%;
-  `,
-  HEADING_18_B: `
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -2%;
-  `,
-  HEADING_16_B: `
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: -2%;
-  `,
-  TITLE_32_SB: `
-    font-weight: 600;
-    font-size: 32px;
-    line-height: 48px;
-    letter-spacing: -2%;
-  `,
-  TITLE_28_SB: `
-    font-weight: 600;
-    font-size: 28px;
-    line-height: 42px;
-    letter-spacing: -2%;
-  `,
-  TITLE_24_SB: `
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 36px;
-    letter-spacing: -2%;
-  `,
-  TITLE_20_SB: `
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 30px;
-    letter-spacing: -2%;
-  `,
-  TITLE_18_SB: `
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -2%;
-  `,
-  TITLE_16_SB: `
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: -1.5%;
-  `,
-  TITLE_14_SB: `
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_18_M: `
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 30px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_16_M: `
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_16_R: `
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_14_M: `
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 22px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_14_R: `
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_14_L: `
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 22px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_13_M: `
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_13_R: `
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: -1.5%;
-  `,
-  BODY_13_L: `
-    font-weight: 300;
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: -1.5%;
-  `,
-  LABEL_18_SB: `
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 24px;
-    letter-spacing: -2%;
-  `,
-  LABEL_16_SB: `
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 22px;
-    letter-spacing: -2%;
-  `,
-  LABEL_14_SB: `
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 18px;
-    letter-spacing: -2%;
-  `,
-  LABEL_12_SB: `
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: -2%;
-  `,
-  LABEL_11_SB: `
-    font-weight: 600;
-    font-size: 11px;
-    line-height: 14px;
-    letter-spacing: -2%;
-  `,
-}
\ No newline at end of file
+function fontStr({ fontWeight, fontSize, lineHeight, letterSpacing }: Font) {
+  return `
+    font-family: 'SUIT', sans-serif;
+    font-style: normal;
+    font-weight : ${fontWeight};
+    font-size : ${fontSize};
+    line-height : ${lineHeight};
+    letter-spacing: ${letterSpacing};
+    `;
+}
+
+function fontObj({ fontWeight, fontSize, lineHeight, letterSpacing }: Font) {
+  return {
+    fontFamily: "'SUIT', sans-serif",
+    fontStyle: 'normal',
+    fontWeight: `${fontWeight}`,
+    fontSize: `${fontSize}px`,
+    lineHeight: `${lineHeight}px`,
+    letterSpacing: `${letterSpacing}%`,
+  };
+}
+
+export const fontsObject = {
+  HEADING_48_B: fontObj({ fontWeight: 700, fontSize: 48, lineHeight: 72, letterSpacing: -2 }),
+  HEADING_32_B: fontObj({ fontWeight: 700, fontSize: 32, lineHeight: 48, letterSpacing: -2 }),
+  HEADING_28_B: fontObj({ fontWeight: 700, fontSize: 28, lineHeight: 42, letterSpacing: -2 }),
+  HEADING_24_B: fontObj({ fontWeight: 700, fontSize: 24, lineHeight: 36, letterSpacing: -2 }),
+  HEADING_20_B: fontObj({ fontWeight: 700, fontSize: 20, lineHeight: 30, letterSpacing: -2 }),
+  HEADING_18_B: fontObj({ fontWeight: 700, fontSize: 18, lineHeight: 28, letterSpacing: -2 }),
+  HEADING_16_B: fontObj({ fontWeight: 700, fontSize: 16, lineHeight: 24, letterSpacing: -2 }),
+  TITLE_32_SB: fontObj({ fontWeight: 600, fontSize: 32, lineHeight: 48, letterSpacing: -2 }),
+  TITLE_28_SB: fontObj({ fontWeight: 600, fontSize: 28, lineHeight: 42, letterSpacing: -2 }),
+  TITLE_24_SB: fontObj({ fontWeight: 600, fontSize: 24, lineHeight: 36, letterSpacing: -2 }),
+  TITLE_20_SB: fontObj({ fontWeight: 600, fontSize: 20, lineHeight: 30, letterSpacing: -2 }),
+  TITLE_18_SB: fontObj({ fontWeight: 600, fontSize: 18, lineHeight: 28, letterSpacing: -2 }),
+  TITLE_16_SB: fontObj({ fontWeight: 600, fontSize: 16, lineHeight: 24, letterSpacing: -1.5 }),
+  TITLE_14_SB: fontObj({ fontWeight: 600, fontSize: 14, lineHeight: 20, letterSpacing: -1.5 }),
+  BODY_18_M: fontObj({ fontWeight: 500, fontSize: 18, lineHeight: 30, letterSpacing: -1.5 }),
+  BODY_16_M: fontObj({ fontWeight: 500, fontSize: 16, lineHeight: 26, letterSpacing: -1.5 }),
+  BODY_16_R: fontObj({ fontWeight: 400, fontSize: 16, lineHeight: 26, letterSpacing: -1.5 }),
+  BODY_14_M: fontObj({ fontWeight: 500, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
+  BODY_14_R: fontObj({ fontWeight: 400, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
+  BODY_14_L: fontObj({ fontWeight: 300, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
+  BODY_13_M: fontObj({ fontWeight: 500, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
+  BODY_13_R: fontObj({ fontWeight: 400, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
+  BODY_13_L: fontObj({ fontWeight: 300, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
+  LABEL_18_SB: fontObj({ fontWeight: 600, fontSize: 19, lineHeight: 24, letterSpacing: -2 }),
+  LABEL_16_SB: fontObj({ fontWeight: 600, fontSize: 16, lineHeight: 22, letterSpacing: -2 }),
+  LABEL_14_SB: fontObj({ fontWeight: 600, fontSize: 14, lineHeight: 18, letterSpacing: -2 }),
+  LABEL_12_SB: fontObj({ fontWeight: 600, fontSize: 12, lineHeight: 16, letterSpacing: -2 }),
+  LABEL_11_SB: fontObj({ fontWeight: 600, fontSize: 11, lineHeight: 14, letterSpacing: -2 }),
+} satisfies Record<string, Font>;
+
+export const fontsString = Object.fromEntries(
+  Object.entries(fontsObject).map(([key, value]) => [key, fontStr(value)])
+) as Record<keyof typeof fontsObject, string>;
diff --git a/packages/ui/theme.css.ts b/packages/ui/theme.css.ts
index 47fc0fa..7148da7 100644
--- a/packages/ui/theme.css.ts
+++ b/packages/ui/theme.css.ts
@@ -1,10 +1,10 @@
 import { createGlobalTheme } from '@vanilla-extract/css';
 import { colors } from '../colors/src';
-import { fonts } from '../fonts/src';
+import { fontsObject } from '../fonts/src/fonts';
 
-export const theme = createGlobalTheme("body", {
+export const theme = createGlobalTheme('body', {
   colors,
-  fonts
+  fontsObject,
 });
 
-export default theme;
\ No newline at end of file
+export default theme;