Typographie

Les trois familles

L'échelle

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

   L'IA souveraine, sur vos propres serveurs.

   The hero of a home page

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

   L'IA souveraine, sur vos propres serveurs.

   The hero of a page

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

   L'IA souveraine, sur vos propres serveurs.

   The title of a page

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

   L'IA souveraine, sur vos propres serveurs.

   The title of a section

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

   L'IA souveraine, sur vos propres serveurs.

   A sub-section, a big figure

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

   L'IA souveraine, sur vos propres serveurs.

   The title of a card or a dialog

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

   Vos documents restent à Montréal. Les réponses citent leurs sources, les coûts sont comptés d'avance — 1 234,56 $ pour 12 000 requêtes.

   The title of a list or a panel

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

   Vos documents restent à Montréal. Les réponses citent leurs sources, les coûts sont comptés d'avance — 1 234,56 $ pour 12 000 requêtes.

   The lead, a paragraph that stands out

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

   Vos documents restent à Montréal. Les réponses citent leurs sources, les coûts sont comptés d'avance — 1 234,56 $ pour 12 000 requêtes.

   Running text

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

    Vos documents restent à Montréal. Les réponses citent leurs sources, les coûts sont comptés d'avance — 1 234,56 $ pour 12 000 requêtes.

    Dense interface, secondary text

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

    Vos documents restent à Montréal. Les réponses citent leurs sources, les coûts sont comptés d'avance — 1 234,56 $ pour 12 000 requêtes.

    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)

Importez les polices une fois, à côté du preset : les tokens les nomment déjà.

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

Importez le CSS dans le layout racine — le bundler copie et empreinte les fichiers ; les replis gardent le CLS à 0.

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

React Native / Expo

Chargez les fichiers statiques avec expo-font, puis prenez une étape de l'échelle et le nom de sa police.

// 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>

Règles

• 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

Chaque police est sous SIL Open Font License 1.1 : à embarquer avec n'importe quel logiciel, jamais à vendre seule. Les licences sont livrées dans le paquet.

Généré depuis @krizaka/fonts@0.1.0 · @krizaka/tokens@2.4.0.Modifier dans krizaka-ui