Typography

Three components carry text: Text for everything inline, Title for headings, and Paragraph for prose blocks.

All seven sizes from xxs to xxl rendered side by side.

Loading example…

The scale

Token	Value	Scale
`$xxs`	12px
`$xs`	14px
`$sm`	16px
`$md`	18px
`$lg`	20px
`$xl`	24px
`$xxl`	28px

Sizes are token keys, so size="sm" on a Text and size="sm" on a Button label are the same 14px.

Token	Value
`$xxs`	1.35×
`$xs`	1.45×
`$sm`	1.5×
`$md`	1.45×
`$lg`	1.4×
`$xl`	1.35×
`$xxl`	1.3×

Unitless line-height multipliers (resolved to px against each font size). The ladder is a HUMP: it rises to 1.5 at `sm` and then TAPERS to 1.3, because the right amount of leading depends on what a size is used for, not just how big it is. The bottom steps are captions, labels and dense UI chrome — short strings where a tall line box just pads the control — so they run tighter. The middle is prose read over many lines, which wants the most air. The top steps are display copy, where a body ratio reads as a gap between lines rather than leading. A ladder that only climbs (the previous shape here, 1.35 → 1.65) inverts the top half: it made `$xxl` headings 46px tall, double-spaced. This matches the systems the kit draws from, which agree on the shape even though they express it differently. Mantine ships two scales — body `lineHeights` that climb 1.4 → 1.65 across 12–20px, and `headings.sizes` that taper 1.5 → 1.3 across 14–34px; our single 12–28px font scale spans BOTH ranges, so it has to be the union of the two, which is this hump. Tailwind's built-in pairings trace the same curve: 12/16 (1.33), 16/24 (1.5), 18/28 (1.56), 24/32 (1.33), 48/48 (1.0). Against the `font` scale above this resolves to 16 / 20 / 24 / 26 / 28 / 32 / 36 — every value even (so a `(height − lineHeight) / 2` centering gap stays on whole pixels), the first four on a 4px grid, and each one equal to the leading Tailwind or Mantine gives that same font size. Retuning here moves every derived line height at once — `config/fonts.ts`, `createTheme`'s font scales, and `getLineHeight`.

Read a resolved value with getFontSize / getLineHeight from @knitui/core if you need to match it in your own layout maths.

Headings

<Title order={1}>Page title</Title>
<Title order={3}>Section</Title>

order sets both the visual step and the host element — order={3} renders an <h3> on the web. That coupling is intentional: it keeps document outline and visual hierarchy from drifting apart. Override the look with size if a design needs an h2 that reads small.

Truncation

<Text truncate>One line, ellipsised</Text>
<Text lineClamp={3}>Up to three lines…</Text>

Both are platform-split internally — CSS line clamping on the web, native numberOfLines on device — behind one prop.

Inheritance

Text accepts inherit to take colour and size from its parent instead of the scale, which is what makes nesting work:

<Text c="$color11">
  Mostly muted, with <Text inherit fontWeight="700">emphasis</Text> inside.
</Text>

Fonts

createTheme({ fonts: { body: "Inter", heading: "Sora", mono: "JetBrains Mono" } });

Then fontFamily="$mono" resolves. On native, load the font file itself with expo-font (or your own loader) — registering a name in the config does not install it.

Anchor, Blockquote, Code, Highlight, Mark, Kbd, List and NumberFormatter all build on Text and share the same scale — see the Typography section.