04

Typography

Archivo for everything humans read. JetBrains Mono for data. Dynamic tracking, fluid sizing, dark-optimized contrast.

Ag01

TYPEFACES

PRIMARY — ARCHIVO

Buy and sell crypto easily

400

Your portfolio is growing

500

Account settings updated

600

Bitcoin is up today

700

Zero complexity

800

DATA — JETBRAINS MONO

0.00234 BTC

400

$3,521.04 +1.1%

500

$86,432.18

700

TABULAR vs PROPORTIONAL

$1,234.56

$9,876.54

aligned ✓

$1,234.56

$9,876.54

misaligned ✗

TYPE SCALE

Display

800 / 36–56px / -0.025em

BUY CRYPTO

H1

700 / 24–36px / -0.015em

Your Portfolio

H2

600 / 20–26px / -0.005em

Popular Coins

H3

600 / 16–19px / +0.005em

Account Settings

Body LG

400 / 16–18px / +0.005em

Start with as little as $1.

Body

400 / 15–16px / +0.01em

Buy Bitcoin in seconds.

Caption

500 / 13px / +0.02em

Updated 2 min ago

Overline

700 / 11px / +0.1em / upper

YOUR COINS

Data LG

Mono 600 / 24–32px

$4,281.50

Data MD

600 / 20px / tabular

$67,432.18

DYNAMIC TRACKING

Large type gets tight tracking. Small type gets loose. The core of what makes type feel designed.

Display

-0.025em

Buy crypto

H1

-0.015em

Your portfolio

Body

+0.01em

Start with as little as $1.

Overline

+0.1em

YOUR COINS

GRADIENT TEXT & CONTEXT

ACCENT GRADIENT

BUY CRYPTO

Hero headlines. Persian Blue gradient.

SUBTLE GRADIENT

ZERO LIMITS

White-to-gray fade. Depth without color.

PORTFOLIO CARD

YOUR BALANCE

$4,281.50

Up $127.30 this week

You own 4 coins across 2 networks.

MARKETING HERO

BUY CRYPTO

The easiest way to buy and sell Bitcoin.

No experience needed. Start with $1.

RULES

DO

  • Tighten tracking as size increases
  • Use tabular-nums on changing numbers
  • Reserve pure white for active data
  • Use gradient text on display headlines only
  • Let clamp() handle responsive sizing

DON'T

  • Use wide tracking on large type
  • Set body text to pure white
  • Use weights below 400 on dark
  • Mix in other typefaces
  • Use gradient text on body copy