diff --git a/src/components/ui/__tests__/card-title-leading.test.tsx b/src/components/ui/__tests__/card-title-leading.test.tsx
new file mode 100644
index 000000000..c13b5e3fb
--- /dev/null
+++ b/src/components/ui/__tests__/card-title-leading.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { CardTitle } from "../card";
+
+/**
+ * A card title wraps (`break-words hyphens-auto`), so its line height must
+ * leave room between the lines: under `leading-none` a wrapped German
+ * compound's two lines touched.
+ */
+describe("<CardTitle>", () => {
+  it("wraps with room between the lines", () => {
+    const html = renderToStaticMarkup(
+      <CardTitle>Körperfettverteilung</CardTitle>,
+    );
+    expect(html).toContain("leading-tight");
+    expect(html).not.toContain("leading-none");
+  });
+
+  it("counter-check: a caller's own leading still wins", () => {
+    const html = renderToStaticMarkup(
+      <CardTitle className="leading-snug">Puls</CardTitle>,
+    );
+    expect(html).toContain("leading-snug");
+    expect(html).not.toContain("leading-tight");
+  });
+});
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index e64293365..13eca51ac 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -64,7 +64,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "leading-none font-semibold break-words hyphens-auto",
+        "leading-tight font-semibold break-words hyphens-auto",
         className,
       )}
       {...props}