<div class="type-demo">
<div class="label">Editorial Type System</div>
<h1>Bold ideas in <em>serif italic</em></h1>
<p class="sub">A timeless pairing of sans body and serif display.</p>
<p class="body">Body copy uses Inter at 16px with 1.6 line-height for comfortable reading. Headlines lean on Instrument Serif for that editorial weight without being heavy.</p>
<code class="mono">font-family: 'Instrument Serif', serif;</code>
</div>
.type-demo {
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
max-width: 520px;
padding: 24px;
background: #0a0a14;
border-radius: 12px;
}
.type-demo .label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 16px;
}
.type-demo h1 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: clamp(36px, 6vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 400;
margin: 0 0 12px;
}
.type-demo h1 em {
font-style: italic;
color: rgba(255,255,255,0.65);
}
.type-demo .sub {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 20px;
color: rgba(255,255,255,0.7);
margin: 0 0 20px;
}
.type-demo .body {
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.75);
margin: 0 0 16px;
}
.type-demo .mono {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: #a78bfa;
background: rgba(167,139,250,0.08);
padding: 8px 12px;
border-radius: 6px;
display: inline-block;
}