Foundations · Type

Type.

Two families, two jobs. Georama carries display — marketing headlines, hero metrics, and the moments that should feel loud. Inter carries UI and body — everything a user reads to get work done. Both are variable fonts; the system uses the weight and width axes, not a parade of static cuts.

Families

Display vs. UI. The split is about role, not taste — large type wants expression; small type wants clarity.

Display · Georama

Georama

Variable sans with 2 axes: weight (100–900) and width (62.5–150%). Used for marketing headlines, hero display, oversize numbers, and eyebrows where condensed width adds rhythm.

Variable · wght + wdth Weights 100 → 900 Widths 62.5% → 150% SIL OFL

UI + Body · Inter

Inter

Variable sans tuned for screen reading. Used for every text size below 34px — body copy, forms, tables, navigation, metadata. The quiet default that carries the product.

Variable · opsz + wght Weights 100 → 900 Optical size 14 → 32pt SIL OFL

Georama weights

The system anchors on SemiBold (600) for display headings and Bold (700) / ExtraBold (800) for marketing accents. Lighter cuts are available but used sparingly — thin display type rarely earns its space on screen.

300Light momentumLight · rare

400Regular signalRegular · body-size display

500Medium resolveMedium · subheads

600SemiBold anchor★ SemiBold · default display

700Bold statementBold · marketing

800ExtraBold impactExtraBold · hero accents

Inter weights

UI runs on four weights. Regular (400) for body; Medium (500) for labels and buttons; SemiBold (600) for headings and emphasis; Bold (700) reserved — so when it appears, it means something.

400Regular body copyRegular · body

500Medium UI labelsMedium · buttons, labels

600SemiBold headings★ SemiBold · headings, emphasis

700Bold for meaningBold · reserved

Georama width axis

Georama's width axis is the system's secret weapon — Condensed (75%) for eyebrows and dense metrics, Normal (100%) for all headline work, ExtraExpanded (150%) for hero punch-words. Mix widths within a single composition; never change weights just to fake width.

Condensedwdth 75% Eyebrow · Tall numbers · 1,248

SemiCondensedwdth 87.5%A slightly denser headline

Normalwdth 100% The default headline width

SemiExpandedwdth 112.5%Slightly open, slightly proud

Expandedwdth 125% Cover-weight presence

ExtraExpandedwdth 150%HERO PUNCH

Type scale

Ten steps. Small UI in Inter; display sizes jump to Georama at --text-2xl and up. The top three (3xl–5xl) are reserved for marketing and hero moments.

--text-xs12px Tabular meta · last edit · 04:22Inter · 500
line 1.4

--text-sm13px Secondary UI · form helper textInter · 400
line 1.5

--text-base15px Body default — the workhorse size for paragraphs and product copy.Inter · 400
line 1.55

--text-md17px Lede · emphasis body for intros and callouts.Inter · 400
line 1.55

--text-lg20px Section titleInter · 600
line 1.3

--text-xl26px Heading — in-productInter · 600
line 1.15

--text-2xl34px Page title — GeoramaGeorama · 600
line 1.1

--text-3xl48px Display MGeorama · 600
line 1.05

--text-4xl64px Display LGeorama · 600
line 1.02

--text-5xl88px HeroGeorama · 600
line 0.98

In use

How the families work together. Georama sets the tone; Inter does the reading.

Akku · hero moment

Build in public. Ship in private.

A marketing hero where Georama SemiBold (Normal width) and ExtraExpanded Bold share one line — the width axis replaces a second typeface.

Marketing surface

Typography that carries the brand — without shouting.

Condensed Georama for the eyebrow, SemiBold Georama for the headline, Inter for everything underneath. Coral and teal accents sit on top of this rhythm, never fight it.

Georama Condensed 700 · 12px / .08em

Anjali Mehra

Updated 2 min ago

Q1 velocity looks healthy

All-Inter card: heading, body, and metadata use SemiBold / Regular / Regular respectively. The oversize metric below is the only Georama — imported for data, not decoration.

247issues closed

Tokens

Drop into your :root. Components consume these — never font-family strings.

/* Families */
--font-display: 'Georama', 'Inter', system-ui, sans-serif;
--font-sans:    'Inter', system-ui, -apple-system, sans-serif;
--font-mono:    ui-monospace, 'JetBrains Mono', Menlo, monospace;

/* Scale */
--text-xs:   12px;   /* meta, labels */
--text-sm:   13px;   /* secondary UI */
--text-base: 15px;   /* body default */
--text-md:   17px;   /* lede */
--text-lg:   20px;   /* section title */
--text-xl:   26px;   /* heading */
--text-2xl:  34px;   /* page title → Georama */
--text-3xl:  48px;   /* display M */
--text-4xl:  64px;   /* display L */
--text-5xl:  88px;   /* hero */

/* Tracking & leading */
--tracking-tight: -0.03em;  --tracking-snug: -0.015em;
--tracking-wide:  0.02em;   --tracking-eyebrow: 0.14em;
--leading-display: 1.02;    --leading-heading: 1.1;
--leading-body:    1.55;    --leading-ui:      1.4;