diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..1a001d0
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,2 @@
+export const FONT_SIZE_WIDTH_RATIO = 0.6
+export const FONT_SIZE_HEIGHT_RATIO = 1
diff --git a/lib/drawGraphicsToCanvas.ts b/lib/drawGraphicsToCanvas.ts
index 628837b..82896a4 100644
--- a/lib/drawGraphicsToCanvas.ts
+++ b/lib/drawGraphicsToCanvas.ts
@@ -12,6 +12,7 @@ import type {
   TransformOptions,
 } from "./types"
 import { defaultColors } from "site/components/InteractiveGraphics/defaultColors"
+import { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 /**
  * Computes a transformation matrix based on a provided viewbox
@@ -79,7 +80,30 @@ export function getBounds(graphics: GraphicsObject): Viewbox {
       { x: circle.center.x, y: circle.center.y - circle.radius }, // top
       { x: circle.center.x, y: circle.center.y + circle.radius }, // bottom
     ]),
-    ...(graphics.texts || []).map((text) => ({ x: text.x, y: text.y })),
+    ...(graphics.texts || []).flatMap((text) => {
+      const fontSize = text.fontSize ?? 12
+      const width = text.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
+      const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      const anchor = text.anchorSide ?? "center"
+      const offsetMap: Record<string, { dx: number; dy: number }> = {
+        top_left: { dx: 0, dy: 0 },
+        top_center: { dx: -width / 2, dy: 0 },
+        top_right: { dx: -width, dy: 0 },
+        center_left: { dx: 0, dy: -height / 2 },
+        center: { dx: -width / 2, dy: -height / 2 },
+        center_right: { dx: -width, dy: -height / 2 },
+        bottom_left: { dx: 0, dy: -height },
+        bottom_center: { dx: -width / 2, dy: -height },
+        bottom_right: { dx: -width, dy: -height },
+      }
+      const { dx, dy } = offsetMap[anchor]
+      const x0 = text.x + dx
+      const y0 = text.y + dy
+      return [
+        { x: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -296,7 +320,7 @@ export function drawGraphicsToCanvas(
     graphics.texts.forEach((text) => {
       const projected = applyToPoint(matrix, { x: text.x, y: text.y })
       ctx.fillStyle = text.color || "black"
-      ctx.font = `${text.fontSize ?? 12}px sans-serif`
+      ctx.font = `${(text.fontSize ?? 12) * Math.abs(matrix.a)}px sans-serif`
 
       const anchor = text.anchorSide ?? "center"
       const alignMap: Record<string, CanvasTextAlign> = {
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index d0b94eb..826738f 100644
--- a/lib/getSvgFromGraphicsObject.ts
+++ b/lib/getSvgFromGraphicsObject.ts
@@ -10,6 +10,7 @@ import {
 import type { GraphicsObject, Point } from "./types"
 import { stringify } from "svgson"
 import pretty from "pretty"
+import { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 const DEFAULT_SVG_SIZE = 640
 const PADDING = 40
@@ -41,7 +42,30 @@ function getBounds(graphics: GraphicsObject): Bounds {
       { x: circle.center.x, y: circle.center.y - circle.radius }, // top
       { x: circle.center.x, y: circle.center.y + circle.radius }, // bottom
     ]),
-    ...(graphics.texts || []).map((t) => ({ x: t.x, y: t.y })),
+    ...(graphics.texts || []).flatMap((t) => {
+      const fontSize = t.fontSize ?? 12
+      const width = t.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
+      const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      const anchor = t.anchorSide ?? "center"
+      const offsetMap: Record<string, { dx: number; dy: number }> = {
+        top_left: { dx: 0, dy: 0 },
+        top_center: { dx: -width / 2, dy: 0 },
+        top_right: { dx: -width, dy: 0 },
+        center_left: { dx: 0, dy: -height / 2 },
+        center: { dx: -width / 2, dy: -height / 2 },
+        center_right: { dx: -width, dy: -height / 2 },
+        bottom_left: { dx: 0, dy: -height },
+        bottom_center: { dx: -width / 2, dy: -height },
+        bottom_right: { dx: -width, dy: -height },
+      }
+      const { dx, dy } = offsetMap[anchor]
+      const x0 = t.x + dx
+      const y0 = t.y + dy
+      return [
+        { x: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -337,7 +361,7 @@ export function getSvgFromGraphicsObject(
             x: projected.x.toString(),
             y: projected.y.toString(),
             fill: txt.color || "black",
-            "font-size": (txt.fontSize ?? 12).toString(),
+            "font-size": ((txt.fontSize ?? 12) * Math.abs(matrix.a)).toString(),
             "font-family": "sans-serif",
             "text-anchor": alignMap[anchor],
             "dominant-baseline": baselineMap[anchor],
diff --git a/lib/index.ts b/lib/index.ts
index 28925df..c5613b3 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -29,6 +29,7 @@ export {
 } from "./drawGraphicsToCanvas"
 export { translateGraphics } from "./translateGraphics"
 export { mergeGraphics } from "./mergeGraphics"
+export { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 export function getSvgFromLogString(logString: string): string {
   const objects = getGraphicsObjectsFromLogString(logString)
diff --git a/tests/SVGRenderer.test.tsx b/tests/SVGRenderer.test.tsx
index f9536a2..5216b15 100644
--- a/tests/SVGRenderer.test.tsx
+++ b/tests/SVGRenderer.test.tsx
@@ -56,7 +56,7 @@ describe("SVGRenderer", () => {
           document.body.removeChild(container)
           throw error
         }
-      }, 0)
+      }, 50)
     })
   })
 })
diff --git a/tests/__snapshots__/texts.snap.svg b/tests/__snapshots__/texts.snap.svg
index dc58b2b..afa565e 100644
--- a/tests/__snapshots__/texts.snap.svg
+++ b/tests/__snapshots__/texts.snap.svg
@@ -1,4 +1,4 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="40" y="600" fill="green" font-size="16" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="320" y="320" fill="green" font-size="186.66666666666666" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
   <g id="crosshair" style="display: none">
     <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
     <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
@@ -27,12 +27,12 @@
 
       // Calculate real coordinates using inverse transformation
       const matrix = {
-        "a": 560,
+        "a": 11.666666666666666,
         "c": 0,
-        "e": 40,
+        "e": 320,
         "b": 0,
-        "d": -560,
-        "f": 600
+        "d": -11.666666666666666,
+        "f": 320
       };
       // Manually invert and apply the affine transform
       // Since we only use translate and scale, we can directly compute:
diff --git a/tests/getBounds.test.ts b/tests/getBounds.test.ts
new file mode 100644
index 0000000..cc02fad
--- /dev/null
+++ b/tests/getBounds.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test"
+import {
+  getBounds,
+  FONT_SIZE_WIDTH_RATIO,
+  FONT_SIZE_HEIGHT_RATIO,
+} from "../lib"
+import type { GraphicsObject } from "../lib/types"
+
+describe("getBounds with text", () => {
+  test("calculates text bounds using font size and default anchor", () => {
+    const graphics: GraphicsObject = {
+      texts: [{ x: 0, y: 0, text: "hello", fontSize: 10 }],
+    }
+    const bounds = getBounds(graphics)
+    const width = "hello".length * 10 * FONT_SIZE_WIDTH_RATIO
+    const height = 10 * FONT_SIZE_HEIGHT_RATIO
+    expect(bounds.maxX).toBeCloseTo(width / 2)
+    expect(bounds.minX).toBeCloseTo(-width / 2)
+    expect(bounds.maxY).toBeCloseTo(height / 2)
+    expect(bounds.minY).toBeCloseTo(-height / 2)
+  })
+
+  test("accounts for anchorSide", () => {
+    const graphics: GraphicsObject = {
+      texts: [
+        { x: 0, y: 0, text: "hi", fontSize: 8, anchorSide: "bottom_right" },
+      ],
+    }
+    const bounds = getBounds(graphics)
+    const width = "hi".length * 8 * FONT_SIZE_WIDTH_RATIO
+    const height = 8 * FONT_SIZE_HEIGHT_RATIO
+    expect(bounds.maxX).toBeCloseTo(0)
+    expect(bounds.minX).toBeCloseTo(-width)
+    expect(bounds.maxY).toBeCloseTo(0)
+    expect(bounds.minY).toBeCloseTo(-height)
+  })
+})
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
index 39a025c..2c4bce8 100644
--- a/tests/getSvgFromGraphicsObject.test.ts
+++ b/tests/getSvgFromGraphicsObject.test.ts
@@ -113,10 +113,29 @@ describe("getSvgFromGraphicsObject", () => {
     const svg = getSvgFromGraphicsObject(input)
     expect(svg).toBeString()
     expect(svg).toContain("Hello")
-    expect(svg).toContain('font-size="16"')
+    const match = svg.match(/font-size="([0-9.]+)"/)
+    expect(match).toBeTruthy()
+    expect(parseFloat(match![1])).toBeGreaterThan(16)
     expect(svg).toMatchSvgSnapshot(import.meta.path, "texts")
   })
 
+  test("respects text anchorSide", () => {
+    const input: GraphicsObject = {
+      texts: [
+        {
+          x: 0,
+          y: 0,
+          text: "A",
+          anchorSide: "top_right",
+        },
+      ],
+    }
+
+    const svg = getSvgFromGraphicsObject(input)
+    expect(svg).toContain('text-anchor="end"')
+    expect(svg).toContain('dominant-baseline="text-before-edge"')
+  })
+
   test("should handle cartesian coordinates correctly", () => {
     const input: GraphicsObject = {
       coordinateSystem: "cartesian",