diff --git a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
index dce8ef4f6048987a1dcd862617241c7dbb62586f..7654c65502888e56939f2b063d720f63122a1469 100644
--- a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
+++ b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
@@ -23,20 +23,49 @@ import {
   ScalarTitleContent,
   ScalarValueWrapper,
 } from "./ScalarValue.styled";
+import { findSize, getMaxFontSize } from "./utils";
 
 export const ScalarWrapper = ({ children }) => (
   <ScalarRoot>{children}</ScalarRoot>
 );
 
-const ScalarValue = ({ value }) => {
+const ScalarValue = ({
+  value,
+  height,
+  width,
+  gridSize,
+  totalNumGridCols,
+  fontFamily,
+}) => {
   const {
     other: { number: numberTheme },
   } = useMantineTheme();
 
-  const fontSize = useMemo(
-    () => numberTheme?.value?.fontSize,
-    [numberTheme?.value?.fontSize],
-  );
+  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