diff --git a/core/renderers/common/constants.ts b/core/renderers/common/constants.ts
index c4ea9b24e..01217edb7 100644
--- a/core/renderers/common/constants.ts
+++ b/core/renderers/common/constants.ts
@@ -727,7 +727,10 @@ export class ConstantProvider {
       svgPaths.point(70, -height),
       svgPaths.point(width, 0),
     ]);
-    return {height, width, path: mainPath};
+    // Height is actually the Y position of the control points defining the
+    // curve of the hat; the hat's actual rendered height is 3/4 of the control
+    // points' Y position, per https://stackoverflow.com/a/5327329
+    return {height: height * 0.75, width, path: mainPath};
   }
 
   /**
diff --git a/core/renderers/common/info.ts b/core/renderers/common/info.ts
index 995124c1b..329c47442 100644
--- a/core/renderers/common/info.ts
+++ b/core/renderers/common/info.ts
@@ -232,7 +232,6 @@ export class RenderInfo {
     if (hasHat) {
       const hat = new Hat(this.constants_);
       this.topRow.elements.push(hat);
-      this.topRow.capline = hat.ascenderHeight;
     } else if (hasPrevious) {
       this.topRow.hasPreviousConnection = true;
       this.topRow.connection = new PreviousConnection(
diff --git a/core/renderers/zelos/constants.ts b/core/renderers/zelos/constants.ts
index 28c2cb4fc..ddb2bdeef 100644
--- a/core/renderers/zelos/constants.ts
+++ b/core/renderers/zelos/constants.ts
@@ -290,7 +290,10 @@ export class ConstantProvider extends BaseConstantProvider {
       svgPaths.point(71, -height),
       svgPaths.point(width, 0),
     ]);
-    return {height, width, path: mainPath};
+    // Height is actually the Y position of the control points defining the
+    // curve of the hat; the hat's actual rendered height is 3/4 of the control
+    // points' Y position, per https://stackoverflow.com/a/5327329
+    return {height: height * 0.75, width, path: mainPath};
   }
 
   /**