From 941d2a1557049040cadeb1af201023064bc4ed95 Mon Sep 17 00:00:00 2001 From: Jonathan Hvid Date: Tue, 12 May 2026 15:10:55 +0200 Subject: [PATCH] fix(nav): scale italic Bifrost down to optically match regular Project MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Italic Newsreader at the same font-size renders visibly taller than its regular sibling — the cursive 'B' has a flourish that extends above the cap-line. Matching font-sizes meant Bifrost always looked larger, and trying to fit that flourish inside the line-box / gradient-clip either made the wordmark cramped or clipped the top off. Asymmetric sizes for optical match: Project — 18px regular Newsreader Bifrost — 16px italic Newsreader At those sizes, Project's 18px cap-height roughly equals Bifrost's 16px cap + flourish-ascender, so the two words read as the same visual height. inline-block + padding 3px top / 1px bottom on Bifrost keeps the gradient-clip bbox tall enough to contain the flourish without clipping, while vertical-align: baseline keeps the typographic baseline aligned with Project's baseline so the wordmark sits on one line. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/layouts/AppLayout.astro | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro index 21e55bd..66303c7 100644 --- a/src/layouts/AppLayout.astro +++ b/src/layouts/AppLayout.astro @@ -134,17 +134,28 @@ const year = new Date().getFullYear(); its baseline in Newsreader; this nudges it onto the visual midline. */ transform: translateY(-2px); } + /* Italic Newsreader renders ~10% visually taller than regular at the + same font-size — the cursive B has a flourish extending past the + cap line. Drop Bifrost to 16px so its cap+flourish optical height + matches Project's 18px cap, and use inline-block + tiny vertical + padding so the gradient-clip bbox doesn't chop the flourish off. */ .wordmark-project, .wordmark-bifrost { font-family: var(--font-serif); - font-size: 18px; font-weight: 400; - line-height: 1.4; letter-spacing: var(--tracking-snug); + line-height: 1.4; + } + .wordmark-project { + font-size: 18px; + color: var(--on-surface); } - .wordmark-project { color: var(--on-surface); } .wordmark-bifrost { + display: inline-block; + font-size: 16px; font-style: italic; + padding: 3px 0 1px; + vertical-align: baseline; background-image: linear-gradient( 90deg, var(--pigment-terracotta) 0%,