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: {