diff --git a/packages/css-theme/src/components/_pattern.scss b/packages/css-theme/src/components/_pattern.scss
index 26356aa4b2c..a4aba72b5c3 100644
--- a/packages/css-theme/src/components/_pattern.scss
+++ b/packages/css-theme/src/components/_pattern.scss
@@ -102,33 +102,33 @@ svg.freesewing.pattern {
 
   /* Text */
   text {
-    font-size: calc(6 * var(--freesewing-pattern-scale));
+    font-size: calc(6px * var(--freesewing-pattern-scale));
     @include title-font;
     text-anchor: start;
     font-weight: 400;
     dominant-baseline: ideographic;
   }
   .text-xs {
-    font-size: calc(4 * var(--freesewing-pattern-scale));
+    font-size: calc(4px * var(--freesewing-pattern-scale));
   }
   .text-sm {
-    font-size: calc(5 * var(--freesewing-pattern-scale));
+    font-size: calc(5px * var(--freesewing-pattern-scale));
   }
   .text-l {
-    font-size: calc(8 * var(--freesewing-pattern-scale));
+    font-size: calc(8px * var(--freesewing-pattern-scale));
   }
   .text-xl {
-    font-size: calc(10 * var(--freesewing-pattern-scale));
+    font-size: calc(10px * var(--freesewing-pattern-scale));
   }
   .text-xxl,
   .text-2xl {
-    font-size: calc(12 * var(--freesewing-pattern-scale));
+    font-size: calc(12px * var(--freesewing-pattern-scale));
   }
   .text-3xl {
-    font-size: calc(16 * var(--freesewing-pattern-scale));
+    font-size: calc(16px * var(--freesewing-pattern-scale));
   }
   .text-4xl {
-    font-size: calc(22 * var(--freesewing-pattern-scale));
+    font-size: calc(22px * var(--freesewing-pattern-scale));
   }
 
   .center {