joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(nav): scale italic Bifrost down to optically match regular Project

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 15:10:55 +02:00
parent 1f95a6579d
commit 941d2a1557
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/layouts/AppLayout.astro
View file

@ -134,17 +134,28 @@ const year = new Date().getFullYear();
its baseline in Newsreader; this nudges it onto the visual midline. */ its baseline in Newsreader; this nudges it onto the visual midline. */
transform: translateY(-2px); 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-project,
.wordmark-bifrost { .wordmark-bifrost {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 1.4;
letter-spacing: var(--tracking-snug); 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 { .wordmark-bifrost {
display: inline-block;
font-size: 16px;
font-style: italic; font-style: italic;
padding: 3px 0 1px;
vertical-align: baseline;
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
var(--pigment-terracotta) 0%, var(--pigment-terracotta) 0%,