Typography

Manti UI uses a compact UI-first type scale.

Text and Heading put that scale behind a component API, with a neutral emphasis ladder and semantic color as two independent axes. The remaining primitives add Manti's token-backed visual language without giving up native HTML semantics: Blockquote, Code, and Kbd.

Size

--manti-text-xs through --manti-text-5xl provide interface and display sizes. Pair them with --manti-leading-none, tight, snug, normal, or relaxed. none (1) is for single-line chrome such as a day-cell number or a segmented-control label, where the box should hug the glyphs.

xs · 0.75remThe smooth folded dough

sm · 0.875remThe smooth folded dough

base · 1remThe smooth folded dough

lg · 1.125remThe smooth folded dough

xl · 1.25remThe smooth folded dough

2xl · 1.5remThe smooth folded dough

3xl · 1.875remThe smooth folded dough

4xl · 2.25remThe smooth folded dough

5xl · 3remThe smooth folded dough

.card-title {
  font-size: var(--manti-text-xl);
  line-height: var(--manti-leading-snug);
}

Weight

Available weights are regular (400), medium (500), semibold (600), and bold (700).

regular · 400The smooth folded dough

medium · 500The smooth folded dough

semibold · 600The smooth folded dough

bold · 700The smooth folded dough

Tracking

Optical letter-spacing. Large type reads as loose unless it is pulled in, and small label-ish text reads as cramped unless it is pushed out. The stops are --manti-tracking-tighter (-0.02em), tight (-0.01em), normal, wide (0.02em), wider (0.04em), and widest (0.06em).

Because the values are in em, each stop scales with whatever font size it lands on. Text and Heading step through them automatically as size grows.

.hero-title {
  font-size: var(--manti-text-5xl);
  letter-spacing: var(--manti-tracking-tighter);
}

Families

--manti-font-sans — Inter with system fallbacks
--manti-font-mono — system monospace stack

Inter is not bundled. Load it in the application or override --manti-font-sans.

Last updated 13 September 2026