From db133fbd33c366234df2749b3229ae2592e781a2 Mon Sep 17 00:00:00 2001 From: Shane Date: Thu, 16 Jul 2026 18:34:18 -0500 Subject: [PATCH] Loosen headline leading for 2-line headlines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1.1 line-height reads fine for a single line but felt cramped once a headline wraps to two lines. Added a lineHeightTwoLine token (1.2), applied only when fit.lineCount === 2 — single-line and 3-line headlines are unaffected. Co-Authored-By: Claude Sonnet 5 --- apps/og-generator/app/api/og/route.tsx | 4 +++- apps/og-generator/lib/design/tokens.ts | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/og-generator/app/api/og/route.tsx b/apps/og-generator/app/api/og/route.tsx index a41ba5151c2..f6df5e5a74c 100644 --- a/apps/og-generator/app/api/og/route.tsx +++ b/apps/og-generator/app/api/og/route.tsx @@ -262,7 +262,9 @@ export async function GET(req: Request) { } const headlineSize = fit.fontSize * s - const headlineLineHeight = Math.round(headlineSize * HEADLINE.lineHeight) + const headlineLineHeight = Math.round( + headlineSize * (fit.lineCount === 2 ? HEADLINE.lineHeightTwoLine : HEADLINE.lineHeight) + ) // Gap between highlight runs on a line — a real space glyph's advance // width at the rendered size, applied as marginLeft (see textBlock below). const spaceWidthPx = measureLineWidth(headlineFont, ' ', headlineSize, HEADLINE.letterSpacing) diff --git a/apps/og-generator/lib/design/tokens.ts b/apps/og-generator/lib/design/tokens.ts index f5cb8d38b05..ac0f14e5b2f 100644 --- a/apps/og-generator/lib/design/tokens.ts +++ b/apps/og-generator/lib/design/tokens.ts @@ -27,6 +27,10 @@ export const typography = { compact: { minSize: 40, maxSize: 56 }, }, lineHeight: 1.1, + // Slightly looser leading once a headline wraps to 2 lines — 1.1 reads + // fine for a single line but feels a touch tight once there's a + // second line stacked underneath. + lineHeightTwoLine: 1.2, letterSpacing: -0.02, // em }, eyebrow: {