diff --git a/package-lock.json b/package-lock.json
index 8e546b995..436007562 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "root",
-    "version": "6.0.4-alpha10",
+    "version": "6.0.4-alpha11",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "root",
-            "version": "6.0.4-alpha10",
+            "version": "6.0.4-alpha11",
             "license": "MIT",
             "workspaces": [
                 "./packages/core",
@@ -16455,10 +16455,10 @@
         },
         "packages/cells": {
             "name": "@glideapps/glide-data-grid-cells",
-            "version": "6.0.4-alpha10",
+            "version": "6.0.4-alpha11",
             "license": "MIT",
             "dependencies": {
-                "@glideapps/glide-data-grid": "6.0.4-alpha10",
+                "@glideapps/glide-data-grid": "6.0.4-alpha11",
                 "@linaria/react": "^4.5.4",
                 "@toast-ui/editor": "3.2.2",
                 "@toast-ui/react-editor": "3.2.3",
@@ -16545,7 +16545,7 @@
         },
         "packages/core": {
             "name": "@glideapps/glide-data-grid",
-            "version": "6.0.4-alpha10",
+            "version": "6.0.4-alpha11",
             "license": "MIT",
             "dependencies": {
                 "@linaria/react": "^4.5.4",
@@ -16628,10 +16628,10 @@
         },
         "packages/source": {
             "name": "@glideapps/glide-data-grid-source",
-            "version": "6.0.4-alpha10",
+            "version": "6.0.4-alpha11",
             "license": "MIT",
             "dependencies": {
-                "@glideapps/glide-data-grid": "6.0.4-alpha10"
+                "@glideapps/glide-data-grid": "6.0.4-alpha11"
             },
             "devDependencies": {
                 "@babel/cli": "^7.27.2",
@@ -18368,7 +18368,7 @@
             "version": "file:packages/cells",
             "requires": {
                 "@babel/cli": "^7.27.2",
-                "@glideapps/glide-data-grid": "6.0.4-alpha10",
+                "@glideapps/glide-data-grid": "6.0.4-alpha11",
                 "@linaria/react": "^4.5.4",
                 "@toast-ui/editor": "3.2.2",
                 "@toast-ui/react-editor": "3.2.3",
@@ -18433,7 +18433,7 @@
             "version": "file:packages/source",
             "requires": {
                 "@babel/cli": "^7.27.2",
-                "@glideapps/glide-data-grid": "6.0.4-alpha10",
+                "@glideapps/glide-data-grid": "6.0.4-alpha11",
                 "eslint": "^8.57.1",
                 "eslint-plugin-import": "^2.31.0",
                 "eslint-plugin-react": "^7.37.5",
diff --git a/packages/cells/src/cells/range-cell.tsx b/packages/cells/src/cells/range-cell.tsx
index 381877b13..a4900a82f 100644
--- a/packages/cells/src/cells/range-cell.tsx
+++ b/packages/cells/src/cells/range-cell.tsx
@@ -4,10 +4,25 @@ import {
     type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
+    getEmHeight,
 } from "@glideapps/glide-data-grid";
 import * as React from "react";
 import { roundedRect } from "../draw-fns.js";
 
+function adaptFontSize(font: string, percentage: number): string {
+    const regex = /(\d+\.?\d*)\s*(px|rem|em|%|pt)/;
+    const match = font.match(regex);
+
+    if (match) {
+        const value = parseFloat(match[1]);
+        const unit = match[2];
+        const scaledValue = value * percentage;
+        return font.replace(regex, `${Number(scaledValue.toPrecision(3))}${unit}`);
+    }
+
+    return font;
+}
+
 interface RangeCellProps {
     readonly kind: "range-cell";
     readonly value: number;
@@ -20,8 +35,6 @@ interface RangeCellProps {
 
 export type RangeCell = CustomCell<RangeCellProps>;
 
-const RANGE_HEIGHT = 6;
-
 const inputStyle: React.CSSProperties = {
     marginRight: 8,
 };
@@ -44,19 +57,22 @@ const renderer: CustomRenderer<RangeCell> = {
 
         const rangeSize = max - min;
         const fillRatio = (value - min) / rangeSize;
+        // Only use 90% of the base font size for the label
+        const labelFont = `${adaptFontSize(theme.baseFontStyle, 0.9)} ${theme.fontFamily}`;
+
+        const emHeight = getEmHeight(ctx, labelFont);
+        const rangeHeight = emHeight / 2;
 
         ctx.save();
         let labelWidth = 0;
         if (label !== undefined) {
-            ctx.font = `12px ${theme.fontFamily}`; // fixme this is slow
-            labelWidth =
-                measureTextCached(measureLabel ?? label, ctx, `12px ${theme.fontFamily}`).width +
-                theme.cellHorizontalPadding;
+            ctx.font = labelFont; // fixme this is slow
+            labelWidth = measureTextCached(measureLabel ?? label, ctx, labelFont).width + theme.cellHorizontalPadding;
         }
 
         const rangeWidth = rect.width - theme.cellHorizontalPadding * 2 - labelWidth;
 
-        if (rangeWidth >= RANGE_HEIGHT) {
+        if (rangeWidth >= rangeHeight) {
             const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid);
 
             gradient.addColorStop(0, theme.accentColor);
@@ -66,17 +82,17 @@ const renderer: CustomRenderer<RangeCell> = {
 
             ctx.beginPath();
             ctx.fillStyle = gradient;
-            roundedRect(ctx, x, yMid - RANGE_HEIGHT / 2, rangeWidth, RANGE_HEIGHT, RANGE_HEIGHT / 2);
+            roundedRect(ctx, x, yMid - rangeHeight / 2, rangeWidth, rangeHeight, rangeHeight / 2);
             ctx.fill();
 
             ctx.beginPath();
             roundedRect(
                 ctx,
                 x + 0.5,
-                yMid - RANGE_HEIGHT / 2 + 0.5,
+                yMid - rangeHeight / 2 + 0.5,
                 rangeWidth - 1,
-                RANGE_HEIGHT - 1,
-                (RANGE_HEIGHT - 1) / 2
+                rangeHeight - 1,
+                (rangeHeight - 1) / 2
             );
             ctx.strokeStyle = theme.accentLight;
             ctx.lineWidth = 1;
@@ -89,7 +105,7 @@ const renderer: CustomRenderer<RangeCell> = {
             ctx.fillText(
                 label,
                 rect.x + rect.width - theme.cellHorizontalPadding,
-                yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`)
+                yMid + getMiddleCenterBias(ctx, labelFont)
             );
         }
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 0c7a8df84..8a546e46b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -33,6 +33,7 @@ export { parseToRgba, withAlpha, blend, interpolateColors, getLuminance } from "
 export {
     measureTextCached,
     getMiddleCenterBias,
+    getEmHeight,
     roundedPoly,
     roundedRect,
     drawTextCellExternal as drawTextCell,