/* Fonts loaded via globalstyle.css Base64 */ body { color: var(--color-on-background); } .art-header { background: var(--color-gradient); padding: 8rem 2.5rem 5rem; position: relative; overflow: hidden; } .art-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(201,171,129,0.07) 1px, transparent 1px); background-size: 28px 28px; } .art-header__inner { max-width: 780px; margin: 0 auto; position: relative; } .art-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'Instrument Sans', sans-serif; font-size: 0.7rem; color: rgba(242,231,213,0.5); margin-bottom: 1.5rem; } .art-breadcrumb a { color: rgba(242,231,213,0.5); text-decoration: none; } .art-breadcrumb a:hover { color: var(--gold); } .art-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 40px; font-family: 'Instrument Sans', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); color: #818cf8; margin-bottom: 1.25rem; width: fit-content; } .art-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: #f2e7d5; margin-bottom: 1.25rem; } .art-meta { display: flex; align-items: center; gap: 1rem; font-family: 'Instrument Sans', sans-serif; font-size: 0.775rem; color: rgba(242,231,213,0.55); flex-wrap: wrap; } .art-meta__author { display: flex; align-items: center; gap: 8px; color: rgba(242,231,213,0.8); font-weight: 600; } .art-meta__avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; font-weight: 700; } .art-body { max-width: 780px; margin: 0 auto; padding: 4rem 2.5rem 6rem; } .art-lead { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-style: italic; line-height: 1.75; color: var(--color-on-surface); margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(28,24,18,0.08); } .art-body h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-primary); margin: 2.5rem 0 1rem; } .art-body p { font-family: 'Instrument Sans', sans-serif; font-size: 1rem; line-height: 1.8; color: var(--color-on-surface-variant); margin-bottom: 1.25rem; } .art-body strong { color: var(--color-on-surface); font-weight: 700; } .art-body a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ── Nova Showcase ── */ .nova-showcase { background: var(--color-gradient); border-radius: 20px; padding: 3rem 2rem; text-align: center; margin: 2.5rem 0; position: relative; overflow: hidden; } .nova-showcase::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(201,171,129,0.06) 1px, transparent 1px); background-size: 22px 22px; } .nova-showcase__text { font-family: 'Nova Legacy', serif; font-size: clamp(2.5rem, 5vw, 5rem); color: var(--gold); line-height: 1.1; position: relative; letter-spacing: 0.02em; } .nova-showcase__sub { font-family: 'Instrument Sans', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,171,129,0.5); margin-top: 1rem; position: relative; } /* ── Process Timeline ── */ .timeline { margin: 2rem 0; position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--gold), transparent); border-radius: 2px; } .timeline-item { position: relative; margin-bottom: 2rem; } .timeline-item::before { content: ''; position: absolute; left: -2.4rem; top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold); } .timeline-item__phase { font-family: 'Instrument Sans', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.25rem; } .timeline-item__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary); margin-bottom: 0.5rem; } .timeline-item__desc { font-family: 'Instrument Sans', sans-serif; font-size: 0.875rem; line-height: 1.7; color: var(--color-on-surface-variant); } /* ── Alphabet Display ── */ .alpha-grid { background: #fff; border: 1px solid rgba(28,24,18,0.08); border-radius: 16px; padding: 2rem; margin: 2rem 0; text-align: center; box-shadow: 0 4px 20px rgba(28,24,18,0.03); } .alpha-grid__label { font-family: 'Instrument Sans', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 1rem; } .alpha-grid__chars { font-family: 'Nova Legacy', serif; font-size: 2rem; line-height: 1.5; color: var(--color-primary); letter-spacing: 0.05em; } .alpha-grid__nums { font-family: 'Nova Legacy', serif; font-size: 1.25rem; color: var(--color-on-surface-variant); margin-top: 0.5rem; letter-spacing: 0.1em; } .art-callout { background: linear-gradient(135deg, rgba(201,171,129,0.08), rgba(201,171,129,0.03)); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 2rem 0; } .art-callout p { margin: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; color: var(--color-on-surface); line-height: 1.7; } .art-cta { background: var(--color-gradient); border-radius: 18px; padding: 2.5rem; text-align: center; margin-top: 3rem; position: relative; overflow: hidden; } .art-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(201,171,129,0.07) 1px, transparent 1px); background-size: 22px 22px; } .art-cta__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: #f2e7d5; margin-bottom: 0.5rem; position: relative; } .art-cta__sub { font-family: 'Instrument Sans', sans-serif; font-size: 0.875rem; color: var(--body-text-on-gradient); margin-bottom: 1.5rem; position: relative; } .art-cta__btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; position: relative; } .art-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.7rem 1.5rem; border-radius: 40px; font-family: 'Instrument Sans', sans-serif; font-size: 0.825rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; } .art-btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff; border: none; } .art-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(138,108,62,0.45); } .art-btn--ghost { background: transparent; color: #f2e7d5; border: 1px solid rgba(242,231,213,0.3); } .art-btn--ghost:hover { background: rgba(242,231,213,0.08); } .art-nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-top: 1px solid rgba(28,24,18,0.08); margin-top: 2rem; gap: 1rem; } .art-nav__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; } .art-nav__label { font-family: 'Instrument Sans', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-outline); } .art-nav__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-primary); transition: color 0.2s; } .art-nav__link:hover .art-nav__title { color: var(--gold-dark); } @media (max-width: 600px) { .art-body { padding: 2.5rem 1.25rem 4rem; } .art-header { padding: 7rem 1.25rem 3.5rem; } }

Glyphere

From Glyph to Identity

Home/ Journal/ Behind the Scenes
Behind the Scenes

Behind the Typeface: The Story of Nova Legacy

G
Glyphere Studio
·June 20, 2026·6 min read

Nova Legacy began as a sketch on a napkin in a coffee shop in Lahore. Two months of iteration later, it became one of Glyphere's most beloved typefaces — a warm, bold serif that somehow feels both timeless and completely contemporary.

Nova Legacy
Glyphere Typefaces · Est. 2026

Where It Started

The original idea for Nova Legacy came from a frustration: there weren't enough warm serifs built for the digital screen. Most serifs were designed for print — for the ink-on-paper weight distribution that translates poorly to pixels. We wanted something that felt heritage and warm, but was built from the beginning to live on screens.

The first sketches played with high stroke contrast — the kind you see in classic display serifs from the 19th century — but softened. The terminals were rounded slightly. The serifs were bracketed but not razor-sharp. The result, on paper, already had character.

"We weren't trying to reinvent the serif. We were trying to remember what made the best ones so compelling — and bring that forward."

The Design Process

Week 1–2
Concept & Sketching

Hand-drawn exploration of the key characters — A, G, a, g, n, o, e. These 7 characters define the personality of any serif. Getting them right sets the DNA for every other glyph.

Week 3–4
Digitisation & Key Metrics

Moving into Glyphs App, establishing the UPM, x-height, cap height, and overshoot. These foundational metrics determine how the font will look at every size.

Week 5–6
Full Glyph Set

Building out the complete Latin character set — uppercase, lowercase, numerals, punctuation, and a selection of diacritical marks for international support.

Week 7–8
Spacing, Kerning & Testing

Spacing is where typefaces live or die. Two weeks of optical spacing work, followed by kerning pairs, followed by testing in browser at every size from 12px to 120px.

The Full Character Set

Nova Legacy — Full Latin Uppercase & Lowercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#&().,?

What Makes It Work

Nova Legacy's appeal comes from a tension between things that shouldn't quite go together: bold without being heavy, warm without being casual, historical without feeling dated. The stroke contrast is high enough to feel editorial, but the terminals are soft enough to feel approachable.

At headline sizes, it commands. At smaller sizes, it reads cleanly. This range — which is rare in display serifs — is what makes it so versatile across brand, editorial, and digital applications.

"A typeface succeeds when you stop noticing it and start feeling what it's saying."

Where It Lives Best

Nova Legacy is happiest as a headline or display typeface for brands that value warmth and authority. It works particularly well in editorial design, luxury brand identity, heritage fashion, hospitality, and food & drink — anywhere that the writing should feel personal but considered.

Pair it with a clean modern sans-serif like Mistavio Sans or Pebble Sans for maximum contrast and readability.

Nova Legacy is available now

Own the typeface that started with a napkin sketch and ended up on a screen near you.