/wire-template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Body font exploration · Typography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--carbon: #060605;
--carbon-panel: #0F0F0F;
--carbon-lift: #1A1A1A;
--hull-edge: rgba(231,224,220,0.12);
--ember-glow: #FFB347;
--ember: #FF7A2E;
--ember-deep: #D14810;
--chrome-highlight: #F7F5F3;
--chrome-warm: #E5E2E1;
--text-primary: #C7C1BE;
--text-dim: rgba(199,193,190,0.55);
--font-title: 'Orbitron', system-ui, sans-serif;
--font-chrome: 'Space Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--text-primary); font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.page { max-width: 1440px; margin: 0 auto; padding: 80px 48px 120px; }
/* ==== Page header ==== */
.header { border-bottom: 1px solid var(--hull-edge); padding-bottom: 56px; margin-bottom: 72px; }
.header__eyebrow { font-family: var(--font-chrome); font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ember); font-size: 12px; margin-bottom: 24px; }
.header__title { font-family: var(--font-title); font-weight: 600; font-size: 48px; line-height: 1.1; letter-spacing: 0.8px; color: var(--chrome-highlight); max-width: 1000px; margin-bottom: 20px; }
.header__sub { font-size: 17px; line-height: 1.6; color: var(--text-primary); max-width: 780px; margin-bottom: 20px; }
.header__meta { font-family: var(--font-chrome); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.header__meta strong { color: var(--ember); font-weight: 600; }
/* ==== Baseline strip ==== */
.baseline { background: var(--carbon-panel); border: 1px solid var(--hull-edge); padding: 40px 44px; margin-bottom: 72px; }
.baseline__label { font-family: var(--font-chrome); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); font-weight: 600; margin-bottom: 20px; }
.baseline__title { font-family: var(--font-title); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: 0.8px; color: var(--chrome-highlight); margin-bottom: 20px; }
.baseline__body { font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text-primary); max-width: 720px; margin-bottom: 12px; }
.baseline__note { font-size: 13px; color: var(--text-dim); margin-top: 20px; max-width: 760px; }
/* ==== Font row ==== */
.row { padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--hull-edge); }
.row__meta { display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-bottom: 48px; }
.row__name { font-family: var(--font-chrome); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.row__family { color: var(--chrome-warm); font-size: 20px; margin-bottom: 8px; font-weight: 500; }
.row__badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--hull-edge); font-family: var(--font-chrome); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }
.row__desc { color: var(--text-primary); font-size: 15px; line-height: 1.65; max-width: 720px; }
.row__desc em { color: var(--chrome-warm); font-style: italic; }
.samples { display: flex; flex-direction: column; gap: 44px; }
.sample { }
.sample__label { font-family: var(--font-chrome); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; font-weight: 500; }
/* Title placeholder (Orbitron) at top of each row */
.sz-title { font-family: var(--font-title); font-weight: 600; font-size: 40px; line-height: 1.08; letter-spacing: 0.8px; color: var(--chrome-highlight); }
/* Body-copy sample sizes — swap font per row */
.sz-lede { font-size: 19px; line-height: 1.55; font-weight: 400; color: var(--chrome-warm); max-width: 780px; }
.sz-body { font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--text-primary); max-width: 780px; }
.sz-body-small { font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--text-primary); max-width: 720px; }
.sz-body-italic { font-size: 16px; line-height: 1.65; font-weight: 400; font-style: italic; color: var(--text-primary); max-width: 780px; }
.sz-body-emph { font-size: 16px; line-height: 1.65; color: var(--text-primary); max-width: 780px; }
.sz-body-emph strong { font-weight: 600; color: var(--chrome-warm); }
.sz-body-emph em { font-style: italic; color: var(--chrome-warm); }
/* Font applications per row */
.row--manrope .sz-lede, .row--manrope .sz-body, .row--manrope .sz-body-small, .row--manrope .sz-body-italic, .row--manrope .sz-body-emph { font-family: 'Manrope', system-ui, sans-serif; }
.row--inter .sz-lede, .row--inter .sz-body, .row--inter .sz-body-small, .row--inter .sz-body-italic, .row--inter .sz-body-emph { font-family: 'Inter', system-ui, sans-serif; }
.row--space-grotesk .sz-lede, .row--space-grotesk .sz-body, .row--space-grotesk .sz-body-small, .row--space-grotesk .sz-body-italic, .row--space-grotesk .sz-body-emph { font-family: 'Space Grotesk', system-ui, sans-serif; }
.row--ibm-plex .sz-lede, .row--ibm-plex .sz-body, .row--ibm-plex .sz-body-small, .row--ibm-plex .sz-body-italic, .row--ibm-plex .sz-body-emph { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.row--dm-sans .sz-lede, .row--dm-sans .sz-body, .row--dm-sans .sz-body-small, .row--dm-sans .sz-body-italic, .row--dm-sans .sz-body-emph { font-family: 'DM Sans', system-ui, sans-serif; }
.row--onest .sz-lede, .row--onest .sz-body, .row--onest .sz-body-small, .row--onest .sz-body-italic, .row--onest .sz-body-emph { font-family: 'Onest', system-ui, sans-serif; }
/* Legend hint */
.legend { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--hull-edge); color: var(--text-dim); font-size: 13px; line-height: 1.7; max-width: 780px; }
.legend strong { color: var(--chrome-warm); font-weight: 500; }
</style>
</head>
<body>
<main class="page">
<div class="header">
<div class="header__eyebrow">Body font exploration · 2026-07-15 · Pair with Orbitron</div>
<h1 class="header__title">Same story. Six voices. Which one reads like the workshop?</h1>
<p class="header__sub">Direct A/B of six candidate body fonts against the current Manrope baseline. All samples use authentic ARTSABERS copy — the workshop-story prose from MAS82, the gift-card intro from MAS83, and an FAQ answer from the Hilt Finder. Titles above each row are set in the locked Orbitron 600 upright so you can judge the pairing. Chrome (eyebrows, labels) stays in Space Grotesk.</p>
<p class="header__meta">Title: Orbitron (locked) · Body baseline: Manrope · Alternatives: <strong>Inter · Space Grotesk · IBM Plex Sans · DM Sans · Onest</strong></p>
</div>
<!-- BASELINE -->
<div class="baseline">
<div class="baseline__label">Current body baseline · Manrope</div>
<div class="baseline__title">"Broadest catalogue. Real service. Ten days, honest."</div>
<p class="baseline__body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
<p class="baseline__body">Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide. A domestic warehouse would be faster; factory-direct is what keeps the catalogue this wide.</p>
<p class="baseline__note">Current locked body font. Geometric humanist sans by Mikhail Sharanda. Wide weight range (200-800), no true italic in Google Fonts (browser synthesises when needed). Reads clean at 15-17px, holds up at small sizes, pairs cleanly with most display fonts.</p>
</div>
<!-- ROW 1 · MANROPE (baseline restated) -->
<section class="row row--manrope">
<div class="row__meta">
<div>
<div class="row__name">01 · Manrope</div>
<div class="row__family">Manrope</div>
<span class="row__badge">Current baseline · Geometric humanist</span>
</div>
<p class="row__desc">Geometric humanist sans with tempered warmth. Reads as <em>modern, clean, screen-native</em>. Currently used across all 33 mockups. Neutral enough not to compete with Orbitron titles. No true italic in Google Fonts — synthesised italic where used (see the italic sample below).</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (may be synthesised)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<!-- ROW 2 · INTER -->
<section class="row row--inter">
<div class="row__meta">
<div>
<div class="row__name">02 · Inter</div>
<div class="row__family">Inter</div>
<span class="row__badge">Neutral workhorse · Screen-native</span>
</div>
<p class="row__desc">Rasmus Andersson's modern-web workhorse. Reads as <em>ubiquitous, neutral, unopinionated</em>. Designed specifically for screen at small sizes with tuned optical spacing. Has a proper italic (not synthesised). May feel too "SaaS default" for a moody Star Wars brand — but its cleanliness lets Orbitron do the character work.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (true italic)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<!-- ROW 3 · SPACE GROTESK -->
<section class="row row--space-grotesk">
<div class="row__meta">
<div>
<div class="row__name">03 · Space Grotesk</div>
<div class="row__family">Space Grotesk</div>
<span class="row__badge">Consolidation option · Already loaded for chrome</span>
</div>
<p class="row__desc">Currently loaded for chrome type (eyebrows, nav, labels). Reusing it for body copy would <em>consolidate the font stack to just two families</em> — Orbitron + Space Grotesk. Slightly quirkier than Manrope; the geometric quirks make it more distinctive but might tire the eye in long-form reading. No true italic in Google Fonts.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (synthesised)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<!-- ROW 4 · IBM PLEX SANS -->
<section class="row row--ibm-plex">
<div class="row__meta">
<div>
<div class="row__name">04 · IBM Plex Sans</div>
<div class="row__family">IBM Plex Sans</div>
<span class="row__badge">Humanist-tech · Best of both worlds</span>
</div>
<p class="row__desc">IBM's corporate typeface family. Reads as <em>humanist with tech DNA</em> — warmer than Inter, more character than Manrope, more precise than Onest. Slight technical geometry that pairs beautifully with sci-fi displays. Has true italic. Wide weight range. The "engineered-but-warm" body font.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (true italic)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<!-- ROW 5 · DM SANS -->
<section class="row row--dm-sans">
<div class="row__meta">
<div>
<div class="row__name">05 · DM Sans</div>
<div class="row__family">DM Sans</div>
<span class="row__badge">Geometric humanist · Slightly warmer</span>
</div>
<p class="row__desc">Colophon Foundry's geometric humanist sans. Reads as <em>friendly geometric</em> — cousin of Poppins but more restrained, slightly less rounded than Onest. Warmer than Inter, more compact than Manrope. Variable font with optical sizes and true italic. Good if we want the body copy to soften Orbitron's mechanical edge.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (true italic)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<!-- ROW 6 · ONEST -->
<section class="row row--onest">
<div class="row__meta">
<div>
<div class="row__name">06 · Onest</div>
<div class="row__family">Onest</div>
<span class="row__badge">Warm humanist · Recent workhorse</span>
</div>
<p class="row__desc">Recent (2024) humanist sans from Rebrand.gy. Reads as <em>warmer and more open than Inter or Manrope</em>. Slightly larger x-height, more inviting bowls, human touches. Would soften Orbitron's mechanical character with a friendlier body voice. True italic. Feels like the current-year answer to "what should our body copy be?"</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Title pairing · Orbitron 600 (locked)</div>
<div class="sz-title">Every character. Every era. Every duelling grade.</div>
</div>
<div class="sample">
<div class="sample__label">Lede paragraph · 19px 400</div>
<p class="sz-lede">The Anakin EP3 build in its most-loved configuration — Xenopixel V3 sound core, reinforced duelling emitter, thick-wall polycarbonate blade.</p>
</div>
<div class="sample">
<div class="sample__label">Body paragraph · 16px 400</div>
<p class="sz-body">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it. Your hilt ships direct from the factory floor to your door. Seven to ten days, worldwide.</p>
</div>
<div class="sample">
<div class="sample__label">Small body · 14px 400</div>
<p class="sz-body-small">Xenopixel V3 is the current-generation soundboard family — 34 sound fonts, motion-triggered clash and swing, in-blade RGB colour. It's the smoothest experience under $500. Alternatives (Proffie 2.2, SNV4 PRO) are step-ups for tinkerers.</p>
</div>
<div class="sample">
<div class="sample__label">Italic emphasis · 16px italic (synthesised — Onest has upright only in some cuts)</div>
<p class="sz-body-italic">"It is no exaggeration to say that doing the BWH courses and signing up to the agency has changed my life."</p>
</div>
<div class="sample">
<div class="sample__label">Emphasis mix · 16px with <strong>bold</strong> + <em>italic</em></div>
<p class="sz-body-emph">The person you're buying for <strong>knows what they want</strong>. We just make it possible for them to get it. Digital gift cards — sent by email, <em>no plastic, no shipping delay</em>.</p>
</div>
</div>
</section>
<div class="legend">
<p><strong>Notes.</strong> All samples set on Kyber Hull carbon ground (#060605) with the brand's chrome/warm text tokens. Titles above each row are the locked Orbitron 600 upright at 40px with 0.8px letter-spacing — a working section-title size — so you can judge the pairing directly. Body samples span the full range of contexts a body font actually has to handle: lede (19px), main body (16px), small (14px), italic, and mixed emphasis. Chrome type (eyebrows, section labels) stays in Space Grotesk throughout.</p>
<p style="margin-top:16px;"><strong>What to look for.</strong> (1) Does the body font <em>complement</em> Orbitron or <em>compete</em> with it? (Orbitron is loud sci-fi — body should let it lead.) (2) Long-form readability at 16px — the 5-line body paragraph is the real test. (3) How does italic look? Synthesised italic can read as sloppy on some fonts. (4) Does the body's character match "workshop-manifesto, factory-direct, service-proud" voice — warm-but-precise, not corporate-neutral. (5) Consolidation angle — row 03 uses Space Grotesk (already loaded for chrome), collapsing the stack from three fonts to two.</p>
</div>
</main>
</body>
</html>