diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 9d2d38d3970..7f0e7dc8d46 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -12,6 +12,7 @@ import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from
 
 const LINE_HEIGHT = 1.2;
 const MAX_TITLE_SIZE = 30;
+const VALUE_FONT_WEIGHT = 500;
 
 export abstract class BigValueLayout {
   titleFontSize: number;
@@ -76,7 +77,7 @@ export abstract class BigValueLayout {
   getValueStyles(): CSSProperties {
     const styles: CSSProperties = {
       fontSize: this.valueFontSize,
-      fontWeight: 500,
+      fontWeight: VALUE_FONT_WEIGHT,
       lineHeight: LINE_HEIGHT,
       position: 'relative',
       zIndex: 1,
@@ -220,7 +221,9 @@ export class WideNoChartLayout extends BigValueLayout {
         this.valueToAlignTo,
         this.maxTextWidth * valueWidthPercent,
         this.maxTextHeight,
-        LINE_HEIGHT
+        LINE_HEIGHT,
+        undefined,
+        VALUE_FONT_WEIGHT
       );
     }
 
@@ -292,7 +295,9 @@ export class WideWithChartLayout extends BigValueLayout {
         this.valueToAlignTo,
         this.maxTextWidth * valueWidthPercent,
         this.maxTextHeight * chartHeightPercent,
-        LINE_HEIGHT
+        LINE_HEIGHT,
+        undefined,
+        VALUE_FONT_WEIGHT
       );
     }
   }
@@ -346,7 +351,9 @@ export class StackedWithChartLayout extends BigValueLayout {
         this.valueToAlignTo,
         this.maxTextWidth,
         this.maxTextHeight - this.chartHeight - titleHeight,
-        LINE_HEIGHT
+        LINE_HEIGHT,
+        undefined,
+        VALUE_FONT_WEIGHT
       );
     }
 
@@ -398,7 +405,9 @@ export class StackedWithNoChartLayout extends BigValueLayout {
         this.valueToAlignTo,
         this.maxTextWidth,
         this.maxTextHeight - titleHeight,
-        LINE_HEIGHT
+        LINE_HEIGHT,
+        undefined,
+        VALUE_FONT_WEIGHT
       );
     }
 
diff --git a/packages/grafana-ui/src/utils/measureText.ts b/packages/grafana-ui/src/utils/measureText.ts
index 7c3bf5397c1..edfc8b2555c 100644
--- a/packages/grafana-ui/src/utils/measureText.ts
+++ b/packages/grafana-ui/src/utils/measureText.ts
@@ -16,8 +16,8 @@ export function getCanvasContext() {
 /**
  * @beta
  */
-export function measureText(text: string, fontSize: number): TextMetrics {
-  const fontStyle = `${fontSize}px 'Inter'`;
+export function measureText(text: string, fontSize: number, fontWeight = 400): TextMetrics {
+  const fontStyle = `${fontWeight} ${fontSize}px 'Inter'`;
   const cacheKey = text + fontStyle;
   const fromCache = cache.get(cacheKey);
 
@@ -45,9 +45,16 @@ export function measureText(text: string, fontSize: number): TextMetrics {
 /**
  * @beta
  */
-export function calculateFontSize(text: string, width: number, height: number, lineHeight: number, maxSize?: number) {
+export function calculateFontSize(
+  text: string,
+  width: number,
+  height: number,
+  lineHeight: number,
+  maxSize?: number,
+  fontWeight?: number
+) {
   // calculate width in 14px
-  const textSize = measureText(text, 14);
+  const textSize = measureText(text, 14, fontWeight);
   // how much bigger than 14px can we make it while staying within our width constraints
   const fontSizeBasedOnWidth = (width / (textSize.width + 2)) * 14;
   const fontSizeBasedOnHeight = height / lineHeight;