diff --git a/.changeset/early-elephants-watch.md b/.changeset/early-elephants-watch.md
new file mode 100644
index 00000000..d16602ea
--- /dev/null
+++ b/.changeset/early-elephants-watch.md
@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": minor
+---
+
+Removed `typeSize` from `Box` and `sprinkles`. You should use `fontSize`, `letterSpacing` & `lineHeight` directly instead.
diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts
index 80e5c093..0ab7121c 100644
--- a/src/components/BaseInput/BaseInput.css.ts
+++ b/src/components/BaseInput/BaseInput.css.ts
@@ -144,13 +144,19 @@ export const spanRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        letterSpacing: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        letterSpacing: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        typeSize: 3,
+        fontSize: 3,
+        letterSpacing: 3,
+        lineHeight: 3,
       }),
     },
     disabled: {
diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts
index 7ff9c8e3..ec3ae20a 100644
--- a/src/components/Button/Button.css.ts
+++ b/src/components/Button/Button.css.ts
@@ -117,7 +117,9 @@ export const button = recipe({
         width: 6,
         borderRadius: 2,
         padding: 0.5,
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
         gap: 1,
       }),
     },
@@ -131,7 +133,9 @@ export const button = recipe({
         width: 8,
         borderRadius: 3,
         padding: 1,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 1,
       }),
     },
@@ -145,7 +149,9 @@ export const button = recipe({
         width: 10,
         borderRadius: 3,
         padding: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 3,
+        letterSpacing: 3,
         gap: 2,
       }),
     },
@@ -159,7 +165,9 @@ export const button = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 0,
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
         gap: 1,
       }),
     },
@@ -173,7 +181,9 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 1,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 1,
       }),
     },
@@ -187,7 +197,9 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 4,
         paddingY: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 2,
       }),
     },
diff --git a/src/components/DropdownButton/DropdownButton.css.ts b/src/components/DropdownButton/DropdownButton.css.ts
index ee66f296..fc805e72 100644
--- a/src/components/DropdownButton/DropdownButton.css.ts
+++ b/src/components/DropdownButton/DropdownButton.css.ts
@@ -53,9 +53,10 @@ export const dropdownButton = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 1,
-        typeSize: 1,
-        fontWeight: "medium",
+        fontSize: 1,
         lineHeight: 2,
+        letterSpacing: 1,
+        fontWeight: "medium",
         gap: 3,
       }),
       medium: sprinkles({
@@ -63,7 +64,9 @@ export const dropdownButton = recipe({
         borderRadius: 3,
         paddingX: 2,
         paddingY: 1.5,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         fontWeight: "medium",
         gap: 1,
       }),
@@ -72,7 +75,9 @@ export const dropdownButton = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 3,
+        letterSpacing: 3,
         fontWeight: "medium",
         gap: 2,
       }),
diff --git a/src/components/Multiselect/Common/Multiselect.css.ts b/src/components/Multiselect/Common/Multiselect.css.ts
index a8052eaa..ee85de0e 100644
--- a/src/components/Multiselect/Common/Multiselect.css.ts
+++ b/src/components/Multiselect/Common/Multiselect.css.ts
@@ -56,13 +56,19 @@ export const multiselectInputRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
       }),
       large: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
       }),
     },
     error: {
diff --git a/src/components/RadioGroup/Group.css.ts b/src/components/RadioGroup/Group.css.ts
index 9e8ca78e..03d90b27 100644
--- a/src/components/RadioGroup/Group.css.ts
+++ b/src/components/RadioGroup/Group.css.ts
@@ -17,13 +17,19 @@ export const groupLabelRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        letterSpacing: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        letterSpacing: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        typeSize: 3,
+        fontSize: 3,
+        letterSpacing: 3,
+        lineHeight: 3,
       }),
     },
     disabled: {
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 8097048e..22cea878 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -35,7 +35,9 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
       ref={ref}
       margin={0}
       data-macaw-ui-component="Text"
-      typeSize={size}
+      fontSize={size}
+      letterSpacing={size}
+      lineHeight={size}
       fontWeight={fontWeight}
       {...rest}
     >
diff --git a/src/components/Tooltip/Tooltip.css.ts b/src/components/Tooltip/Tooltip.css.ts
index 4e9b1266..c5d87d1f 100644
--- a/src/components/Tooltip/Tooltip.css.ts
+++ b/src/components/Tooltip/Tooltip.css.ts
@@ -8,7 +8,9 @@ export const content = sprinkles({
   backgroundColor: "default1",
   padding: 2,
   borderRadius: 3,
-  typeSize: 1,
+  fontSize: 1,
+  lineHeight: 1,
+  letterSpacing: 1,
   color: "default1",
   boxShadow: "defaultOverlay",
 });
diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts
index ea711231..4dfb10fc 100644
--- a/src/theme/sprinkles.css.ts
+++ b/src/theme/sprinkles.css.ts
@@ -180,7 +180,6 @@ const responsiveProperties = defineProperties({
     marginX: ["marginLeft", "marginRight"],
     marginY: ["marginTop", "marginBottom"],
     placeItems: ["alignItems", "justifyContent"],
-    typeSize: ["fontSize", "lineHeight", "letterSpacing"],
     borderWidth: [
       "borderTopWidth",
       "borderBottomWidth",