Typography

The three families

The scale

1. text-display-2xl72px / 1.02 · 800 · -0.035emDisplay

   Sovereign AI, on your own servers.

   The hero of a home page

2. text-display-xl56px / 1.05 · 800 · -0.03emDisplay

   Sovereign AI, on your own servers.

   The hero of a page

3. text-display-lg44px / 1.1 · 700 · -0.025emDisplay

   Sovereign AI, on your own servers.

   The title of a page

4. text-display-md34px / 1.15 · 700 · -0.02emDisplay

   Sovereign AI, on your own servers.

   The title of a section

5. text-display-sm26px / 1.2 · 700 · -0.015emDisplay

   Sovereign AI, on your own servers.

   A sub-section, a big figure

6. text-title-lg20px / 1.35 · 700 · -0.01emDisplay

   Sovereign AI, on your own servers.

   The title of a card or a dialog

7. text-title-md17px / 1.4 · 600 · -0.012emText

   Your documents stay in Montréal. The answers cite their sources, the costs are counted in advance — 1 234,56 $ for 12 000 requests.

   The title of a list or a panel

8. text-body-lg18px / 1.6 · 400 · -0.014emText

   Your documents stay in Montréal. The answers cite their sources, the costs are counted in advance — 1 234,56 $ for 12 000 requests.

   The lead, a paragraph that stands out

9. text-body-md16px / 1.6 · 400 · -0.011emText

   Your documents stay in Montréal. The answers cite their sources, the costs are counted in advance — 1 234,56 $ for 12 000 requests.

   Running text

10. text-body-sm14px / 1.5 · 400 · -0.006emText

    Your documents stay in Montréal. The answers cite their sources, the costs are counted in advance — 1 234,56 $ for 12 000 requests.

    Dense interface, secondary text

11. text-caption12px / 1.4 · 500 · 0emText

    Your documents stay in Montréal. The answers cite their sources, the costs are counted in advance — 1 234,56 $ for 12 000 requests.

    Captions, help, metadata

12. text-overline11px / 1.3 · 600 · 0.12emMono

    POST /api/v1/chat → 200 · 0O 1lI

    The overline of a section, uppercase

13. text-mono-md14px / 1.6 · 400 · 0emMono

    POST /api/v1/chat → 200 · 0O 1lI

    Code blocks

14. text-mono-sm12px / 1.5 · 400 · 0emMono

    POST /api/v1/chat → 200 · 0O 1lI

    Identifiers, endpoints, versions

Installation

Web (CSS)

Import the faces once, next to the preset: the tokens already name them.

npm install @krizaka/fonts @krizaka/tokens @krizaka/tailwind

@import "tailwindcss";
@import "@krizaka/tailwind";   /* --kz-font-* and text-display-xl, text-body-md… */
@import "@krizaka/fonts/css";  /* the faces and their adjusted fallbacks */

<h1 class="font-display text-display-xl">…</h1>
<p class="font-text text-body-md text-fg-secondary">…</p>
<span class="font-mono text-overline uppercase">…</span>

Next.js

Import the CSS in the root layout — the bundler copies and fingerprints the files; the fallbacks keep CLS at 0.

// app/layout.tsx
import "@krizaka/fonts/css";
import "./globals.css"; // @import "tailwindcss"; @import "@krizaka/tailwind";

React Native / Expo

Load the static files with expo-font, then take a step of the scale and the name of its face.

// npx expo install expo-font && npm install @krizaka/fonts @krizaka/tokens
import { useFonts } from "expo-font";
import { fontAssets } from "@krizaka/fonts/native/assets";
import { fontFamily } from "@krizaka/fonts/native";
import { typeScale } from "@krizaka/tokens/native";

const [loaded] = useFonts(fontAssets);
const { role, fontWeight, ...size } = typeScale.displayLg;
<Text style={{ ...size, fontFamily: fontFamily(role, Number(fontWeight)) }}>…</Text>

Rules

• Three families, three jobs: display speaks (headlines, figures), text reads (everything else), mono labels and quotes code. Never a fourth family on a Krizaka surface.
• Use the scale, not sizes: text-display-xl, text-body-md… carry size, line height, weight and tracking together. A one-off size is a missing step — ask for it.
• Display from 20 px up, at 600–800; text from 12 px, at 400–700. Never a light weight (< 400) on a dark surface.
• One display line per block. The rest is text: a page of headlines reads as noise.
• Amounts, counters and tables use tabular figures (tabular-nums); prices keep the currency from @krizaka/intl, never a hand-written sign.
• Measure: 60–75 characters per line for reading (max-w-prose).
• Products may override the display role with their own face (Orochia: Outfit) through --kz-font-display; text and mono stay Krizaka's.
• The Krizaka wordmark is drawn, inside the logo: never set the name in a font to imitate it.

Licences

Every face is under the SIL Open Font License 1.1: bundle it with any software, never sell it on its own. The licences ship in the package.

Generated from @krizaka/fonts@0.1.0 · @krizaka/tokens@2.4.0.Edit in krizaka-ui