Skip to content
New guideAgent Cookbook 12 copy-ready prompts for AI coding agents.See recipes

Brand book · 03

Typography

Ubuntu, Roboto and JetBrains Mono: what each family does, the type scale, and the rules for emphasis, numbers and line length.

Three families, three jobs

The site serves the Latin subsets from public/fonts/standard through next/font/local. Metric-matched fallbacks (styles/font-fallbacks.css) hold the layout while they load.

Ubuntu

Titles, headings, card titles and big numbers. Its round, open shapes are the brand’s friendly side.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Blockchain data, 1 response = 1 credit

Classes: font-display

Ubuntu on Google Fonts

Roboto

Body text, buttons, navigation, field labels and eyebrows. Neutral, so the content leads.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Blockchain data, 1 response = 1 credit

Classes: font-sans, font-ui, font-label

Roboto on Google Fonts

JetBrains Mono

Code, endpoint URLs, API keys, token names and hashes: anything a reader copies.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Blockchain data, 1 response = 1 credit

Classes: font-mono

JetBrains Mono on Google Fonts

The type scale

Pick a step by its job. The two largest steps scale with the screen; the rest are fixed. Values are read from the theme.

  • text-display40–72 px · line 1.02 · tracking -0.02emThe page title in a hero. Once per page.

    RPC for 150+ networks

  • text-heading32–50 px · line 1.05 · tracking -0.035emSection titles.

    One key, every chain

  • text-3xl30 px · line 1.2 · tracking 0h2 in articles and legal pages.

    Headings in long text

  • text-2xl24 px · line 1.33 · tracking 0Feature cards and stat numbers.

    A large card title

  • text-xl20 px · line 1.4 · tracking 0Card titles and h3.

    A card title

  • text-lg18 px · line 1.56 · tracking 0Ledes under a title.

    A lede: one or two sentences that say why the section matters.

  • text-base16 px · line 1.5 · tracking 0Running text.

    Body text. 1 response is 1 credit, with no compute units.

  • text-sm14 px · line 1.43 · tracking 0Controls and dense text.

    Buttons, table cells, captions and secondary copy.

  • text-xs12 px · line 1.33 · tracking 0The smallest text. Never for a sentence that matters.

    Badges, footnotes and chart labels.

  • text-eyebrow12 px · line 1.4 · tracking 0.12emA short label over a title: a topic, not a sentence.

    An eyebrow label

Rules

Do

  • Do: Emphasise with bold (700). The site loads 400 and 700 only.
  • Do: Set numbers in tables, stats and prices with tabular figures (tabular-nums), so the columns line up.
  • Do: Write numbers as digits with their unit: 150+ networks, 99.99%, 20 ms.
  • Do: Keep running text to about 70 characters a line (Container size="prose", max-w-3xl).
  • Do: Balance titles (text-balance) and let paragraphs wrap cleanly (text-pretty).

Don't

  • Don't: Use italics. No italic face loads, so the browser would slant the letters.
  • Don't: Set a sentence in capitals. Capitals are for eyebrow labels only, tracked at 0.12em.
  • Don't: Use a weight between 400 and 700. Medium falls back to 400.
  • Don't: Underline text that is not a link.
  • Don't: Set body text below 14 px.

tabular-nums1,111.11
8,888.88

proportional1,111.11
8,888.88

font-mono0xa0b8…69c3

Start free.1 response = 1 credit.

100,000 responses a day at 20 per second, on 150+ networks. Upgrade when you need more.

Create an accountDedicated clusters