diff --git a/frontend/src/metabase/css/dashboard.module.css b/frontend/src/metabase/css/dashboard.module.css
index 7393201f95142cd6c21c425533527303ee2ffffa..bef57aa4cc433a143a9a1572a1b5a4a42473fc91 100644
--- a/frontend/src/metabase/css/dashboard.module.css
+++ b/frontend/src/metabase/css/dashboard.module.css
@@ -218,3 +218,12 @@
   pointer-events: all;
   user-select: auto;
 }
+
+.ScalarValueContainer {
+  container-type: size;
+  container-name: scalar-value;
+}
+
+.ScalarValueElement {
+  font-size: calc(0.5rem + 10cqmin);
+}
diff --git a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
index 7654c65502888e56939f2b063d720f63122a1469..c3ed18d41512f63290862ef0e5a3a33faac13b48 100644
--- a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
+++ b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
@@ -3,7 +3,6 @@
  */
 /* eslint-disable react/prop-types */
 import cx from "classnames";
-import { useMemo } from "react";
 import { t } from "ttag";
 
 import { Ellipsified } from "metabase/core/components/Ellipsified";
@@ -23,54 +22,25 @@ import {
   ScalarTitleContent,
   ScalarValueWrapper,
 } from "./ScalarValue.styled";
-import { findSize, getMaxFontSize } from "./utils";
 
 export const ScalarWrapper = ({ children }) => (
-  <ScalarRoot>{children}</ScalarRoot>
+  <ScalarRoot className={DashboardS.ScalarValueContainer}>
+    {children}
+  </ScalarRoot>
 );
 
-const ScalarValue = ({
-  value,
-  height,
-  width,
-  gridSize,
-  totalNumGridCols,
-  fontFamily,
-}) => {
+const ScalarValue = ({ value }) => {
   const {
     other: { number: numberTheme },
   } = useMantineTheme();
 
-  const fontSize = useMemo(() => {
-    if (numberTheme?.value?.fontSize) {
-      return numberTheme.value?.fontSize;
-    }
-
-    return findSize({
-      text: value,
-      targetHeight: height,
-      targetWidth: width,
-      fontFamily: fontFamily ?? "Lato",
-      fontWeight: 700,
-      unit: "rem",
-      step: 0.2,
-      min: 1,
-      max: gridSize ? getMaxFontSize(gridSize.width, totalNumGridCols) : 4,
-    });
-  }, [
-    fontFamily,
-    gridSize,
-    height,
-    totalNumGridCols,
-    value,
-    width,
-    numberTheme?.value?.fontSize,
-  ]);
-
   return (
     <ScalarValueWrapper
-      className={cx(DashboardS.ScalarValue, QueryBuilderS.ScalarValue)}
-      fontSize={fontSize}
+      className={cx(
+        DashboardS.ScalarValue,
+        DashboardS.ScalarValueElement,
+        QueryBuilderS.ScalarValue,
+      )}
       lineHeight={numberTheme?.value?.lineHeight}
       data-testid="scalar-value"
     >